Bloggerテンプレート「BFB(Bootstrap版)」のカスタマイズ・ガジェット追加方法まとめ

本ページはプロモーションが含まれています

当ブログで配布しているBloggerの自作テンプレート「BFB(Bootstrap版)」のカスタマイズを紹介している記事です。カスタマイズに迷っている方の参考になれば幸いです。BFBでBloggerの公式ガジェットを利用すると表示崩れするので、この記事のカスタマイズをベースにアレンジしてみてください。



[ガジェット] プロフィールの作成

Bloggerのデフォルトのガジェットを利用すると表示崩れが起きてしまうので、「BFB」向けにちょっとアレンジをしています。

・プロフィールのサンプルイメージ



・挿入するコード

※黄色で塗りつぶした、画像のURL、名前、テキスト、Twitter URLは適宜変更してください。
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。


[ガジェット] 人気の投稿の作成

人気の投稿もBloggerのデフォルトのガジェットを利用すると表示崩れが起きてしまうので、「BFB」向けにちょっとアレンジをしています。

・人気の投稿のサンプルイメージ

・挿入するコード


※挿入箇所は「<!--サイドバー全体-->」以下の部分です。

[ガジェット] アーカイブの作成

アーカイブもBloggerの公式ガジェットをカスタマイズしてBootstrap仕様に変更しています。

・アーカイブサンプルイメージ

・挿入するコード

※日付の形式「YYYYMM」などはBloggerの管理画面から設定変更をお願いします。

[ガジェット] サイト内検索の作成

BFBを利用している場合、Blogger公式のガジェットではサイト内も表示崩れしていましたので、この記事で紹介しているカスタマイズを行いました。また見栄えが少し良くなるようにプレースホルダーの設定を合わせて行いました。



※デザインはBootstrapのFormを参考にしています。

・挿入するコード

※検索欄にデフォルトで入っている文言を変更したい場合は黄色塗りつぶしの部分の文言を変更してください
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。
 

[ガジェット] ナビゲーションバーの作成

ブログの上部にラベルや個別ページへのリンクを貼りたい方も多いのではないでしょうか。その場合、Bootstrapで用意されているnavbarが便利です。Bloggerテンプレート「BFB」にもデフォルトで実装しましたが、こちらの記事でもカスタマイズ方法を紹介します。

・ナビゲーションバー サンプル
■PC版



■SP版

※ハンバーガーメニューにリンクが折り畳まれています。

※デザインはBootstrapのnavbarを参考にしています。サイト内検索は以前の記事で実装したものをnavbar内に表示するように切り替えました。

・挿入するコード
■</body>の直前あたり

■header部分

※黄色塗りつぶしの部分がリンクになります。設置したいリンクに差し替えてください。

※最初のスクリプトを追加しておかないとSP版で表示したときにハンバーガーメニューが開閉しなくなってしまいますので、忘れずに追加をお願いします。(Bootstrap公式ページで紹介されているものです)


[ガジェット] ラベルの作成

Bloggerの公式ガジェットのラベルをBFB用にアレンジしたものです。デザインはBootstrapで提供されているものを参考に再現しています。

・ラベルサンプル


※デザインはBootstrapのbuttonを利用しています


・挿入するコード


※挿入箇所は「<!--サイドバー全体-->」以下の部分です。

[カスタマイズ] パンくずリストの作成

パンくずリストを導入したい場合は、以下のようにカスタマイズすることで表示させることができます。

・パンくずリストサンプル

※デザインはBootstrapのBreadcrumbを利用しています


・変更前のコード


・変更後のコード


Googleのリッチリザルトテストで動作確認したところ、パンくずリストとして問題なく認識されていました。SEO対策として導入するのも良いでしょう。


[カスタマイズ] Twitterカードを表示する

Twitterでブログのリンクを貼ると自動で記事のタイトルやキャプチャなどがカードで表示されると思います。配布しているテンプレート「BFB」もTwitterカード(OGP)に対応しましたので、カスタマイズ方法をこちらの記事で紹介したいと思います。

・挿入するコード

こちらのコードでは表示するページによって、内容を変化させています。
投稿記事のページの場合は、

  • ページタイプを「article」
  • アイキャッチ画像をTwitterカードに表示

TOPページと個別記事の場合は

  • ページタイプを「blog」
  • ブログTOPのURLとブログを名称

を表示するようにしています。

挿入箇所は<head>~</head>の中になります。
正しくTwitterカードが表示されているかは、以下のサイトで確認をすることができます。

[参考]

うまいこといくと以下のような画像が表示されます。



URLだけでなく、このようにカードタイプになると、Twitterで紹介される際によりページに訪れてもらいやすくなりますね。参考になれば幸いです。

[カスタマイズ] SNSボタンの作成

Bloggerテンプレート「BFB」にもSNSへシェアできるようにSNSシェアボタンを実装しました。といっても「Twitter」と「Facebook」の2つだけとシンプルですが。参考までにカスタマイズ方法を記事にしたいと思います。カスタマイズ内容を参考に、他のシェアボタン(pocketやLINE、はてなブックマークなど)を追加しても良いと思います。

・SNSシェアボタンサンプル

■PC版イメージ


■SP版イメージ

※デザインはBootstrapのbadgeを参考にしています。

※アイコンにはBootstrap iconsを利用しています。

・挿入するコード
以下のコードの挿入をお願いします。自分はSNSアイコンだけで1行取られるのがごちゃごちゃしていて嫌だったので、投稿日(日付)と横並びになるようにカスタマイズしました。


※挿入箇所は<!--投稿日の表示-->のエリアをまるっと上記のコードに置き換えてください。
※もしシェアしたいサービスを追加したい場合は<div>~</div>を1行コピーして追加してみてください。
※シェアボタンが右上にあるとしっくり来たのでそのように設定していますが、もし左上にしたい場合は、float-rightを削除してください。

[カスタマイズ] 見出しの装飾

配布しているテンプレート「BFB」はプレーンなBootstrapのデザインを使うように心がけています。それは、あとから利用者の方がカスタマイズしやすいように、独自のCSSを極力追加したくないためとなります。

しかし、個人的にBootstrapの見出しのデザインがあまり好きではありません。ほとんど素の見出しのため、特にスマホで見るとコンテンツの境界を見出しで区切ってる感がありません。なので、自分はこのブログではちょっとだけカスタマイズしましたので、その方法を紹介したいと思います。


・追加するCSS

・Memo
  • 「BFB」を利用している場合のカスタマイズ例です。
  • id="Blog0"の中にある、h2タグとh3タグを指定してカスタマイズ
  • そのためサイドバーのh2タグは特に変更していません。
  • 追加する場所は、<b:skin><![CDATA[ ]]></b:skin>の間です
  • 配色はBootstrapのprimaryとsuccessを参考にしました。

・Bloggerでの見出しの使い方
既にBloggerで記事を書いたことのある方には当たり前の内容かもしれませんが念の為。
エディタでいうと、見出し(h2)と小見出し(h3)を今回カスタマイズしました。主見出し(h1)や準見出し(h4)までは使わないので今回カスタマイズしませんでしたが、同じ要領でカスタマイズすることも可能です。



今回はこのブログで利用している見出しのカスタマイズをサンプルとして紹介しましたが、よりおしゃれな見出しに変更したい方もいるかと思います。その場合は以下のサイトのコードが非常に参考になります。

[リンク]

BFBに適用したい場合は、この記事のサンプルコードのように、#Blog0 を追加してあげるといい感じになると思います。デフォルトのままでも見出しとしてわかるのですが、より見出し感を強めたい場合はこのようなカスタマイズもあるよ、ということで参考になれば幸いです。

まとめ

BFBテンプレート利用者向けののBloggerガジェットのカスタマイズ方法を紹介しました。皆様の参考になれば幸いです。