Blogger用日本語テンプレート「Vaster2」の導入とカスタマイズ

さて、多くのBloggerユーザーに共通する悩みとして、なかなか「コレだ！」と満足できるテンプレートに出会えない…というのがあるかと思います。

もちろん、海外のサイトを探せばサードパーティー（第三者）製のBlogger用テンプレートは「これでもか！」というぐらいヒットしますが、大抵の場合は欧米のユーザーを対象としてフォント関連のCSSが組まれている為、当然の事ながら日本語を表示した時に微妙なズレが発生してしまい、表示位置の微調整に追われる事が日常茶飯事です。

また、その微調整にしても、ソースリスト内の注釈文も全て英語で書かれている為、例えば「トップページでの表示位置だけを変えたい」「記事ページの時だけ表示したい」といった細かなカスタムの時に何処をイジれば良いのか判然としないので、「ココかなぁ？」と見当をつけた部分の数値を変えてみて一度保存し、実際の表示画面を見ながら「ココじゃなかったわ…」などと呟きながら探り当てていく作業にも時間を取られてしまいます。

そんなBloggerユーザー達の悩みを受けて、最初から日本語での表示を前提として設計されたテンプレートである「Vaster」が昨年の春頃にリリースされた時は、多くのユーザーが喜んで導入しました。

シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していく
http://toumaswitch.com/vaster-templete/

しかし、こういった個人が開発したプロダクトの常として細かな部分での不具合、例えば「特定のウィジェットを追加した時に表示が大きく崩れる」等がチラホラと報告されていたので、私は導入を躊躇っていたのですが…

去る6月に満を持してリリースされた「Vaster2」では、それらの不具合が殆ど解消されている様子でしたので、いよいよ当ブログにも導入してみた次第です。

Vaster2の特徴

Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
http://toumaswitch.com/vaster2/

Vaster2を適用したサンプルブログ
https://sanpururururur.blogspot.com/

PC画面とモバイル画面に限りなく同一のデザインを適用する「レスポンシブデザイン」である事は当然として、前作「Vaster」から更に大きく改良された点は以下の通りです。

①デフォルトのテンプレートと同じ「テンプレートデザイナー」を組み込んだバージョンを用意する事により、Blogger初心者でも容易にCSSの変更を行えるようになった。

他のブログサービスのユーザーには馴染みがないと思われますが、Bloggerの管理画面はデフォルトの状態で選べるテンプレートに対して、「ヘッダー」「記事ページ」「フッター」等の各パートの色やサイズの数値を変更した場合に、どの様に表示が変わるのかをリアルタイムでプレビュー表示してくれる機能が付いています。


ですが、サードパーティー製のテンプレートの場合、何故かこの機能が無効化されている場合が殆どなので、先述したようにCSSを変更したら一度保存、それから該当ページをロードして確認、上手い具合に変更できていなかったらまた戻って…という事を繰り返さなければなりません。

私自身はテンプレートの開発をした事がないので、何故、大半の開発者がこの機能を外してしまうのかは分かりませんが、外した方がソースが軽くなるからかもしれません。

その辺りを考慮してか、上記の発表ページではテンプレートデザイナー「有り」のバージョンと「無し」のバージョンの両方が用意されていますので、皆さん自身の需要に応じてダウンロードしてください。

②ソーシャルボタンを内製化した事により、記事ページの表示速度が格段に向上した。

個人的には、これが最も効果の高い改善点なのではないかと思っています。

海外製のテンプレートには、TwitterやFacebookといったお馴染みのソーシャルボタンの他にも、必ずと言っていいほど「Pinterest」や「Linkedin」といった日本人ユーザーには馴染みの薄いソーシャルメディアのボタンが並んでいます。

前作「Vaster」ではそれを考慮して、ソーシャルボタンを「Twitter」「Facebook」「はてなブックマーク」「Pocket」の四点に絞る事により、日本人ユーザーによる日本語記事の拡散用に特化しました。


ただし、それにも一つだけ難点があって、どんなソーシャルメディアのボタンであろうと、それぞれのサービスのAPI、つまりは「外部」からボタンのパーツを呼び出している事に変わりはありませんので、時間帯などによっては全てのボタンが表示されるまでにかなりの時間を要してしまう事がありました。

「速さが売り」のBloggerにとって、これは大きな痛手です。

しかし、Vaster2ではCSSを利用してボタンの内製化を図った事により、「Twitter」「Facebook」「Google+」「はてなブックマーク」「Poket」「Feedly」という6種類ものボタンを表示しているにも係わらず、記事ページの表示速度は前作を遥かに凌ぐものとなりました。

その他にも、日本語の注釈文を用いる事により、カスタムしたい箇所がソースリスト内の何処に記述されているかが一目瞭然で判別できる親切な設計は、前作からしっかりと継承されています。

個人的なカスタマイズポイント

以下は私の個人的な使い勝手や、他の所有ブログと共通したイメージ戦略を施す為に加えたカスタマイズです。
なお、カスタムに際しては以下の記事を参考にさせて頂きました。

Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ
https://www.memorou.com/2016/06/bloggervaster2.html 

●フォントを「Helvetica,"游ゴシック"」から「Meiryo,"ＭＳ Ｐゴシック"」に変更した。

【変更前】

body{
   font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;
   background-color: #fff;  /*  全体の背景色  */
   margin:0;
   font-size:16px;
   line-height:1.6em;
}

【変更後】

body{
   font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif;
   background-color: #fff;  /*  全体の背景色  */
   margin:0;
   font-size:16px;
   line-height:1.6em;
}

●引用枠内に色を付けて、引用文であることがハッキリと分かるようにした。

【変更前】

blockquote {
     padding: 10px 30px;
    margin: 10px 0 20px 0;
    border: 1px solid #c8c8c8;
    overflow-wrap: break-word;
}

【変更後】

blockquote {
    position: relative;
    max-width: 95%;
    overflow: auto;
    padding: 15px;
    margin: 15px 0px;
    border: 1px solid #d7d1be;
    font-size: 14px;
    font-weight: 400;
    background: #f0f8ff;
}

●テーブルと、その内容物の表示位置を調整する為に以下のコードを追記した。

『/* 記事ページ */』と書かれた注釈が示す範囲内に以下のコードを追記する。

/* テーブル */
.post-body table td, .post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #c82d2d;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #eee;}
.post-body th{font-weight:700;}
.post-body table caption{border:none;font-style:italic;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #eee;}
.post-body td:hover{background:#fafafa;}
.post-body th{background:#fc4f3f;color:#fff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

●その他にも、訪問者に信頼感を与える事を意図して、全体的なボーダー色にFacebookと同じ色使い(#3b5998等)を適用した。

以上、他にもカスタマイズを加えた場合は、この記事に順次追記していく予定です。

数字のページナビゲーションを実装する

前作の「Vaster」では導入されていた「数字」のページナビゲーション（ページャーとも呼ぶ）が、何故かVaster2では廃止されているので、これを再度導入する事にしました。


このカスタムは「パーツを追加する」というよりも、どちらかといえば「ページの構造そのものを改築する」という性質に近いので、コードを追記する場所を間違えるとメインページ（INDEXページ）そのものが表示されなくなる恐れがあります。
必ずバックアップを取った上で、自己責任で行ってください。

追記する場所はCSSが１個所、HTML本体が2個所の計3個所です。

【CSS】

『/* ページナビゲーション /*』と注釈が書かれているコードが既にあるが、これは「次の投稿」と「前の投稿」のボタンを表示する為のものなので、その一段下の区間に以下のコードを追記する。

/* 数字のページナビゲーション */
.pagenavi {
clear:both;
margin:-5px 0 10px;
text-align:center;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}
.pagenavi span,.pagenavi a {
margin-right: 3px;
display: inline-block;
color: #454C56;
background-color: #F4F7FB;

padding: 11px 14px;
margin: 15px 3px 50px 0;
}
.pagenavi .current, .pagenavi .pages, .pagenavi a:hover {
background:#1da1f2;
color: #fff;
}
.pagenavi .pages {
display:none;
}

【HTML本体①】

<b:includable id='nextprev'>と<b:includable id='post' var='post'>の間の区間に、以下のコードを新たに追記挿入する。

<b:includable id='page-navi'>
  <div class='pagenavi'>
    <script type='text/javascript'>
            var pageNaviConf = {
                perPage: 5,
                numPages: 9,
                firstText: "First",
                lastText: "Last",
                nextText: "Next",
                prevText: "Prev"
                }
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
      //]]>
    </script>
    <div class='clear'/>
  </div>
</b:includable>

【HTML本体②】

このカスタムの中で、コードの挿入位置の把握が最も難しい個所です。
先述したように、挿入位置を間違えるとメインページ全体が表示されなくなる恐れがありますので、必ずここまでのバックアップを取ってから慎重に行ってください。

<b:includable id='main' var='top'>の配下から、以下の記述を探し出す。

<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
<data:adEnd/>

その<data:adEnd/>の真下に、以下のコードを追記挿入する。

<!-- 数字のナビ -->
     <b:if cond='data:blog.pageType == "index"'>
       <b:include name='page-navi'/>
       <b:else/>
       <b:if cond='data:blog.pageType == "archive"'>
         <b:include name='page-navi'/>
         <b:else/>
         <b:include name='nextprev'/>
       </b:if>
     </b:if>

挿入個所が正しければ、最後の</b:if>が<b:if cond='data:top.showDummy'>の真上に位置している筈ですので、入念に確認してください。

1ページ枚の表示件数を調整する

HTML本体に追記挿入した上記二つのコードの内、【HTML本体①】の方で1ページ枚の投稿表示件数（5件）を指定していますが、この数字はレイアウト画面の「ブログの投稿の設定」→「メインページの投稿数:」で指定されている数字に合わせる必要があります。

もしも、両者の数字が違う場合、例えば「ブログの投稿の設定」では「10投稿」を指定しているのに、上記コードの方で指定した「5件」がそのままだったとします。
すると、「トップページでは10件表示しているのに、2ページ目以降では5件ずつしか表示しない」という、なんともカッコワルイ状態になってしまいます。

この数字を揃えるには【HTML本体①】で追記したコードの中から「perPage: 5,」という記述を探して下さい。
この「5」を上述の「ブログの投稿の設定」で指定してある数値に合わせれば、正常に表示されます。

ちなみに、その「perPage: 5,」という記述の次の行に「numPages: 9,」という記述がありますが、これはナビゲーションの数字を1ページあたり最大で何個表示するかを指定するものです。
上記のコードでは「9」が指定してありますので、ナビゲーションの数字（表記）はトップページで「1」「2」「3」「4」「5」「6」「7」「8」「9」「NEXT」「LAST」となります。

この状態で仮に「NEXT」をクリックすると、次ページの表記は「PREV」「1」「2」「3」「4」「5」「6」「7」「8」「9」「NEXT」「LAST」となります。

もちろん、上記の説明はそれだけの記事数のストックがある場合に「最大」で表示される個数ですので、この値をどんなに大きくしても実際には「ストックされている記事数÷1ページ毎の表示件数」の値の分しか表示されません。