2013年ベストワンのBloggerを日本語化してみよう!【未完】

おすすめ記事ピックアップ

先日Bloggerテンプレートの2013年ベスト10をかってに決めたのですが、今日はそのBEST1に輝いたBloggerテンプレートを日本語化してみようと思います。
【2013年決定版】ブロガーテンプレート・テーマBEST10選
http://www.furimuke.com/2013/12/2013-Blogger-Template-BEST.html
こちらのBEST 1 Sentifyを日本語してゆきます。実はこのテンプレートは、英字フォントの指定がない日本語に適したテンプレートです。日本語化というより、テンプレートの導入のコツと説明をいたします。

まずダウンロードページの紹介から。
Sentifyダウンロードページ
http://www.templateify.com/2013/10/sentify-responsive-blogger-template.html
こちらのダウンロードからxmlファイルを入手します。

ちなみにライセンスは、Creative Commons Attribution 3.0です。間違っているかもしれませんが、著作者のクレジットを表記すれば、コピーや改変して配布して良いというライセンスです。太っ腹です。自分用にカスタマイズしたものを配布するもの面白いですね。
Creative Commons Attribution 3.0
http://creativecommons.org/licenses/by/3.0/deed.en_US
このテンプレートは、フッターにクレジットがつきます。これを非表示にしたい場合は、16.99$支払うことで削除できます。フッターのクレジットを気にしなければ、無料で使って良いということです。

ダウンロードしたファイルには、2つのxmlファイルが存在しています。スライドバーナ機能の有り無しでファイルが分かれています。説明ではスライド機能ありの「Sentify.xml」を使います。


多くのBloggerの方は、テンプレートのインストールに「テンプレート」→「バックアップ/復元」→テンプレートをアップロードを利用すると思いますが、実は良くない方法なんです。

この方法でテンプレートを上書きしますと、レイアウト上にあるガジェットが過去の番号を持ったまま新しいテンプレートに配置されて、ぐちゃぐちゃになります。一つ一つ、手で修正された経験を持つ人も多いでしょう。

スマートな方法は、導入したいテンプレートのxmlファイルをテキストエディター等で開いて、すべてをコピーします。

そして利用中のBloggerの「テンプレート」→「HTMLの編集」へ入り、コピーしたコードでテンプレートを上書きします。こうするとガジェットの混乱もなく、スッキリした「レイアウト」を維持できます。直接コードを書き換えてしまうのです。

ガジェットの設定も無くなってしまうので、そこだけ気をつけてください。重要なものは設定を記録しておきましょう。またバックアップを取ってから、書き換えしましょう。

テンプレートの導入は完了しました。実に簡単です。しかし無料のテンプレートなので、ソーシャルアイコン、メニュー、スライドなどは自分でHTMLを編集して調整しなくてはいけません。

まずソーシャルアイコンがあるエリアのHTMLの編集から行きましょう。海外らしく様々なアイコンが掲載されています。

該当のHTMLを調べるために、例えばGoogle Chromeの右クリック「要素を検証」を使います。位置が<ul class='right'>だと分かります。

「テンプレート」→「HTMLの編集」に入りまして、「Ctrl + F」を押すと、コードの検索ウィンドウが出てきます。そこに<ul class='right'>を入力すると、ソーシャルアイコンが設置されているHTMLエリアがわかります。

<li>~~</li>で、各ソーシャルアイコンが記述されていますので、不要なアイコンを削除してしまいましょう。TwitterとFacebookだけ残します。

スッキリしました。

ああ、忘れていました。ソーシャルのリンクどうしましょう。見ているページをシェアする動的なURLを書きたいのですが、複雑になります。そんな時は、「忍者おまとめボタン」を設置しましょう。
忍者おまとめボタン
http://omatome.shinobi.jp
忍者おまとめボタンにログインして、設置するサイトでbloggerを選びましょう。

設置したいソーシャルアイコンを選択しましょう。

右寄せにして、コードをコピーします。

テンプレートのHTMLに貼り付けます。<li>~~</li>は全部消してしまって、<ul class='right'></ul>の間にコードを貼り付けましょう。

はい、うまく設置できました。でもちょっと高さの位置が気になります。

Google Chromeの右クリック「要素を検証」を使って、CSSレイアウトのコードを特定しましょう。

マージンが15pxになっています。位置が「header#masthead .right」であることも分かりました。ここの数値は、ブラウザー上だけ疑似的に変更できます。

-20pxぐらいでちょうど良さそうです。

さてCSSコードを変更しましょう。HTMLのコード編集に入り、「Ctrl+F」で、、「header#masthead .right」を探します。あれ???見つからない。。。何か注意事項が書いてあります。

Wants to customize? this is free version it will not come with full stylesheet if you want to customize purchase the licensed version of sentify from templateify.com

何?カスタマイズしたいの。これはフリーバージョンだから完全なスタイルシートは出てこないよ。カスタマイズしたいならtemplateify.comから、sentifyのライセンスバージョンを購入してね。

ってことですね。なんてことでしょう。。。。。今はじめて、無料の理由がわかりました。スタイルシートが付属してこないんですね。。。。。うーーんん。でもCreative Commons Attribution 3.0だから、追記はOKですよね。

下記コードを<b:skin><![CDATA[/*~~]]></b:skin>に追記しました。
header#masthead .right {
margin: -20px 0 0 0;
}

きれいにソーシャルボタンが設置できました。どうしよう。もうこの記事を書くのを止めようか悩んでいます。無料版でも、CSSが自由にならないなら、ちょっとイマイチですね。


記事途中・・・【未完】どーん!



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : 2013年ベストワンのBloggerを日本語化してみよう!【未完】
2013年ベストワンのBloggerを日本語化してみよう!【未完】
先日Bloggerテンプレートの2013年ベスト10をかってに決めたのですが、今日はそのBEST1に輝いたBloggerテンプレートを日本語化してみようと思います。
http://1.bp.blogspot.com/-JIthJ0dJqto/UpsI2inkErI/AAAAAAAANgI/j05cbNwA1bE/s640/t01.png
http://1.bp.blogspot.com/-JIthJ0dJqto/UpsI2inkErI/AAAAAAAANgI/j05cbNwA1bE/s72-c/t01.png
ふりむけばコウホウ
http://www.furimuke.com/2013/12/best1-blogger-templete.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/12/best1-blogger-templete.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy