Blogger用テンプレートの着せ替え,Change templates for Blogger,更换Blogger的模板


    当ブログのテンプレートはずっと Vaster2 を使っていましたが、昨日ちょっとしたミスで破壊してしまいました。

    別のブログをカスタマイズしているところ、Blogger の管理画面で急に当ブログのに切り替わってしまい、気づかないで別のカスタマイズ内容をコピペして保存してしまいました・・・・・・あり得ない orz

    複数ブログを同時に編集していると、管理画面が混乱してしまうらしいので、常に管理画面のブログタイトルを注意して下さいね。

    Vaster2 のダウンロードは既に終了してしまい、復元はもうできません。仕方ないので別のテンプレートを探しました。日本語テンプレートの QooQ は当ブログの雰囲気に合っていないので、やはり海外テンプレートを使用しょうと思っています。

    以前から気になっていた、スカイブルーが爽やかで突き抜けるような感じの「fb NewsRoom」と言うテンプレートに決めて、着せ替えついでに、色々手順をメモに残し、同じテンプレートを気に入ってくれた方の参考になれば、と思います。

テンプレートに求める機能とは

    テンプレートを検索して、選ぶ段階から、どんな機能を期待して、どんなデザインをチョイスするかの話をしたいと思います。

    見た目で「うわ~かっこいい、素敵~♪」と言う感覚だけで、テンプレートを選んでしまうと、後悔する事が多かったので、経験者は語らせていただきますw

 スマートなデザイン

    海外ブログに多くあるもので、タイトル部分だけで広いスペースや大きな写真で一面を占め、コンテンツ部分は下へスクロールしないと見えないようなデザイン、表示速度が多少落ちるし、芸術性を追求するブログでは必要ですが、情報系のブログでは、コンテンツに辿り着くまでに余計な時間がかかり、SEO の一つであるユーザービリティに良く無い影響を与えます

    この使い分けには気を付けて、テンプレートを選択する必要があります。

    カスタマイズが出来る方は、トップのでっかいスライド写真の枠を外したリ出来ますが、コードに詳しくない場合は、レイアウトのガジェットでコントロールできるようなテンプレートがおすすめです。

    この「fbNewsRoom」のスライド写真部分は、レイアウトで管理できますので、コードに慣れていない方にもおすすめ出来ます。

    また、もっともポピュラーで一般大衆が見慣れているデザインは左側コンテンツ右側サイドバーと言う、2カラムのスタイルです。慣れているスタイルは、ストレスフリーで閲覧し易いと言われています。

② 記事リストデザイン

    殆どのテンプレは、トップページが記事リストになっています。しかし、そのリストデザインや表示方法も千差万別、デザイナーのセンスによって違います。

    ここは自分の感覚で確かめ、他の要素がいいからここは譲歩しょうと思っても、筆者の経験上、結局は面倒なカスタマイズをする羽目になります。

    ならば、最初から、多少サイズ調整するくらいはいいとして、デザイン自体は、自分好みのものを選ぶべきです。

③ レスポンシブデザイン

    スマホの時代と言っても過言ではない今、タブレットやスマホの画面に対応したレスポンシブデザインはとても重要であり、中でもメニューの表示で全体の印象を悪くしていないか、折り畳みメニューはあるか、必ず確認をしましょう。

④ パンくずリスト

    Google が提唱した構造化データにおいて、パンくずリストは非常に重要な役割を担い、serch console でもパンくずリストが評価に影響を与えてしまう、まさに SEO の一要因となりました。

    パンくずリストが無ければ、カスタマイズをしてでも作るべきとされています。それならば、テンプレートに標準装備されている方が、楽ですよね。

⑤ 関連記事ガジェット

    訪問者の内部回遊率を上げると言われている関連記事ガジェット、検索で辿り着く訪問者が求めている情報を、より正確、より迅速に提供できする役割があり、正に SEO の重要要素ですが、なんと、標準搭載していないテンプレートが結構ありました。要注意です。

    なくても、コードのカスタマイズをして、自分で装備する事は出来ますが、ある程度の知識と手間が必要ですので、これも、最初から標準装備してあると、助かりますね。

⑥ ソーシャルボタン

    標準装備してある必要性がありますので、確認して下さい。

    勿論自分でも HTML を使って簡単に装備できますが、全体デザインの整合性の問題もあって、最初から、日本でメインに使われる SNS がある事を確認しましょう。

    そもそもブログ自体が SNS でもあるのですが、検索ロボットの検索対象であるウェブサイトでもあります。ここで言う SNS は流行であるFacebook や Line の様に、対話型で、検索対象とされないウェブ上のコミュニケーションツールです。

    それらの SNS は既に大きな流れとなっていて、必要な情報を自ら検索する行動とは逆に、テレビの様に情報が垂れ流されて、目に止まったものをリンクで辿る使い方です。

    実際、かなりの拡散力があります。コンテンツによっては、訪問者を増やす事が出来るので、SEO 対策の一つとなっています。

⑦ ページ移動ボタン

    コンテンツページや検索ページで正しく動作するかどうか、意外と誤作動があったりして、テンプレートを着せ替える羽目になる事もありました。

    それと、記事の日付順に「前へ」「次へ」が逆だったり、迷ったりする事があります。いっそうアクティブページさえ分かれば、ページ数だけの方がすっきりします。

    新しいテンプレートは、サンプルページを用意しているもので、それぞれページ下の移動ボタンも確認して下さい。

⑧ 印刷レイアウト

    あまり注意されていませんが、必要と思われるコンテンツを、 PDF やプリントアウトする事もまだまだありますので、事前にテンプレートの印刷レイアウトを確認して置くと、のちのち後悔する事にならずに済みます。

    プリントアウトは基本機能ですから、実際に印刷しなくても、プレビューするだけでもいいです。日本語テンプレートの無料版でこの印刷レイアウトが乱れていたものがありましたので、注意が必要です。

現行テンプレートのバックアップ

    新しいテンプレートに着せ替える前に、必ず現在使用中のテンプレートをバックアップしましょう。

    バックアップの必要性と方法は、以前の関連記事に書きましたので、納得してから作業をしたいと言う方は、ぜひその記事を一読して下さい。

Blogger初心者向けVaster2が使えるまでの手順を画像付きで説明します - 学んで実践するサイト運営とSEO対策
現在のテンプレートをバッグアップする     パソコンを使い慣れている人でも一瞬にして失敗する経験があり、例えレポートファイル1つでも、バックアップを取る習慣があります。

    以前の記事では静止画とテキストで、順にバックアップの説明をしましたが、ここでは、GIF 動画を作成しましたので、見易い方で見て下さい。


    どうでしょう、見易く出来ましたか。

テンプレート「fbNewsRoom」のダウンロード


    上記ページからダウンロードできます。ダウンロード先のフォルダには、ZIP ファイルが入りますので、それを解凍(展開)します。関係ファイルがいくつか入っていますが、肝心のテンプレートは xml ファイルです。こんなファイルですよ↓


テンプレートの着せ替え方法

    テンプレートを実際に着せ替える方法は2つあります。慣れている人は①の方法を使う事が多いですが、Blogger 管理画面のメニゅーに従って、ステップバイステップに置き換える②の方法もあります。

① xml ファイルの中身を丸ごとコピペする
② 管理画面を使ってテンプレートをインストールする

    この②の方法も見易い様にと、GIF 動画を作成しました。


ブログテンプレートの確認と構造化データテスト

    サイト運営をしているなら、Search Console は欠かせない管理ツールの一つです。検索ロボットの動きやサイト状況をいつでも把握する事ができます。

    リニューアルした新しいバージョンの Blogger では、管理メニューをスクロールして行くと、直接 Search Console に入る事ができます。

    新しいテンプレートに着せ替えた後に、必ず Search Console をチェックして、変な動きはないかどうか、暫く観察する必要があります。

    また、テンプレートを着せ替えた後にぜひ一度確認して欲しいのは、構造化データテストです。

    テンプレートの構造が新しい構造化データのルールに従っていなければ、検索ロボットからブロックされますので、特に収益化を目指しているサイトは、大きなダメージを受けてるかも知れません。

    カスタマイズを行ったテンプレートは、カスタマイズ後にもう一度確認テストをお勧めします。


     これで、テンプレート「fbNewsRoom」の着せ替えが終わりました。

    海外テンプレートに限らず、自分なりに気になる部分を変更修正したいところは、必ずあるものです。次回はカスタマイズについて書きたいと思います。