Bloggerテンプレート「Vater2」に導入すべき機能


Vaster2を使いやすくするためのカスタマイズを紹介しています。機能追加がメインなので、デザインやバグ修正などは掲載していません。

Bloggerテンプレートは「Vaster2」ほぼ一択


Vaster2|レスポンシブ対応済みのblogger日本語テンプレート

 Googleのブログサービスである「Blogger」は、沢山の利点とともに、様々な欠点があります。そのひとつが「日本人向けテンプレートが少なすぎる」ということです。覚えてもらってナンボのブログ運営において、個性を出しづらいのは非常に辛いところ。

 しかし、地獄に仏とはまさにこのこと。日本人向けのテンプレートが1種類だけ存在します。それがトーマスイッチ様にて無償配布されている「Vaster2」です。見た目は非常にシンプルですが、SEO対策完備でレスポンシブデザイン。カスタマイズ性が高く、好き勝手にいじるだけでオリジナルなデザインが作れます。

 導入したら、早速自分好みのデザインにしよう!

 ……と言いたいところですが、Vaster2のポテンシャルを引き出すには、「デザインのカスタム」よりも「機能のカスタム」が必要になってきます。そもそもBlogger自体が、ブログオタク向けなんだよなぁ。

 この記事では、個人的に追加するべきだと思った機能をまとめています。

ブログカスタマイズの基本


 Vaster2は標準で様々な機能を搭載していますが、カスタマイズを前提に作られたデザインなので足りないものが多いです。当然、こちらで用意せざるを得ないものもあります。

 以下はVaster2の標準装備ではないものの、本気でブログ運営するには必要不可欠な機能です。

”固定トグルメニュー”でスマホ時の利便性を上げる


 Vaster2のグローバルメニューは便利なのですが、スマホで閲覧する時だと少々存在感が薄め。せっかくのレスポンシブデザインなのですから、携帯端末で表示された場合は、画面上に固定されるトグルメニューを設置しておきたいですね。

 上記のリンク先は、はてなブログ用に作られたトグルメニューですが、Bloggerでも利用できます。が、ちょっと記述を修正する必要があります。階層メニューをスマホでも表示するには、display属性を変更したうえで、スマホでhoverを有効にしなくてはいけなかったり、少し面倒。でも、やるだけの価値はあるでしょう。

”404ページ”を入れないと不親切


 404 Not Foundはどこで起きるか分からないもの。特にBloggerでは、何も入力せずに検索ボタンを押すとエラーページに飛んでしまいます。

 404時のテキストがないとユーザーは混乱しますし、せっかく訪問してくれたのに「不親切」ということで帰ってしまう恐れがあります。必ず入れておくようにしましょう。

”ページトップに戻るボタン”を設置


 ブログの上部にはメニューやガジェット(ブログパーツ)など、重要な要素が多く含まれています。記事ページであるのなら尚更、「目次」「公開日」「概要」「ソーシャルボタン」など、数えたらきりがありません。

 特にスマホでページトップに戻ろうとすると、指を何回も動かさないといけないので苦痛です。携帯端末を基準に、使いやすい位置に「トップに戻るボタン」を設置しましょう。

”ページナビ”を高機能に



「自分が今、何ページ目を見ているのか?」、もしくは「このブログはどれほどの記事数があるのか」が直感で理解できると、ユーザーに好感をもたれます。

 Vaster2のページナビは「前へ戻る」と「次に進む」しかありません。サイト内を巡回しやすくするために、高機能にしておきましょう。

記事ページを高性能化


 当然ですが、ブログ集客の肝は「高クオリティな記事を書くこと」です。

 良質な記事を書くには、ただ情報を提供しているだけでは不十分です。様々な機能をつけて、読者に対して親切になるよう工夫を凝らすことで、目に見えて利便性が向上します。

 以下は記事ページにあると、確実に役立つ機能です。

”目次”で記事の構成を分かりやすく


 目次は、記事の構成を分かりやすく伝えるためのものです。途中から読み直したい場合、あるいは興味のある部分だけ読めるようにしておくと便利です。

 長い文章を書いてしまうと、読者に負担をかけてしまいます。全文読んでもらえたらブロガー冥利に尽きますが、部分的にでも読まれる工夫をしておかないと、なかなかファンは増えません。

”最終更新日”で記事の信頼性を保つ


 公開日のほかに最終更新日があると、記事の信頼性が上がります。

 どんな情報であれ、記事というのは生物です。時間とともに「真実」だったものが「嘘」になってしまいます。信頼性を保つためには定期的な情報更新が必要なのですが、更新したことを伝えていなければ意味がありません。公開日が古いと、それだけでユーザーは逃げるので最終更新日は必須です。

”ソーシャルボタン”を記事上にも貼る


 Vaster2ではソーシャルボタンが標準装備されていますが、記事下にしかありません。そのボタンもスマホで見ると、記事上に置くには適していない大きさです。

 これから読もうとしているユーザーの邪魔にならないよう、記事上には小さなソーシャルボタンを置きましょう。

”LINEボタン”は優先度が高い


 TwitterやFacebookほどではないものの、LINEもSNSなので拡散性があります。日本では非常に多くのユーザーがいますし、絶対に入れましょう。余談ですが、Skypeやmixiも考慮に入れていいかもしれません。

 PocketやFeedlyといった拡散性の低いボタンは優先度も低いので、そこら辺と入れ替えるのがベターだと思います。

ブログパーツ


 ブログパーツは「集客」という観点で考えると、ひとつひとつの効力は薄いです。「プロフィール」「サイト内検索」「人気記事」「ラベルのリンク」「ブログアーカイブ」さえあれば、困ることはありません。特にスマホ時代の現在は、サイドバーにまで目を向ける読者は稀です。

 それでは「なぜ導入するのか?」と言いますと、「かゆいところに手が届く」からです。ブログのコンセプトによってピンポイントで欲しい機能があるかと思います。上手いこといけば巡回率アップに繋がります。

 とはいえ多すぎてもサイトデザインが悪く見えてしまうので、そこそこの数にしておきましょう。以下は、比較的汎用性の高いブログパーツを紹介しています。

”最新記事”で直帰率を下げる


 サイドバーに最新記事ガジェットを置いておくことで、記事ページでも「最近はどんな記事が投稿がされたのか」を確認できます。直帰する人へのアプローチにもなるので、巡回率アップを期待できるでしょう。

 ホーム画面では必要ないので、ifタグで記事ページのみ表示されるようにしておくのがベターです。

”ラベルサーチ”で綺麗なカテゴリ整理をする


 Bloggerではカテゴリがなく、代わりにラベルがあります。階層化ができなくて、標準ガジェットでは自由に並べ替えられないので、不満に感じているブロガーが多いです。ラベルを親カテゴリ・小カテゴリの要領で沢山つけると、かえって見づらくなってしまいます。

 要は、Bloggerのラベルシステムは「整理が大変」という問題を抱えているのです。それを解決するのが、自分が制作した「ラベルサーチ」というブログパーツ。記事数が多かったり、データベース系のブログを運営している人にオススメです。

”Twitterフォローボタン”でSNS強化


 集客率を上げるためには、SEOだけではなくSNSにも力を入れる必要があります。特にTwitterは大事で、フォロワーが多ければ多いほど、記事が拡散される機会が増えます。

 フォローボタンは記事下に大きく貼っておくか、プロフィール欄に適したサイズで貼ってきましょう。上記のリンク先は、プロフィール欄に丁度いいです。

”現在ページのQRコード”でスマホユーザーに配慮


 スマホでネットサーフィンする人のほうが多い時代。パソコンから訪問した人にも、スマホで読みたい場合があるかと思われます。実際のところ、どの程度効果があるか分かりませんが、「ないよりはマシ」だと思います。

 大抵の場合はパソコンで利用されるはずなので、サイドバーのなかでもかなり下の方に置いても問題ないでしょう。

ブログカスタマイズの三原則は「親切」「巡回」「拡散」


 様々な機能を紹介しました。しかしブログカスタマイズは、自分自身で足りないと思ったものを追加していくほうが楽しいと思うので、あえて紹介していない機能もあります。

 ブログをカスタマイズする上で重要なのは、以下の3点です。

・親切度の向上
・巡回率の向上
・拡散性の向上

 このブログ集客三原則は、カスタマイズだけではなく「記事作成」や「宣伝活動」にも大事になってきます。常に意識しましょう。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Vaster2を使いやすくするためのカスタマイズを紹介しています。機能追加がメインなので、デザインやバグ修正などは掲載していません。

コメントを投稿

[disqus][facebook]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.