Blogger初心者向けVaster2が使えるまでの手順を画像付きで説明します
※注意！
Blogger 用 SEO 対策済みテンプレートの「Vaster2」は2018年8月現在、一部に構造エラーが発見されています。修正する事は出来ますが、HTML に慣れていない方や自信がなくて不安な方は、ご注意ください。
暫く前に Vaster2 を見つけ、SEO 対策済みのテンプレートで、既に Blogger のユーザーの中では有名になっていました。当ブログも現在 Vaster2 に着せ替えました。
比較して見ればわかる違いがわかります。以前のブログイメージはこんな感じです。
今のブログはアイキャッチの画像です。
筆者は十数年前に、ずぶの素人からブログをスタートしていましたので、純正な Blogger Templates しか選択肢がなく、最もシンプルな白いテンプレートに落ち着いたが、かっこ良さを求めて行くうちに色々切り捨てる事になりました。
Vaster2 にしてから、表示できる情報量が倍以上増えたのに、画像サイズが自動的に揃えられているから、スッキリしているし、ヘッダーの下部分にパンくずもラベルもかっこ良く表示できて、記事内にしっかり ads も入り込んでいます。欲を言えば、adsをもっと文章の下の方に入れ込んで欲しかったかな、それと余白を少し詰めたいですね～、VAIOノートの縦可視範囲が狭まいから、コンテンツの文面が沈み込んで見えません。 まぁ、そんな些細な事は追々で。
Vaster2が使えるまでの手順を自分用に残したいので記事にして置きます。同じユーザーならば参考になれる何かがあるかも知れまっせんので、どうぞご自由に参照下さい。
Vaster2の特徴
テンプレートの着せ替えは結構面倒な手間で、自分のコンテンツとの相性がいいのかどうかも、初めは把握できません。よほど魅力的な個性がなければ、あまり積極的にテンプレートの着せ替えなんて、しませんよね。
ブログを運営し続けるには、何らかの強い原動力が必要です。テンプレートには、その原動力を支えるサポート機能が必要です。Vaster2 が出来ることは、そのまま Vaster2 と言うテンプレートの魅力でもあります。Vaster2 には以下のような特徴があります。
● 日本語に馴染むフォントの選択
● それぞれ見出しの雰囲気に合う飾り
● 初心者でもテンプレートデザイナーによるカスタマイズが簡単
● 主なカスタマイズ箇所は日本語で説明あり
● かっこいい SNS ボタン設置済み
● 関連記事ウィジェットを標準搭載
● ads 設置個所もコードの中で見つけ易いよ日本語で説明あり
● テンプレート導入後の初期設定も丁寧に解説
海外テンプレートと比べると、Vaster2 はさすが日本人らしい思いやりが随所になり、感激します。
Vaster2のダウンロード
制作者であるトーマスさんのブログ「トーマススイッチ」のダウンロードページでDLできます。Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
Vaster2 機能の説明などを辿って下へスクロールして行くと、ダウンロード（以降DLに略します）の部分が見つかります。（2020年9月現在DLボタンがなくなっていますので、DLは終了したようです。）
HTMLに精通していませんので、筆者は「Vaster2-テンプレートデザイナー」をDLしました。
自分のパソコンの「ダウンロード」フォルダーに、DLした Vaster2-TD ファイルがあるので、確認しましょう。
現在のテンプレートをバッグアップする
パソコンを使い慣れている人でも一瞬にして失敗する経験があり、例えレポートファイル１つでも、バックアップを取る習慣があります。今のテンプレートはもう使わないかも知れませんが、ちょっとしたカスタマイズやデザインのアレンジを後から使いたいのにわからなくなった、と言う事になればとても面倒になります。なので少々手間ですが、取り敢えずバックアップして置きましょう。要らなければ後からいくらでも簡単に削除できます。
テンプレートのバックアップ手順
② サイドメニューから「テーマ」をクリック
③ 表示されたテンプレートの下にある「HTMLの編集」をクリック
④ 現れたソースを「CTL＋a」で全内容を選択する
⑤ 「CTL＋c」で選択したソースをクリップボードにコピーする
⑥ メモ帳かなんかに「CTL＋v」で貼り付ける
⑦ コピーしたソースをファイル名付けて保存する
Vaster2をインストールしょう
Bloggerのテンプレートをインストールするのは難しくありません。主な方法はソースを丸ごとコピペする事でインストールが出来ます。 テンプレートインストール手順
② 「CTL＋a」 で全内容を選択する
③ 「CTL＋c」で選択したソースをクリップボードにコピーする
④ Bloggerのテンプレート用HTMLウィンドウに入る（バックアップ時に開いた）
⑤ 「CTL＋a」で全内容を選択する
⑥ 「CTL＋v」でクリップボードに記憶したVaster2のソースを貼り付ける
⑦ オレンジ色の「テーマを保存」ボタンをクリック
以上でいわゆるインストール作業は終わりますが、まだ終わりません。続きがありますので要注意！本家のブログの続きにある通り、初期設定があります。
① モバイルプレートの選択を「いいえ」にする（テーマ画面の操作）
アクティブにしたHTMLの画面で「CTL」+「f」を押すと、右上の隅に検索BOXが現れますので、「feedly」を入力して「enter」で下記ソース部分を探します。（画像はクリックすると大きく見えます）
上記画像の反転部分「ブログURL」を自分のサイトのURLと入れ替えて下さい。例えば当サイトは https://do.clipout.net なら反転している部分だけです、最後に「/」も要りません。これで「テーマを保存」ボタンを押して下さい。
③ adsを設置する
上記ソースの中に制作者が分かり易く設置場所を教えてくれています。下記画像の部分に指示通り、自分のadsコードを2ヵ所に貼り付けます。
貼り付けたadsコードに「async」と書かれている部分があります。レスポンシブデザインにしたい場合は、そこを「async='async'」に書き換えます。また「テーマを保存」します。
これで全ての設定は終わりました。お疲れ様です！と言いたいところですが、Google ではデータの構造化を進めており、html のコード構成も構造化データのルールに従わないと、search console でエラーとして扱われ、検索エンジンから見放されてしまいます。
Vaster2 は恐らくデータ構造化の前に作成されたもので、「構造化データ テストツール」を使って、構造エラーを見つけられる事になっていましたが、その構造化データテストツールがサービス終了となり、テストページは2021年2月現在はまだ、一応存続していますが、リッチリザルト テスト - Google Search Console への使用切り替えを強く推奨し、ゆくゆくは構造化データテストツールのページは削除されるとのことです。
p.s.
当サイトで使用している Vaster2 の構造化データエラーの修正が終わりました。参考にしたい方は下記記事へお越しください。