Blogger-Vaster2

Blogger レスポンシブル対応テンプレート　Vaster2の導入方法

 Vaster2の導入方法

画像と合わせて、直近の複数の記事が見渡せるBlogger向けテンプレートがあります。

レスポンシブルでスマホやタブレットにも対応しています。

このテンプレートはトーマスさんより無償提供されています。

ここでは、この使い勝手の良いテンプレートの導入方法をご紹介します。

はじめに

このテンプレートの導入前にBlogger（ブロガー）で作成したブログがあった方が理解しやすいと思います。

1記事でOKです。

この時、ブロガーの「テーマ」画面は、シンプルを選択するのが良いようです。


また、アドセンス広告を載せることを念頭に置いているのであれば、カスタム（独自）ドメインを事前に取得しておくのが望ましいと思います。

ブロガーにカスタムドメインを設定する方法はネット上でいくつか紹介されていますので参照してください。これに関しても後日、設定の手順書的な記事を紹介する予定です。

Vaster2ダウンロード

このテンプレートは、以下のトーマスさんのブログ「トーマスイッチ」よりダウンロードして入手してください。

　Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

トーマスイッチには、本件の他の情報もあるので事前に見ていただけると良いと思います。

Bloggerへの導入方法

Google社のBloggerをここではBloggerまたはブロガーと表示します。



１．ブロガーメニューの「テーマ」画面を開く

２．画面右上の「バックアップ復元」をクリック

３．「ファイル選択」より、先にダウンロードしたvaster2のファイルを選択する

Vaster2 ファイル選択

４．「アップロード」する

アップロード

上記で導入終了、画面が以下のテンプレートに切り替わっている。

モバイル対応

スマホ等に対応するため、以下の設定を行う。


５．「テーマ」メニューより　モバイル画面下の設定アイコン（歯車）をクリック

下記の画面が表示される。


６．「いいえ、モバイル端末でもパソコン用のテーマを表示する。」を選択する

説明を追加

下記画面となる。


７．「保存」をクリック

説明を追加

下記の用にモバイル画面が網掛けになり、無効となる。

Vaster2導入直後は、自己紹介が赤丸で示すようにメイン画面の上部に配置される。

説明を追加

レイアウト変更

ここでは、「自己紹介」をサイドバーに表示する配置変更例を紹介する。


８．「レイアウト」メニューを開く

説明を追加

初期状態では、下記の赤丸で示すように　header部に自己紹介の「基本情報」ガジェットがある。

９．自己紹介の「基本情報」ガジェットをドラッグして、そのまま下方にあるsidebar-sectionの人気記事の手前でドロップする

ドラッグ＆ドロップでレイアウト変更

自己紹介のガジェットが移動できたことを確認する。



１０．「配置を保存」をクリック


１１．プレビューで配置変更していることを確認

以下の画面のように自己紹介がサイドバーに変更される。

レイアウト変更後の画面

SNSボタン feedly 設定

feedlyに対応するためHTMLの一部変更（簡単）が必要です。

他のボタンは、ここでの設定は不要です。



１２．「テーマ」メニュー　赤矢印部の「HTMLの編集」をクリック

HTMLの変更

下記のような画面になりますが、大丈夫です。

HTMLの記述の中から、以下のセンテンスを探す。

<li class='feedly'>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FブログのURL' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
    </li>

「ブログのURL」という記載に注目する。


わたしの場合は、検索をかけましたが、上手く見つからず、結局、力づくで見つけました。

わたしが見つけたときは、1576行目にありました（下の画面の赤線部）

大体この近辺の行数のところにあるようです。

「ブログのURL」を探す

１３．ブログのURLを、自分のカスタム（独自）ドメイン名に変更する


下記の青文字がわたしのブログ運営のブログのドメイン名になります。

<li class='feedly'>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fmikookim.xyz' target='blank'><i class='fa fa-rss'/><br/>Feedly</a>
    </li>

URLやwww.付の記載ではないことに注意してください。




１４．下記の赤線のように自分のドメイン名を記載したら、「テーマを保存」をクリック

カスタムドメイン名に変更

以上で設定は全て完了です。


お疲れ様でした。

このテンプレートは、フロントページに複数の記事が写真等と合わせて個人的に好みのデザインで整理された表示となるので、とても気に入っています。

しかし、まだ使いこなせていません。

インターネットエクスプローラでは、人気記事等の概要がグーグルクロムの表示に対して長文となっているようです。

この辺の対応策等も検討していく予定です。



追記）feedlyについては、ボタンを押してみましたが、エラーとなってしまいます。

他にVaste2を使っている方でも同様のエラーがあるようです。

これについては、もう少し確認したいと思います。






最後まで読んでいただき、ありがとうございました！