Vaster2の導入方法とおすすめの設定

みなさんこんにちは！soeパパです。

今回はBloggerのおすすめ日本語対応テンプレートのVaster2の導入方法の解説です。

導入後のおすすめの設定も合わせてご紹介しますね。
テンプレートを変更しますのでバックアップをとっておくのを忘れずにやっておきましょう。

テンプレート「Vaster2」の導入方法

STEP.0
現在のテンプレートのバックアップ。
これは絶対にやっておいてください。
Bloggerのバックアップ方法を確認する。

STEP.1
まずはトーマスイッチさんのサイトからVaster2のファイルをダウンロードしましょう。
TD版(テーマデザイナー版)もありますがカスタマイズするつもりなら通常版をダウンロードしましょう。

STEP.2

「テーマ」のタブを選択して右上の「バックアップ/復元」をクリック。

STEP.3

「ファイルを選択」をクリックして先ほどダウンロードした「Vaster2のファイル」を選択します。

STEP.4

「Vaster2.xml」とファイル名が表示されましたか？
アップロードをクリックします。

STEP.5

「テーマ」のタブのモバイルの設定を開きます。
「いいえ。モバイル端末でもパソコン用のテーマを表示する。」を選択。
Vaster２はレスポンシブwebデザイン対応なのでモバイルのテーマを使う必要はありません。
これで完了です。

おすすめの設定変更

テンプレートは変化しましたか？
初期状態で導入したらならこんな感じです。

なんもないですが最初はこんなもんです。

レイアウトの変更

まずは自己紹介の位置を変えましょう。どーんと一番上に自己紹介がきているのでちょっと恥ずかしいですよね。少し控えめにサイドバーの下の方にいどうさ

STEP.1

「レイアウト」のタブを選択。

STEP.2

自己紹介をマウスでドラッグして移動。
プロフィールはサイドバーの一番下か一番上がいいですね。

STEP.3

画面の外にサイドバーのエリアがある場合はmainなど他のエリアに一旦置きましょう。ドラッグしながらホイールをまわすとページを下に送ることも可能です。
今回はサイドバーの一番下に配置します。

STEP.4

完成です。

Jqueryのバージョンを上げよう

Jqueryとは「JavaScript」というプログラミング言語をより扱い易くしたファイルのことで、これを使うと簡単にアニメーションのような表現を利用する事ができるようになります。

一般的にはファイルをダウンロードして自分のブログがあるサーバーに置いて読み込ませるのですが、Bloggerは外部ファイルを標準では扱う事ができないようになっています。
BloggerでJqueryを利用する場合はGoogleのCDNから読み込むことになります。

Vaster2は1.8.2のバージョンを読み込むようになっています。

バージョンを上げると古いブラウザが対応できなくなるデメリットがありますが、特に気にしない場合は最新の3.x系に変えてしまってかまいません。
新しいものの方が速度が速くなるなどのメリットがあるので問題なければ変更しておきましょう。

Font Awesomeのバージョンを上げよう

webアイコンフォントのFont Awesomeが利用できるように６行目にコードが入っています。

これですね。設定されているバージョンは4.4.0。
この記事を書いている時点では4.7.0が最新なので修正しておきましょう。
「4.4.0」を「4.7.0」に書き替えるだけでOKですが、念のため公式サイトのBootstrapCDNで確認して変更してください。

Feedlyを設定しよう

Vaster2のSNSボタンは６つあるのですがその中にFeedlyがあります。
「Feedly」はブログの更新を自動で受け取れるRSSリーダーで、利用している方向けに「RSSフィード」を自分で入力しておかなければいけません。

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

赤字の部分を下記に差し替えましょう。

Atom 1.0
https://feedly.com/i/subscription/feed/あなたのブログのURL/feeds/posts/default
RSS 2.0
https://feedly.com/i/subscription/feed/あなたのブログのURL/feeds/posts/default?alt=rss

どちらで入力してもかまいませんがAtomの方が新しいのでAtomがいいかもしれません。
「https」を利用している場合は、「s」が抜けていないか忘れずに確認してください。

まとめ

テンプレートの導入自体は簡単です。
ですが、入れる前やテンプレートのカスタマイズをする場合は必ずバックアップを取るようにしましょう。失敗した場合も復元できるようにしておかないともしもの場合は大変困ることになってしまいますからね。

ガジェットのレイアウトなどは個人の好みですがJqueryやFont Awesomeのバージョンアップはコードを書き換えるだけなのでやっておいた方が無難です。Feedlyもボタンがあるだけで機能しないのでは訪問者さんに申し訳ないのでそちらも忘れずに設定してくださいね。

今日のお話はここまで！
それではまたお会いしましょう〜

Vaster2の導入方法とおすすめの設定

テンプレート「Vaster2」の導入方法