当ブログを新しいテンプレート「fbNewsRoom」に着せ替えた直後の、トップページのイメージが上記画像です。投稿はページ当たり8記事分を表示する様設定していましたが、トップページはスライドを目立たせるためなのか、3記事分だけ表示され、記事のサムネイルもボケボケな状態です。読み込む速度に影響しているのは、スライドではないかと推測します。

    一応、テンプレート候補を探す時は、以下のポイントをチェックしています。それぞれの詳細は、前回の投稿をご参照願います。


・スマートなデザイン → すっきり2カラムと派手過ぎない色使い
・記事リストのデザイン → 見易さと表示内容
・レスポンシブデザイン → スマホ、タブレットの見え方
・パンくずリスト → 標準装備
・関連記事ガジェット → 標準装備
・ソーシャルボタン → 標準装備
・ページ移動ボタン → 混乱しないクリックし易さ
・印刷レイアウト → ページレイアウトの崩れがないか

    着せ替えしてみると、当ブログのタイトルとメニューが取得されていない状態です、勿論サイドバーも当ブログの状態ではないので、どうやら最初は手動設定が必要です。

アドセンス関係の設定確認

    収益化ブログなら、無駄な時間を失くしたいので、先ずはこれです。新しいテンプレートに着せ替えると、設定は継承されますが、meta記述が大抵なくなっているので、再コピーが必要です。

● 管理画面の「設定」メニューの中から収益ボタンのオンと、ads.txt を確認
● html の編集画面から、<head>中のアドセンスのmeta記述を確認

    アドセンスのmeta記述はアドセンスの管理サイトにあるメニューの「広告」から取得できます。

レイアウトの設定

● HEADER ADS ガジェット → 古い広告スタイルなので削除（※注1）
● HEADER → logo画像を削除して、タイトルを表示させる
● MENU → 以前はページリストでしたが、今回はリンクリストで設定し直す
● SLIDER WIDGET → 芸術ブログではないので、削除（※注2）
● SIDE BAR → それぞれのウィジェットは自分の考えで変更させて下さい
● FOOTER → 長い尻尾のような記事関係ウィジェットを全て削除（※注2）

※注1
    上記設定の後に、レイアウトが一部異常事態になりますが、次のカスタマイズで直して行きますので、この段階では気にせずに進めましょう。

※注2
    筆者がカスタマイズの際にやっている事なので、削除したくないと思う方は削除しなくていいです、また、削除しなかった場合は、下記にあるカスタマイズで関連性のある部分は飛ばしてください。また、Blogger のレイアウトでガジェットと称するものは、ここでは、ウィジェットと呼んでいます。違いは検索して頂ければわかりますが、ここに限って、同じ意味とお考え下さい。

【CSS】タイトル部分のスペース調整

    右上の旧 ads 固定枠を外したところ、タイトルの幅が全体の行幅に戻りませんので、それを戻して行く事と、出来るだけ縦幅を詰めて行きたいと思います。PC の使用上、ノートタイプが断然多いので、横長縦短いモニターが多く、筆者の VAIO ノートでも同じく、なるべく下の記事が頭を出せるようにしたく、HTML を弄って行きたいと思います。

    上記レイアウトの設定は、「設定」と定義されますが、Blogger の管理画面にある「テーマデザイナー」を使う事も含めて、html を変更する事でテンプレートに手を加える事は、「カスタマイズ」と言う括りになります。

① 「管理画面」→「テーマ」→「html を編集」、でコードの画面を出します。

②  「headerleft」で検索し、反転部分を見つけ、タイトルの幅を調整



    クリックすると大きい画像で見る事が出来ます。

③ 「header」で検索し、反転部分を見つけ、タイトルの余白を調整


④ ブログ説明が入るならいいですが、タイトルのみの場合は説明部分の余白も調整

    「description」で検索し、反転部分を見つけ、値を変えましょう。


    クリックすると大きい画像で見る事ができます。ここで一度、ブログの表示を見て見ましょう。タイトル部分は自分が思うようにカスタマイズされているかを確認します。

【CSS】書式のカスタマイズ

    この「fbNewsRoom」と言うテンプレートは、とても見易い書式で、ほぼそのまま使えると思いますが、筆者の視力がかなり落ちてしまいましたので、必要な部分のフォントだけでも、少し大きくしたいと思います。

    「post-body」で検索し、反転した部分を見つけ、文字サイズを調整します。


    サイドバーにある人気記事ガジェットの記事タイトルが、一般的に太字で目立たせているものですが、このテンプレートでは普通の文字でしたので、太字にしましょう。「PopularPosts」で検索し、反転する部分を見つけ、値を変えましょう。
    ちなみに筆者は視力が良く無いので、文字の大きさも変えています。（間にある「font-size」の指定）

    色は気に入ってますので、特に変える必要がないと思い、今回は何もしていません。色の変更も CSS で行いますが、カラーコードと言うのがあって、#ffffff のように、#と6ケタの英数字が目印です。また、色のセンスと言うか、心理的に不快な色の組み合わせにならないように、気を付けなればなりませんので、事前に下記記事を参考にすれば、何かを学べるかと思いますので、リンクを貼って置きます。

色彩調和を知る上でのカラースキーム - 手作りの温もり
いきなり目に刺激的なものを見せてしまい、大変申し訳ありません。昭和時代のブラウン管テレビを見て育った世代なら、少々刺激が強くても、懐かしいのではないかと思います。本記事は旧 Google Site から引っ越して来たもので、たびたび更新しております。


    一段落です。本記事は長く見えるので、手間だ面倒だと、頭を過るでしょうが、殆どは参考画像ですし、その上、必要なカスタマイズだけ拾って行けばいいと思いますので、そんなに大変ではありません。気軽にチャレンジしてみて下さい。

【html】メール登録ガジェットを削除

    右上、サイドバーの上にあるメール登録は、html コードに組み込まれたもので、管理画面のレイアウトからも、削除する事が出来ませんでした。しかし、個人情報法が施行してから、メールアドレスの収集には、プライバシポリシーの規約制定が必要で、そもそも自分のブログはメールアドレスを集める意味がないので、削除して行きたいと思います。

    ちなみに、メアドを入れてテストしょうと思ったところ、「このフォームは安全ではないため、自動入力をオフしました。」と言うメッセージが出ましたので、ますます無意味なものですね。CSS と hmtl の両方に設定が見つかりましたが、CSSを見たところ、ほっといても害はありません。hmtl 部分だけ探して行きましょう。

    「rssform」を検索して、反転した部分を見つけ、<!--と-->で囲みます。または、完全削除をします。

    クリックすると大きい画像で見る事が出来ます。海外テンプレートのカスタマイズで、怪しいものは削除し、怪しい動きをしそうなものは使わない、それが結構大事な心掛けです。

【html】スライドショーのスペースを綺麗に削除

    上記レイアウトの設定で、スライドショーウィジェットを削除しましたが、まだ画面にはCSSによる設定が残っていましたので、スライドショー部分は大きく白いスペースが空いています。それではウィジェットを削除する意味がなくなってしまいますね～

   なので、html を編集して、そのスペースも削除しましょう。「slider」で検索し、反転した部分を見つけ、<!--と-->で囲みます。または、完全削除をします。


    スライド書部分がかっこいいと思っているなら、レイアウト設定でのウィジェット削除をせずに、このカスタマイズも行わないで下さい。

【html+CSS】footer部分をすっきりさせましょう

    footer にある3つのガジェットを、レイアウト画面から削除はしましたが、まだ画面にその CSS が下記画像のように残っていました。なので、すっきりさせるように、カスタマイズして行きましょう。


    「lowerbar-wrapper」を検索して、反転した部分を見つけ、<!--と-->で囲みます。フッター部分のウィジェットは気分次第で復元したくなる人もいますので、完全削除せずに、<!--と-->で囲めば、復元する時は囲みを削除するだけで、楽ですw


    htmlで削除しても、CSSが残ったとしても、ブログコンテンツに影響はないですが、アドセンスで自動広告をしている場合は、テンプレートのレイアウトとして、下記画像の様に広告が割り込まれる事があります。


    フッターウィジェットがないのに、広告だけちょっこんと左三分の一に割り込まれると、何だか情けないですので、下にあるウィジェットのスタイルシートを全部取っ払ってしまいたいですね。

    「lowerbar」で検索して、反転部分を見つけ、CSS部分を/*と*/で囲いましょう。ここでも、上記html同様、復元する時に必要なので、完全削除せずに、/*と*/で囲みます。/*と*/の間にはテキストを書き入れられますので、フッターウィジェットなど、一言メモしておくと、いつでもわかり易くなります。


    まだあります。


    まだまだあります。


    海外テンプレートは日本開発者のような気遣いが無いので、それぞれのコーナー部分のCSSでも纏まってなくて、思いつきや調整しながらベタ打ちしているのでしょう、面倒ですが、頑張って行きましょう。


    最後です。


    開発者のメモで「Layout （No Edit）」は編集するなと言う意味ですが、いらないものはいらないので、悪いけど、そこのスタイルは無しにさせて貰いましょうw 他の部分は絶対に触らないで下さいね、テンプレートのインストールを初めからやり直す事になり兼ねません。

【html】footer menu を設定

    ブログの footer 部分にメニューがあるのは、海外テンプレートに良くある事です。無料で配布してはいるが、開発者のブログや連絡先に繋いでいるので、困りますよね。著作権の表示なら、開発者の権利でリンクされていても仕方がありませんが、メニューはブログのコンテンツの一部ですので、変えて置きましょう。

    削除を試して見ましたが、何らかの仕掛けをしていて、「contact」は削除できませんでした。細かくコードをチェックして行く必要があり、今の段階では時間も知識も不足していますので、自分の都合で、別リンクに置き換えました。置き換えはちゃんと有効でした。


●「HOME」は当ブログのURLを入れました
●「ABOUT」はプライバシポリシーのページに置き換えました
●「CONTACT」はリンク集のページに置き換えました（わざわざ作ってw）

    別にどのページに置き換えても問題はありません。いずれは余計なフッターメニューを削除したいと思っていますので、出来た時は、別途記事を作って説明する予定です。

著作権表示を忘れずに

    右サイドバーに著作権表示ウィジェットがありますが、html で追加する事も出来ます。上記 footer 部分を下にスクロールすれば、見つかりますので、今回は説明を省略させて頂きます。探すのが面倒なら、右サイドバーのウィジェットのままで使っても、全然違和感はありません。

    さて、基本的なカスタマイズは、ここで一旦締め切ります。大した事がない基本的なカスタマイズだけですが、取り敢えず使うには、必要なカスタマイズかと思います。海外テンプレートでも、簡単に自分好みに変える事が出来ると言う事を、実感して欲しいと思いました。