SEO対策を極め検索上位を狙い乍ら趣味のDO IT MYSELF Blogger初心者向けVaster2が使えるまでの手順を画像付きで説明します

Blogger初心者向けVaster2が使えるまでの手順を画像付きで説明します


※注意!
  Blogger用SEO対策済みテンプレートのVaster2は2018年8月現在、一部に構造エラーが発見されています。修正する事は出来ますが、HTMLに慣れていない方や自信がなくて不安な方は、ご注意ください。

  暫く前にVaster2を見つけ、以前書いた記事にリンクを載せました。

  このVaster2はBlogger用のSEO対策済みのテンプレートで、既にBloggerのブロガー達の中では有名になっていました。Bloggerにはなかったけど、ずっと欲しかった関連記事のガジェットが実装されていました。当ブログも現在Vaster2を使っています。

比較して見ればわかること

  前のブログイメージはこんな感じです。


  今のブログはこんなトップページです。



  筆者のスタートはずぶの素人からでしたので、純正な Blogger Templates しか選択肢がなく、最もシンプルな白いテンプレートに落ち着いたが、かっこ良さを求めて行くうちに色々切り捨てる事になりました。

  Vaster2にしてから、表示できる情報量が倍以上増えたのに、画像サイズが自動的に揃えられているから、スッキリしているし、ヘッダーの下部分にパンくずもラベルもかっこ良く表示できて、記事内にしっかりadsが入り込んでいます。

  欲を言えば、adsをもっと文章の下の方に入れ込んで欲しかったかな、それと余白を少し詰めたいですね~、VAIOノートの縦可視範囲が狭まいから、コンテンツの文面が沈み込んで見えません。

  まぁ、そんな些細な事は追々で。

  Vaster2が使えるまでの手順を自分用に残したいので記事にして置きます。Vaster2を使いたい人は、どうぞご自由に参照下さい。

Vaster2のダウンロード

  制作者であるトーマスさんのブログ「トーマススイッチ」へ飛びます。

  機能の説明などを辿って下へスクロールして行くと、ダウンロード(以降DLに略します)の部分が見つかります。


  HTMLに精通していませんので筆者は「Vaster2-テンプレートデザイナー」をDLしました。

  自分のパソコンの「ダウンロード」フォルダーに、DLしたファイルがあるので確認しましょう。

現在のテンプレートをバッグアップする

  パソコンを使い慣れている人でも一瞬にして失敗する経験があり、例えレポートファイル1つでも、バックアップを取る習慣があります。

  今のテンプレートはもう使わないかも知れませんが、ちょっとしたカスタマイズやデザインのアレンジを後から使いたいのにわからなくなった、と言う事になればとても面倒になります。なので少々手間ですが、取り敢えずバックアップして置きましょう。要らなければ後からいくらでも簡単に削除できます。

手順
① Bloggerの管理画面を開く
② サイドメニューから「テーマ」をクリック
③ 表示されたテンプレートの下にある「HTMLの編集」をクリック
④ 現れたソースを「CTL+a」で全内容を選択する
⑤ 「CTL+c」で選択したソースをクリップボードにコピーする
⑥ メモ帳かなんかに「CTL+v」で貼り付ける
⑦ コピーしたソースをファイル名付けて保存する

Vaster2をインストールしょう

  Bloggerのテンプレートをインストールするのは難しくありません。主にソースを丸ごとコピーペする事でインストールが出来ます。

手順
①  DLしたファイルの「Vaster2-TD」を開く
② 「CTL+a」 で全内容を選択する
③ 「CTL+c」で選択したソースをクリップボードにコピーする
④ Bloggerのテンプレート用HTMLウィンドウに入る(バックアップ時に開いた)
⑤ 「CTL+a」で全内容を選択する
⑥ 「CTL+v」でクリップボードに記憶したVaster2のソースを貼り付ける
⑦ オレンジ色の「テーマを保存」ボタンをクリック

  以上でいわゆるインストール作業は終わりますが、まだ終わりません。

まだ続きがありますので注意!

  本家のブログの続きにある通り、初期設定があります。

① モバイルプレートの選択を「いいえ」にする
  管理メニューのテーマ画面での操作です。

② 「feedly」ボタンの設定をする

  アクティブにしたHTMLの画面で「CTL」+fを押すと、右上の隅に検索BOXが現れますので、「feedly」を入力して「enter」で下記ソース部分を探します。(画像はクリックすると大きく見えます)


  上記画像の反転部分「ブログURL」を自分のサイトのURLと入れ替えて下さい。例えば当サイトは https://do.clipout.net なら反転している部分だけです、最後に「/」も要りません。これで「テーマを保存」ボタンを押して下さい。

③ adsを設置する
  上記ソースの中に制作者が分かり易く設置場所を教えてくれています。下記画像の部分に指示通り、自分のadsコードを2ヵ所に貼り付けます。


  貼り付けたadsコードに「async」と書かれている部分があります。レスポンシブデザインにしたい場合は、そこを「async='async'」に書き換えます。また「テーマを保存」します。

  これで全ての設定は終わりました。お疲れ様です!

  では、構造化データテストツールを使って、今回発見されいた構造エラーを見つけましょう。これらのエラーSEO対策に不利なので、次の記事でその修正方法を説明したいと思います。

p.s.
  構造エラーの修正が終わりました。参考にしたい方は下記記事へどうぞ。
Vaster2とBloggerの内部テンプレートの構造エラーをせっせと修正します
Vaster2構造エラーに続いて警告部分も修正しましょう