Blogger Bloggerカスタマイズ テンプレート

Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ

前回テンプレートを変更してから、あと2ヶ月で2年が経ちます。今回は、Bloggerで私が唯一知っている日本語テンプレート、「Vaster」に変更しました。

海外テンプレートは「Blogger トップページにカテゴリ別の記事一覧を表示できるテンプレート」

「Vaster」は非常にシンプルなデザインで、WordPressを使ったことがある人なら一度は見たことのある「STINGER」を彷彿させる、カスタマイズのし甲斐があるテンプレートです。

2016年6月現在、「Vaster2」が無料公開されています。


ダウンロードは、トーマスイッチさんのブログからお願いします。
ちなみにトーマスイッチさんのブログは、Bloggerの「Vaster2」ではなく、WordPressの「STINGER5」です。

カスタマイズの前には必ずバックアップを取りましょう。データのバックアップやCSSの追加、ガジェットの追加方法は「テンプレートカスタマイズ時の基本」を参考にしてください。

今までのテンプレートにCSSを追加している場合は、その部分をコピーしてメモ帳などに保存しておくとスムーズに移行できます。

もくじ
随時追加

Vaster2のカスタマイズ

Vaster2には、無印とTDがあります。TDはテンプレートデザイナーのことで、TD付きのテンプレートは「上級者向け」からリンクの色や見出しのデザインが簡単に変更できます。
今回は無印をカスタマイズしました。

レイアウトの変更

レイアウトから不要なガジェットを削除し、表示位置がずれてしまったガジェットを移動します。

ヘッダーのカスタマイズ

基本的にHTML編集の「ヘッダー」内を編集します。

ヘッダートップのボーダーとタイトル下の空白を削除

border-top:7px solid #008ec2;
と、2行下の
padding-bottom: 30px;
を削除する。

空白を狭めるだけのときは、30pxを10pxなどに変更する。

ヘッダーの上の空白を削除

上から2つ目の
padding-top:20px;
を削除する。

タイトルロゴを真ん中に

スマホとタブレットで見たときに、タイトルロゴが真ん中に来るように変更する。
@media screen and (max-width: 768px){
#Header1_headerimg {
    margin: 0 auto;
}
}
を追加する

メニューバーの変更

pagelistの1つ目
background-color:#4b99b5;
を削除して
border-top: 1px solid #999;
border-bottom: 1px solid #999;
を追加する。

「ヘッダーナビゲーション」の
background: #4b99b5;
を削除して
color: #fff;
を#666に変更する。

レスポンシブ表示時のカスタマイズは後述

パンくずリストの上の空白を狭く

.breadcrumb-wrapper
で検索して、30pxを10pxに変更する。

サイドバーのカスタマイズ

サイドバーの幅を変更

サイドバーの幅を300pxにするために
padding-left:40px;
で検索して、30pxに変更する。

月間アーカイブの変更

階層表示のJSが機能していない気がします。そんな人は、一度レイアウトからアーカイブを消して、改めて追加すると直るかもしれません。

階層表示時の上下の間隔を狭くする
.archive-list ul
で検索して、
padding: 0 0 0 1.25em;
line-height: 1.25em;
に変更する。

テキスト・見出しの変更

ブログ全体の文字をメイリオに変更

font-familyにメイリオを追加する。
font-family:"meiryo","メイリオ",Helvetica,"游ゴシック","Yu Gothic",sans-serif;
追加後は上記のようにまります。

見出しの装飾

記事中のH2の上に空白を追加する。
.entry-content h2で検索して、
margin-top: 30px;
を追加する。

H3の変更
.entry-content h3で検索して、
margin-bottom: 20px;
margin-top: 30px;
border-bottom: 1px solid #999;
を追加し、
padding: 5px 0 5px 10px;
に書き換える。

H4の変更
上記のH3の下に、
.entry-content h4 {
font-size:18px;
border-left:none;
}
を追加する。

SNSボタンの変更

「Vaster2」にはデフォルトでSNSボタンが表示されるようになっています。これを今まで使っていた「忍者おまとめボタン」に変更します。
SNSボタン編集で検索して、
<!--SNSボタン編集-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
ここに貼り付ける
</b:if>
<!--SNSボタン編集ここまで-->
上記の「ここに貼り付ける」の部分に「忍者おまとめボタンのスクリプトコード」を貼り付けます。
ifを消すとトップページの各記事の下にも表示できますが、ページを開くときに重くなります。

Bloggerに忍者おまとめボタンを簡単に設置する方法

この変更と同時にSNSボタンもレスポンシブ対応のものに変更しました。

SNSボタンの変更

/*SNSボタンのカスタマイズ*/
から
/*   リンク
----------------------------------------------- */
の上までを全て削除する。

関連記事のカスタマイズ

文字の太さを変更

関連記事に表示されるタイトルを太字から普通に変更する。
#related-titleで検索して、
font-weight:700;
の700を500に変更する。

リンクの色を変える

#related-posts aで検索して、
color :#666;
を記事内のリンクの色と同じ色に変更する。

マウスオーバー時の色を変える

#related-posts a:hoverで検索して、
color :#fff;
background :#008ec2;
の色をそれぞれ#008ec2と#eeeに変更する。

見出しの装飾を変える

#related-posts h2 {
padding :.5em .75em;
margin-bottom :30px;
background :#424A76;
color :#fff;
}
から
#related-posts h2 {
padding: .5em .75em 0;
margin-bottom: 30px;
color: #111;
border-bottom: 1px solid #777;
}
に変更し、背景をなくして文字の下に線を引く

表示する文字を変える

「この記事の関連記事」から「この記事に関連する記事」変更する。
この記事の関連記事で検索して、好きな文字に書き換える。

表示する記事数を変える

デフォルトでは関連記事が8件表示される。
maxresults=8
で検索して、8の部分を表示したい件数に変更する。今回は6件表示に変更しました。
表示する件数に関係なく、サムネイル画像の大きさは変わらない。画像のサイズをCSSで変更しないのであれば、4の倍数の件数にすると見た目が崩れない。それ以外の件数にする場合は、サイズを変更しないと空白ができます。

画像の大きさを変える

1行に4件表示している状態で、画像の大きさが幅150pxに設定されているため、3件表示するときは幅200pxにするとピッタリはまります。この際、高さも変更することを忘れずに。
150:100=200:x　x=133.333
幅200pxに指定した場合は、高さを133pxにするとほぼ同一の比率で拡大できます。
#related-posts .related_imgで検索して、
width :150px;
height :100px;
から
width :200px;
height :133px;
に変更する。

タイトルの幅を広げる

上記同様に、#related-titleの幅も200pxに変更する。高さは特に変える必要はない。
タイトルの幅を変更したときはレスポンシブ表示に幅の指定を追加する必要があります。

レスポンシブ表示については後述

人気記事のカスタマイズ

.popular-post ul li aで検索して、
font-size :15px;
color :#666;
font-weight :700;
文字の大きさを14pxに、色を#111に、太さを500に変更する。

マウスオーバー時

マウスオーバー時の色を記事内のリンクの色と同じにして、アンダーラインを表示させる。
.popular-post ul li a:hoveで検索してカラーを変更、
text-decoration: underline;
を追加する。

トップページのカスタマイズ

時計マークを非表示

投稿日時を非表示にしても消えない時計マークを非表示にする。
.post-timestampで検索すると3つ出てくるので、それぞれに
display: none;
を追加するか、
.post-timestamp {
display: none;
}
を追加して、一度に全部消す。

記事ページの時計も同時に消えます。

記事タイトルの変更

文字の色と大きさを変更する。幅を狭めたときと2つあるので注意。
.article-list-title h2で検索して、
color:#666;
font-size:23px;
を#111と20pxに変更する。

抜粋の変更

文字の色を変更する。
.snippetで検索して、#333に変更する。

新着記事を表示しない

サイドバーに設置している新着記事をトップページにだけ表示しないようにします。
自分で付けたタイトル（新着記事・新しい投稿など）かidで検索する。
このブログの場合は下記のようになっている。
<b:widget id='Feed1' locked='false' title='新着記事' type='Feed' version='1' visible='true'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
これに魔法のコードでおなじみの
<b:if cond='data:blog.url != data:blog.homepageUrl'>
</b:if>
を追加する。
ただし、widgetの外ではなくincludableの内に追加します。

記事ページのカスタマイズ

ブラウザの幅を縮めたときに左側に余白を作る

.date-outerで検索して、
padding-left: 10px;
を追加し、40pxを30pxに変更する。

これに伴い、レスポンシブの.post-bodyのpaddingを変更する。
padding: 0px 15px 0px 5px;

記事とサイドバーの区切りを変える

記事とサイドバーの間にある線を消します。
.date-outerで検索して、
border-right:1px solid #e4e4e4;
を削除する。線の種類や太さ、色を変えたい場合は適宜変更する。
※このコードはデフォルトと違う可能性があります。

削除した場合、気になる人はレスポンシブのコードも同時に削除する。
.date-outerの2つ目の
border-right:none !important;
を削除する。

「Previous」と「Next」を「前へ」と「次へ」に変更する

;Previousで検索してPreviousを「前へ」に、
すぐ下のNextを「次へ」に変更する

フッターのカスタマイズ

線を引く

コンテンツとの境目に線を引き、下の空白を狭くする。
.footer-outer {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #ebebeb;
}
を追加する。

色をつける

上記と同じ場所に
color:#eee;
background-color: #000;
を追加する。上は文字の色

メニューバーを設置する

フッターにメニューを追加します。
レイアウトのfooterに「HTML/JavaScript」を追加する。
HTMLの編集に下記を追加する。
<nav class="grobal-navi">
 <ul class="footer-nav">
  <li>
   <a href="リンク先URL">
   テキスト
   </a>
  </li>
  <li>
   <a href="リンク先URL">
   テキスト
   </a>
  </li>
 </ul>
</nav>
<div class="clear"></div>
続いて、テンプレートのHTMLの編集からCSSを追加します。
.footer-nav {
  padding: 0 !important;
}

.footer-nav li {
  float: left;
  list-style: none;
  font-size: 14px;
  padding: 0;
}

.footer-nav a {
  padding: 10px 20px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  display: block;
  transition: .3s;
}

.footer-nav a:hover {
  background-color: #666;
  color: #fff;
  text-decoration: none;
}
ヘッダーナビをほぼそのまま貼り付けているので、色やサイズなどは適宜変更してください。

レスポンシブ表示時のカスタマイズ

「Vaster2」のレスポンシブ表示は、横幅が768px以下か、それ以上かの2種類しかありません。
今回ここまでにしてきたカスタマイズ内容だと、2種類では表示がおかしくなる箇所もあります。例えば、関連記事の画像の大きさがそれです。
パソコンのブラウザを徐々に狭めていくと、768pxになった瞬間に画像が小さくなってしまいます。これはスマホで見たときに見やすくするためで、タブレットなどの少し大きな画面の場合は逆に見づらくなってしまいます。そこで、もう一つ480px以下の表示を作り画像を三段階で大きさが変わるようにカスタマイズします。

関連記事の画像の大きさ

まず、レスポンシブデザインの#related-posts .related_imgを
width:140px;
height:100px;
から
width:240px;
height:160px;
に変更する。
次に、768pxの｝以降に、
@media screen and (max-width: 480px){
#related-posts .related_img{
width:140px;
box-sizing:border-box;
height:100px;
}
#related-title {
width :150px;
}
}
を追加する。
これで、少し大きい画像が546pxまで1行に2件まで表示できるようになります。545px以下は1列の表示になり、480px以下で2列の表示切り替わります。
数値は適宜変更してください。

表示速度を早くする

「Vaster2」で少し残念なのは、シンプルなデザインなのにページの表示スピードが遅い（重い）というところだ。PageSpeed InsightsでURLを入力し、遅ければ改善することをオススメする。

グーグルではモバイルネットワークで1秒未満でページをレンダリングすることを推奨している。
PageSpeed Insights でのモバイル解析

PageSpeed Insightsの説明は省くとして、当ブログの表示スピードは下記のようになっている。
「Vaster2」変更後の修正前
モバイルが62点、パソコンが72点となっている。

※この記事は素人が作成したものです。正しい方法ではない可能性も十分あります。ここに記載した内容は、同等の速さになることを保障するもではありません。むしろ遅くなることもあります。また、遅くなるだけではなく動作すらしなくなる可能性もあります。デモサイトなどでテストにテストを重ねてから、すべて自己責任で実行するようにしてください。最低限バックアップを取ることを強くススメます。

ひとまず、「黄色い！の修正を考慮」は置いておいて、「赤い！の修正が必要」から改善していきます。「修正方法を表示」すると改善のヒント（答え）が書かれている。
WordPressの場合、プラグインを入れることで簡単に改善することができる。ことが多いが、Bloggerにはなさそうなので自力で少しずつ改善していく。

画像を見てわかるとおり、「レンダリングをブロックするスクリプトソースが11個、CSSリソースが5個あります」と教えてくれている。
この中には、「Vaster2」とは直接関係のない「忍者おまとめボタン」のソースも含まれている。

ページスピードを早くするためにやったこと

1.javascriptを/bodyの直前に移動

元々、
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
となっていたところを、
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
だけ切り取って、
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
</body>
/bodyの直前に貼り付けた。

この結果、
モバイルが66点、パソコンが79点まで改善した。
その代わり、モバイル表示時にメニューの開閉ができなくなるので注意してください。

2.Google+ウィジェットの廃止

今まで使用していた「Google+フォロワー」と「Google+バッジ」を廃止して、「Google+ Follow Button」で作成したボタンを設置した。
詳細オプションのタグを解析で「任意のタイミング」を選択すると、読み込みを遅らせることができる。右側に表示される「ウィジェットを――」と「レンダリングを――」のコードをガジェットの追加で「HTML/JavaScript」に貼り付ければ表示できる。

この結果トップページ（今までは個別ページ）の表示速度は、
モバイルが71点、パソコンが86点になった。トップページの元のスピードを保存していなかったため比較はできません。

スマホ表示時のメニューをカスタマイズ

上記で使えなくなったメニューの開閉ボタンを非表示にして、ボタン風に変更する。
まずは、開閉ボタンを非表示にする。javascriptコード自体を削除してもいいが、また使いたくなったときのために消さずにCSSで非表示にします。
.button-toggleで検索して、レスポンシブデザインの
display:block!important
を
display:none
に書き換えます。
次に、リンクをボタン風にカスタマイズします。

スマホとタブレットサイズ表示時のメニューバーをカスタマイズの表示方法と同様に変更します。

.header-nav liで検索して、レスポンシブデザインの方を
.header-nav li {
float:none;
}
から
.header-nav li {
border: 1px solid #666;
margin: 1px;
width: 48%;
border-radius: 6px;
text-align: center;
}
に変更します。

3列表示にしたいときは48%を32%に変えてください。

Vaster2を使うときの注意

アドセンスを楽に設置したとき

Vaster2には、アドセンスを記事の途中と記事下に簡単に設置できる、便利な機能がついています。

この機能を使うときの注意点として、記事中と記事下の両方にアドセンスを設置数する場合、moreタグがない記事は記事下にアドセンスが2つ並ぶことになります。
moreタグがないときは表示されないのではなく「記事下に行く」ということです。

これは、スマホ表示で見たときにはポリシー違反になるので、一度すべての記事にタグが入っているか確認することをおすすめします。※最新のポリシーは、ご自身で確認してください。

カスタマイズの追加

お問い合わせページの追加

ページに連絡フォームを使ったお問い合わせページを追加します。
HTMLの編集なしで、コピペで簡単に設置できます。

現在、サイドバーやフッターに連絡フォームを設置している方にもオススメです。
詳しくは「お問い合わせページの追加」へ

アドセンスを関連記事下に追加

関連記事とコメントの間にアドセンスを追加します。

</div><div class='clear'/>
</b:if>
ここに下のコードを追加
<div class='post-footer'/>
                    <!--関連記事ここまで-->
上の「ここに下のコードを追加」部分に下記のコードを追加します。
<b:if cond='data:blog.pageType == &quot;item&quot;'>
ここにアドセンスコード
</b:if>
上の「ここにアドセンスコード」部分に自分のアドセンスコードを追加します。

ifを削除するとトップページの記事の下にも表示できます。※規約違反にならないように注意

うまく表示されない場合は「Bloggerの記事タイトル下と記事下にアドセンス広告を設置する方法」を参考にしてください。

コメントを左寄せに変更

コメントの文字が「均等割付」になっているのを「左寄せ」に変更します。
.comments .comments-content .comment-content {
  text-align: left;
}
を追加する。
スポンサーリンク
関連記事
スポンサーリンク