Blogger用レスポンシブ対応日本語テンプレート「Vaster2」を導入した件


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

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

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

そんなBloggerユーザー達の悩みを受けて、最初から日本語での表示を前提として設計されたテンプレートである「Vaster」が昨年の春頃にリリースされた時は、多くのユーザーが喜んで導入しました。
シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していく
http://toumaswitch.com/vaster-templete/

Vasterを適用したサンプルブログ
http://kasumamaizusan.blogspot.jp/

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

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

Vaster2の特徴

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

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

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

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

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

【テンプレートデザイナー】

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

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

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

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

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

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

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

Vasterのソーシャルボタン群
【前作「Vaster」のソーシャルボタン群】

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

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

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

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

日本語の注釈文
【親切な日本語の注釈文】

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

以下は私の個人的な使い勝手や、他の所有ブログと共通したイメージ戦略を施す為に加えたカスタマイズです。
なお、カスタムに際しては以下の記事を参考にさせて頂きました。
Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ
http://www.memorou.com/2016/06/bloggervaster2.html 

フォントの変更

●フォントを「Helvetica,"游ゴシック"」から「Meiryo,"MS Pゴシック"」に変更した。
【変更前】
body{
     font-family:Helvetica,"游ゴシック","Yu Gothic",sans-serif;
   background-color: #fff;  /*  全体の背景色  */
   margin:0;
   font-size:16px;
   line-height:1.6em;
}
【変更後】
body{
   font-family:"meiryo","メイリオ","MS Pゴシック",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等)を適用した。

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

数字のページナビゲーションの導入

【改訂】2017/03/15

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

PageNavigation
【数字のページナビゲーション】

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

なお、導入に際しては下記記事を参照しましたが、このブログの他のパーツ(フッター等)との位置関係上、コードの記述位置は下記参照記事とは異なりますので注意してください。
Bloggerのテンプレート「Vaster」をカスタマイズ⑪ ページナビゲーションがまったく表示されない・150記事程度までしか遡れない不具合を解消する方法
http://neverenough777.blogspot.jp/2016/06/bloggervaster150.html

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

【CSS】
【変更前】
/*    ページナビゲーション
------------------------------------------------ */
.blog-pager {
background: none;
text-align: initial !important;
}
#blog-pager a,.showpageOf,.pagecurrent{
font-size: 14px;
padding:8px 10px;
color: #666;
background-color:#fff;
border:1px solid #dedede;
margin:3px 8px;
display: inline-block;
}
#blog-pager a:hover{
text-decoration:none;
color:#fff;
background:#00f;
}
#blog-pager .pagecurrent{
font-weight:bold;
color: #fff;
background:#00f;
}
#blog-pager .pages{border:none;}
【変更後】
/*    ページナビゲーション
------------------------------------------------ */
.blog-pager,#blog-pager{
background: none;
text-align: initial !important;
margin:2.3em 0;
}

.showpageNum a,.showpage a {
font-size: 14px;
padding:8px 10px;
color: #333;
background-color:#f4f7fb;
border:1px solid #ddd;
transition:0.3s;
margin:3px 8px;
display: inline-block;
}

.showpageNum a:hover,.showpage a:hover {
text-decoration:none;
color:#fff;
background:#42c3ea;
}

.showpageOf{
font-size: 14px;
padding:8px 10px;
color: #333;
background-color:#fff;
border:1px solid #ddd;
margin:3px 8px;
display: inline-block;
}

.showpagePoint {
font-size: 14px;
padding:8px 10px;
color: #fff;
background-color:#3366cc;
border:2px solid #ddd;
margin:3px 8px;
display: inline-block
}

#blog-pager .pages{border:none;}

【HTML本体①】

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

<b:includable id='page-navi'>
              <div class='blog-pager' id='blog-pager'>
<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ...    \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ...  \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>
  </div><div class='clear'/>
              </b:includable>

【HTML本体②】

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

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

<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
<data:adEnd/>

その<data:adEnd/>の真下に、以下のコードを追記挿入する。
<!-- 数字ナビと記事下ナビの分岐点 -->
       <b:if cond='data:blog.pageType == &quot;index&quot;'>
         <b:include name='page-navi'/>
         <b:else/>
         <b:if cond='data:blog.pageType == &quot;archive&quot;'>
           <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ページ枚の投稿表示件数(4件)を指定していますが、この数字はレイアウト画面の「ブログの投稿の設定」→「メインページの投稿数:」で指定されている数字に合わせる必要があります。

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

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

ちなみに、その「postperpage=4;」という記述の次の行に「numshowpage=4;」という記述がありますが、これはナビゲーションの数字を1ページあたり最大で何個表示するかを指定するものです。

が、これは少々、分かりづらいですね…

もう少し詳しく言うと、現在表示されているページ番号他にいくつ表示するか」という事らしいです。
よって、上記のコードでは「4」が指定してありますので、ナビゲーションの数字(表記)はトップページで「Page 1 of XXX(最終ページの数)」「1」「2」「3」「4」「5」…「XXX」「NEXT」となります。

この状態で仮に「NEXT」をクリックすると、次ページの表記は「Page 2 of XXX」「PREV」「1」「2」「3」「4」「5」…「XXX」「NEXT」となります。

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

2 件のコメント :

  1. はじめまして。こんにちは。
    ページナビゲーションの件でご相談があります。
    パソコンでは問題なく表示されるのですが、スマホだと例えば4ページ目を開いてもナビゲーションが『1』のまま変わりません。
    自分のブログだけかと思いましたが、こちらのブログも同じ状態でした。
    何か心当たりはございませんか?

    返信削除
    返信
    1. >夕渚さん

      お返事が遅くなってしまい、申し訳ありません。
      当該のページナビゲーションに関する記述を丸ごと差し替えましたので、そちらで試してみて下さい。

      ただし、閲覧する環境(AndroidやiOSのバージョンやChrome以外のブラウザでの閲覧)によっては、依然として同じ症状が出てしまう可能性もあります。
      その場合は、私が調べ得る範囲の中で随時修整していきますが、多少のお時間が掛かる事を予めご了承ください。

      削除