Bloggerユーザーにおすすめの厳選テンプレート3選

大抵の場合、特にBloggerユーザーが記事にする場合、「おすすめのテンプレート」系の記事は全くアテになりません(キッパリ)。

それらの記事は記事数を稼ぐ為だけに海外のテンプレート頒布サイトの新着順から5件程度を紹介している場合が大半であり、実際には自分で(短期間であれ)適用や運用をした事がない場合がほとんどです。

なぜ、そう言い切れるかと言いますと、実に単純に、自分で実際に適用してみた際のキャプチャー画像も無ければ、注意点やカスタマイズポイントの付記も無い場合が多いからです。

まぁ、Blogger自体が「海外製」のサービスであり、サードパーティー製のテンプレート群もまた、説明やアドバイスが英語である場合がほとんどですので、全ては読んでいられないという事だとは思いますが、それならば「おすすめ」などとは謳わずに、一つ一つのテンプレートを実際に適用した際の画像を一枚一枚示して、「コレは使えそうですね」「コレは日本語ブログには不向きでしょう」等と、自分の正直な感想を書いた方が記事としては遥かにフェアでしょう。

しかし!!

ワタクシの場合は、自分のブロガー生命を預けても良いと思うほどにGoogleのBloggerにホレ込んでいますし、多分、記事を一つ書く時間以上に、テンプレートのテストや調整に時間を掛けています。

なので、本日はワタクシがBloggerでのブログ運用を開始してから今日までの間に、実際に適用した、あるいはテストブログで試験運用した事があるテンプレートの中から厳選して3点を、メリットや注意点と共に紹介したいと思います。


Vaster2

≪現在、当ブログに適用中≫


必要最低限の機能に絞った専門ブログ向け日本語テンプレート

・公式サンプル→https://sanpururururur.blogspot.com/
・ダウンロード→http://toumaswitch.com/vaster2/

ご存知のように、サードパーティー製のBlogger用テンプレートといえば9割方は海外製であり、HTMLやCSSに詳しい、ごく一部のユーザーだけが日本語に最適化したテンプレートを自分用に細々と使っているだけでした。

しかし、初の「日本人による日本語の為のテンプレート」である前作「Vaster」が制作、頒布される事となり、日本に於けるBloggerユーザーの増加に大きく貢献しました。

そして、満を持してバージョンアップされたVaster2の登場によって、私達、Bloggerユーザーが書いた記事が検索上位に顔を出せるようになった事は、本当に喜ばしい限りです。

特徴

・必要最低限の機能に絞り込む事により、記事を書く事に専念できる。

海外製のテンプレートを見ると、派手な色使いや見出し(hタグ)の装飾はもちろんの事、スライダー式の「注目の記事」や「スクロール追従型ウィジェット」等、「動き」を強調した仕組みが施されている場合が多いですが、Vaster2では、それらの仕組みを一切用いずにシンプルにまとめられているので、適用後、すぐに記事を書く事に専念できます。

・ソースリストの注釈文に日本語が用いられているので、カスタムも容易。

日本語の注釈文

当然の事ながら、海外製のテンプレートの場合、ソースリスト内の注釈(説明)文も全て英語ですので、AdSenseのコードや外部製の機能パーツ(おまとめボタンやページナビゲーション等)を挿入したい場合、あるいは単にCSSを改変したい場合、一体、どこが目的の(あるいは適切な)場所なのかを判断するのが、本当に一苦労でした。

しかし、Vaster2ではCSSの各パートはもちろん、「ヘッダーここまで」「関連記事ここまで」のように、HTML本体の各パートにも日本語で注釈が入っていますので、AdSenseのコードや「おまとめボタン」等の外部パーツを挿入する際にも、適切な場所が容易に判断できます。

注意点

PCから閲覧した場合の表示速度は最速の部類に入りますが、スマートフォン画面ではjQueryを利用してページリストをトグルメニュー(ハンバーガーメニュー)化しており、それが表示速度を遅らせる原因になっています。
これを廃止したい場合は、以下の記事を参考にしてトグルメニューを通常のページリスト表示にして下さい。

Bloggerの無料日本語レスポンシブテンプレート「Vaster2」のカスタマイズ
【参照】ページスピードを早くするためにやったこと→スマホ表示時のメニューをカスタマイズ
http://www.memorou.com/2016/06/bloggervaster2.html#moku14

Simplify 2

≪現在、雑記ブログに適用中≫
https://mamologue.blogspot.com/


あらゆるジャンルに対応可能なオールラウンダー

・公式サンプル→https://cokeskitti.blogspot.com/
・ダウンロード→https://gooyaabitemplates.com/simplify-2-blogger-template/

海外製のBlogger用テンプレートにありがちなのが、せっかくの表示の速さを、凝ったCSSや重たいJavascriptで殺してしまっているケース。
「Simple〇〇〇」などとは謳われていても、実際にはちっともシンプルではないケースの方が多いので、困ったものです(´∀`;)

ですが、執念深く探していれば見つかるもので、2017年4月現在で入手可能なテンプレートの中で、前出のVaster2と比べても遜色のない表示速度とユーザビリティーを唯一誇るのが、このSimplify2です。

特徴

・緻密に計算された「はみ出さない」ラッパー群

あらゆるデバイスで限り無く同様のデザインを適用する事が前提のレスポンシブデザインですが、「言うは易し、行うは難し」で、特にスマートフォンで表示した場合に記事中の画像が微妙にハミ出したり、ボタン群の表示位置が崩れたり、文字と文字が重なったり…と、まだまだ完璧には対応できていないテンプレートが大半です。

そんな現状の中で、このSimplify2は画像、動画、引用枠、ボタン群、テーブル等々、あらゆるコンテンツに「はみ出し」が認められません。
一日の訪問者の半数以上がスマートフォンから閲覧しているという現実を鑑みた時、スマートフォン表示時の「みっともなさ」が招くイメージダウンは致命的です。

かく言うワタクシ自身、「Responsinator」を利用して各デバイスからの見え方をチェックしてから投稿する事を徹底するまでは、記事下のAdSenceが平気でハミ出していましたorz

この辺り、ちょっとイメージが掴みにくくて説明が難しい点ですが…

AdSenseの「レスポンシブユニット」とは、あくまでもHTML文で定義された「親要素」で指定された幅(いわゆるwrapper)に対して表示幅を合わせるものであり、必ずしも各デバイスの「見かけ上の幅」に対応するものではありません。

CSS文の「@media screen」で「word-wrap: break-word;」等の設定をしていれば、一見するとレスポンシブ対応しているように見えますが、それはあくまでも文章(テキスト)に対してのみ効くものであり、画像は画像で別途「img {max-width: 〇〇〇px;}」等の指定をしてやらないとハミ出してしまう場合が多いので、新しいテンプレートを適用した際には注意が必要です。

・数字のページナビゲーションが最初から実装済み

表示速度の速さでは他の追随を許さないBloggerですが、その反面、トップページ(あるいは各記事ページ)下のナビゲーション類がダセぇ簡易的なのが唯一の泣き所です。

Vaster2を導入した件」でも詳しく述べましたが、Bloggerで作成したブログに後から数字のページナビゲーションを導入するのは、本ッッッ当に一苦労なんです…
ここで挫折して、他のブログサービスに移ってしまうユーザーが多い事は容易に推し測れます(Google神よ、読んでいますか?)。

その点、このSimplify2は数字のページナビゲーションと、各記事下の「タイトルが反映されるnext/prevナビゲーション」が最初から実装されていますので、本当に楽です(涙)

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

Simplify2_2
タイトルが反映されるnext/prevナビゲーション(PC表示)

Simplify2_3
タイトルが反映されるnext/prev
ナビゲーション(スマートフォン表示)

注意点

海外製のテンプレートの中では、これ以上のものは無いというぐらいに良く出来た子(?)ですが、使用用途や使い勝手よっては削除した方がよい機能があります。

それは「スクロール追従型ウィジェット」と「Lazy Load」です。

(注)Bloggerのレイアウト管理画面では「ウィジェット」が「ガジェット」と表記されていますが、ここでは両者を全く同じ意味として扱います。

このSimplify2は、サイドバーのウィジェット類が「固定用」と「スクロール追従用」の二つに分けられています。

Simplify2_4

Simplify2_5
「top」と書かれている方が固定用。

欧米のサイトを観ると、このスクロール追従型ウィジェットが今や当然のように採り入れられていますが、日本人の視覚的習慣には合っていないらしく「ウゼぇ!!」と言われる事の方が大半ですので、これを利用しない場合には「sidebartop」と書かれている方にのみウィジェットを追加して下さい。

次に「Lazy Load」と呼ばれる機能についてですが、通常、ブラウザがウェブページを表示する際には、HTMLソースを上から順番に読み込んでいき、ソース最後の</html>までを読み込んで表示完了となるワケですが、当然の事ながら、画像はテキストに比べてデータ量が多いので表示に時間が掛かります。

ニュースサイト等を閲覧している時に「画面に見えている範囲はちゃんと表示されているのに、なぜか読み込みが完了していない」という経験をされた事が皆さんにもあると思いますが、これは通信速度の問題だけではありません。
画像の量が多い場合、画面に見えている範囲内は既に表示されていても、画面外(スクロールさせる前)の「下の方」のデータが未だ読み込み中の為に起こる現象です。

それを回避する為に、下の方の画像データの読み込みを遅延させてテキストデータだけを先に読み込んでおき、画面がスクロールされて画像を表示すべき位置まで来た際に、改めて画像データを読み込む…それがLazy Loadの機能です。

小粋空間:Lazy Load のサンプルページ
http://www.koikikukan.com/samples/20121121/

文字通りの「訪問者目線」に立った有益な機能ですし、登場当初は多くのサイトが導入しましたが、暫くしてから問題点も発覚するようになりました。

Lazy LoadはSEOに不向き? Lazy Loadで表示する画像をGooglebotは認識できないことがある
https://www.suzukikenichi.com/blog/lazy-load-might-be-bad-for-seo/

これは、判断が分かれるところだとは思います。

元から画像の少ないテキスト主体のサイト(創作小説等)であれば、画像検索からの流入など最初から期待していないので削除してしまっても問題ないとは思いますが、逆に写真・カメラ関係や時事・ニュース系サイトの場合、画像がGoogleにキャッシュされないのは死活問題であると言えます。

従って、このLazy Loadを削除するか否かの判断は、ご自身の需要や運営方針を再度熟考してからにして下さい。

【Lazy Loadを削除する場合】
「テーマ」→「HTMLの編集」から「lazyload」で検索し、2520行付近(ソース最終行付近)の以下の記述を全て削除して下さい。

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(中略)
//]]>
</script>
</b:if>

Tokyo




表示領域を広く取って見やすさを追求

・公式サンプル→http://tokyo-sample-site.blogspot.com/
・ダウンロード→http://qooq.dododori.com/2016/10/tokyo-download.html

特徴

あくまでもPCから閲覧した場合ですが、メインカラムが1023px、サイドバーが530pxと、共に横幅を大きく設定する事によって徹底的に「見やすさ」を追求しています。

個人的には横幅と行間、共に狭い学術論文のようなページ構成が好きなのですが、例えば料理やアクセサリーなどの作成手順の紹介、あるいは旅行日記などのように、一つの記事に必ず複数枚の画像を用意して順序良く並べる事が前提の場合、あるいは詩的な表現を多用して「雰囲気」を演出したい場合などは、このTokyoように横幅と行間、共に広い方が使い勝手が良いかと思われます。

どちらかといえば、女性ブロガー向けのテンプレートかもしれません。

注意点

このテンプレートには、一つだけ重大なバグがあります(2017年4月4日現在)。
もう一度、サンプルページをよく御覧になって下さい。
トップ(INDEX)ページの各記事のサムネイル画像が、とても粗く表示されているのがお分かり頂けるかと思います。

サムネイル画像が粗い

これは、正確にはバグというよりも、本年の初め頃にBlogger(Google)側が独自タグによるサムネイル画像の抽出方法を予告無く変更した為であり、海外のサードパーティーのテンプレート制作者も、この変更への対応に追われる事となりました。
(Vaster2は最初から独自の抽出方法を用いていたので、このトラブルとは無縁でした)

以下に、サムネイル画像の抽出方法を変更するコードを載せておきますので、制作者である「くうく堂」様による正式なデバッグやバージョンアップが発表されるまでは、暫定的にこちらをお使いください。
なお、変更前に必ずバックアップを取る事をお忘れなく!

①「テーマ」→「HTMLの編集」を開く。
②ソースリスト内部にポインターを移動させてシングルクリックし、カーソルが現れたら「Ctrl+F」を押して検索窓を開く。
③検索窓に「row20」という文字列を打ち込んで検索する。
④<b:includable id='post' var='post'>
の配下に記述されている、
<div class='row20'>
という文字列を確認する。
⑤その次の行の、
<img expr:src='data:post.thumbnailUrl'/>
という文字列を削除する。


⑥削除した場所に、以下のコードを追記挿入して保存する。
<script type='text/javascript'>
//<![CDATA[
function thumb_size(e,t){var n=166;var r=166;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}
//]]>
</script>
<a expr:href='data:post.url'>
<script type='text/javascript'>
document.write(thumb_size(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script>
</a>


【注意】テーマの編集画面はタグの位置関係を把握しやすくする為に、あえて行頭に空白を挿入するのが通例ですが、全て左端に詰めて記述しても何も問題はありません。

これで、ひとまずは正常にサムネイルが表示されます。
【広告】

0 件のコメント :

コメントを投稿