Bloggerテンプレート・Vaster2のインストールとカスタマイズ

PCとスマホ
Blogger用の日本語テンプレート・Vaster2を導入して最初に行いたいカスタマイズの備忘録。
Bloggerは海外テンプレートが主で、日本語のテンプレートといえばVasterくらいしかないんじゃないかな?デザインもおしゃれでWordPressみたいな感じに仕上がっています。
ダウンロードはトーマスイッチさんで≫Vaster2
前テンプレート・Vasterではテンプレートデザイナーが搭載されていませんでしたが、Vaster2では、テンプレートデザイナーあり、なしの2種類が用意されているので、CSSが苦手な初心者でも簡単にカスタマイズできます。

初期設定

●モバイルテンプレートをオフにする
初期設定
管理画面の「テンプレート」-モバイルの歯車マーク-「いいえ」にチェック。
●feedlyボタンの設定
「テンプレート」-「HTMLの編集」-「li class='feedly'」を探します。
HTML編集画面でコードを探すには、[Ctrl] [ F]を押します。
「li class='feedly'」と入力すると該当の箇所がハイライトされるので探しやすいです。
feedly
<li class="feedly"><a href="http://cloud.feedly.com/#subscription%2Ffeed%2F&lt;font style=" background-color:#FFFF00?>ブログのURL</font>" target="blank"&gt;<i class="fa fa-rss"><br>Feedly</a> </li>
ブログのURLを自分のブログのURLに変える。このブログだと「micoblo.com」となります。
以上2つは必須。(トーマスイッチより)
あとは好きにカスタマイズしてや~~(笑)となっているので、少々のカスタマイズをしましょうね~

Vaster2をカスタマイズ

●管理画面ーテンプレート-カスタマイズ-上級者向け-テンプレートデザイナーでやること。
・全体の背景色の変更
・ヘッダーの文字や説明文に色変更
・ヘッダーナビの色変更
・ラベルの色や文字の変更
・記事ページh2,h3の背景や文字色の変更
・関連記事の背景色変更
・ページナビの線、色の変更
・サイドバーの文字や色の変更
・サイドバーラベルの線や色の変更
・人気記事タイトルの色変更
・スマホのメニューを開くボタンの色変更
テンプレートデザイナーでは文字色や背景色など、色の変更しかできません。色を変えたいときは簡単に出来るのでとっても便利です。文字の大きさや行間、余分な線を消したい・・などCSS関連はできないので、直接HTMLをいじっていきます。「CSSを追加」というのがあるので、追加する場合はここに記入すればいいんだろうけど、よく分からないのでさわっていません。

管理画面-テンプレート-HTMLの編集

<!--css-->を開きます。▶をクリックすると展開する。
●文字フォントを変更
font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif;

●ヘッダータイトル下の空白を変更する。
padding-bottom: 30px; →を10pxに。

●月別アーカイブのリストの上下の間隔を狭くする。
「archive-list ul」で検索
padding: 0 0 0 1.25em;
line-height: 1.25em; に変更

●記事とサイドバーの間にある区切り線を消します。
「date-outer」で検索
border-right:1px solid #e4e4e4; を削除。

「Previous」と「Next」を「前の投稿」と「次の投稿」に変更
「Previous」で検索
Previousを「前の投稿」に、すぐ下のNextを「次の投稿」に変更する

●フッターに線と色を付ける
コンテンツとの境目に線を引く。
.footer-outer {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #ebebeb;
}

同じ場所に色を付ける
color:#ffffff;
background-color: #0b5394;

●フッターにメニューを追加する。
管理画面のレイアウト-footerの+ガシェットを追加-HTML/JavaScriptを追加。
<div><p><a href=ブログのURL/p/blog-page_○○○>このサイトについて</a></p>
<p><a href="ブログのURL/p/blog-page.○○○">サイトマップ</a></p></div>
ブログ情報などはフッターのメニューに載せています。


スポンサーリンク

スポンサーリンク

0 件のコメント :