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が自由にならないなら、ちょっとイマイチですね。

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