前回の投稿で、Blogger 用日本語テンプレート「ZELO」について、ダウンロードしてから暫く使用した感想まで書きましたが、当初簡単なカスタマイズまで一気に書くつもりでしたが、作業時間が意外とかかってしまい、一旦終了させました。

    この投稿では、「ZELO」のカスタマイズについて書きますので、何の話？と思ったら、前回の記事を先に一読して下さい。

    では、早速目的別のカスタマイズを見て行きましょう。

    ダウンロードしたテンプレートの「ZELO」は、そのまますぐにでも使えるクオリティなので、そのままお使いになる方は特に気にする事はないでしょう。

    今回テンプレートの着せ替えを行った筆者の別ブログは、画像を多用しているので、あまり複雑なデザインではなく、オーソドックスにシンプルな2カラムが良いと、「ZELO」を選んだ訳ですが、超クールなビジネスライクな色でした。

    しかし、実際のブログ内容は生活の一部を扱い、温かい気持ちを纏っているブログなので、テンプレートを全体的に暖色系のカラーにチェンジしました。海外テンプレートと違って、「ZELO」のコードには思いやりが随所に見られ、カラーチェンジはとてもスムーズに行えました。

    Blogger の管理画面のメニューから「テーマ」を選択し、「html の編集」画面に入ります。具体的な画面操作方法は前回の記事に詳しく書いてありますので、ご参考下さい。

    コード表示ウィンドウに入って、CSS部分に移動すると、各要素と背景の色が纏まって整理してありましたので、カラーパレットで見つけた色の番号だけ、置き換えればいいのです。

    カラー指定のCSS部分を見つけるには、コード表示ウィンドウを下にちょっとスライドして、「テーマデザイナー設定」と言うワードを見つけます。ご覧のように、事細かく何処の何の色かが説明されています。

    唯一上記部分に指定無きカラーは、ブログ検索ボタンですので、全体的にカラーチェンジして、検索ボタンだけ別色と言うわけにも行きませんから、検索ボタンの色も変えましょう。

    コード表示ウィンドウがアクティブな状態で、「ctrl」＋「F」を押して、検索バーを表示させ、「gsc-search-button」と入力して、検索をして下さい。目印は Header 部分 CSS の上にあります。そこに、カラー指定の2行を追加して下さい。

    フッターには、アーカイブとラベルと注目の記事ウィジットが、３種類横並びに設置してあります。筆者のブログアーカイブは歴史の長さで縦に伸び切った状態で、その他2種類も引っ張られて、長～く伸びていました。これは、かなり見っともないかもです。

    フッターにウィジットを設置するスタイルは、海外テンプレートによく見る傾向ですが、ユーザーそれぞれの好みが強く反映される場所でもあります。そもそもフッターにクレジット以外にウィジットを置きたくない人もかなりいるでしょう。逆にビジネスなら、フッターには目立たせたくないが義務的に置かなければならないウィジットもある筈です。

    ここに少々問題がありました。

    Blogger テンプレートは一般的に、レイアウト画面で全てのウィジットが編集できるようになっていますが、「ZELO」はフッターにあるウィジットがレイアウト画面になく、表示させる事が出来ません。

    ならば、直接コードをいじるしかありません。

    フッターにあるウィジットのコードは下の画像部分です。<footer>と</footer> の間にありますので、「ctrl」＋「F」で footer を検索すると早いです。

    青い線で囲んだ部分を <!-- と --> で囲みますと、フッターにあるウィジットは表示しなくなります。（新しいバージョンの Blogger は非表示タグでコードを囲むと、囲まれた部分のコードは削除されてしまいましたが、下部ウィジットは本当に不要かどうか、良く確認してから行動して下さい。）

    もし一旦削除してから、やはり必要と思われる方は、オリジナルダウンロードページで、この部分のコードをもう一度コピーペをして下さい。

    ユーザービリティと言って、自分が運営するサイトに訪問するユーザーを想定した上、どこまで見易い文字にするか、と言う事です。変更するか否かを問わず、コードのどこか、場所だけは知って置きましょう。

    先ずは文字サイズの指定場所は、下記画像の反転色部分です。因みに、文字間隔の設定はそのしたの行で「letter-spacing」部分で、規定値で満足していますので、今回筆者は文字間隔を変更しておりません。

    次は行間の設定場所ですが、他の Blogger テンプレートなら、大抵は line height で数値を設定しますが、上の画像にある line-height は設定を変更しても、見た目が変わりません。body 全体のデフォルト設定のような気がします。

    思い当たるのは post-body か entry-post、作家さんによって設定するコード名が変わりますが、ZELOには どちらもなく、それに類似する entry-content がありました。しかし、entry-content では細かい設定がなく、おもいっきり追加して見ると、行間を自由に設定ができました。

    参考部分は下記画像の反転色です。場所を見つけ易い様「記事ページデザイン」のコードを全部コピペしまいたが、追加するのは1行2単語と数値だけですw

    やはりネックはこれです。拘る訳については、かつて一生懸命に関連記事ウィジットを探していた頃の記事に書きましたので、興味が有る方はご一読願います。

    結果的に Blogger を使っているなら、ADS を申請して、広告ユニット設定で関連記事ユニットを設置する事ですが、それには毎日安定したPV数が1000以上、記事数が150以上と言う条件がありました。筆者のブログはまだそこまで成長していませんでした。残念です。

    Google ADS の広告ユニットが使えるようになるまでは、以前書いた、上記記事の中にある関連記事ガジェットを候補として、試してみたいと思います。