Bloggerテンプレート「BFB（Bootstrap版）」のカスタマイズ・ガジェット追加方法まとめ
本ページはプロモーションが含まれています
当ブログで配布しているBloggerの自作テンプレート「BFB（Bootstrap版）」のカスタマイズを紹介している記事です。カスタマイズに迷っている方の参考になれば幸いです。BFBでBloggerの公式ガジェットを利用すると表示崩れするので、この記事のカスタマイズをベースにアレンジしてみてください。
※テンプレートを適用する前にかならずバックアップを取る、もしくはテスト用のダミーサイトでの利用をお願いします。思わぬ不具合が出る可能性がありますので、ご利用の際はご注意ください。余白等はこのテンプレートで使っているサンプルのため、ご利用環境に合わせて適宜調整をお願いします。
[ガジェット] プロフィールの作成
Bloggerのデフォルトのガジェットを利用すると表示崩れが起きてしまうので、「BFB」向けにちょっとアレンジをしています。
・プロフィールのサンプルイメージ
・挿入するコード
<!--サイドバー Author-->
<b:widget id='HTML1' locked='false' title='Author' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>
<img src="画像のURL" alt="" class="rounded-circle
mx-auto d-block" width="100" height="100" />
<p class="mt-3 mb-1 text-muted small text-center font-weight-bold">名前</p>
<p class="mb-2 text-muted small text-center">テキスト</p>
<div class="row">
<a href="Twitter URL" class="badge badge-primary
mb-3 mx-auto">Twitter</a>
</div>
</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='h5
mt-3'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
※黄色で塗りつぶした、画像のURL、名前、テキスト、Twitter URLは適宜変更してください。
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。
[ガジェット] 人気の投稿の作成
人気の投稿もBloggerのデフォルトのガジェットを利用すると表示崩れが起きてしまうので、「BFB」向けにちょっとアレンジをしています。
・人気の投稿のサンプルイメージ
・挿入するコード
<!--サイドバー 人気の投稿-->
<b:widget id='PopularPosts1'
locked='false' title='人気の投稿' type='PopularPosts'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if
cond='data:title != ""'><h2 class='h5
mt-3'><data:title/></h2></b:if>
<div
class='widget-content popular-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- 1.要約・サムネイルなしの場合 -->
<a
expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- 2.要約ありの場合 -->
<div class='item-title'><a
expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- 3.サムネイルあり or 4.サムネイル・要約ありの場合 -->
<div expr:class='data:showSnippets ? "item-content" :
"row m-2"'>
<b:if cond='data:post.featuredImage.isResizable or
data:post.thumbnail'>
<div class='col-3 p-0'>
<a expr:href='data:post.href'
target='_blank'>
<b:with
value='data:post.featuredImage.isResizable
? resizeImage(data:post.featuredImage, 72,
"1:1")
: data:post.thumbnail' var='image'>
<img
alt='' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='col-9'><a
expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div
class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。
[ガジェット] アーカイブの作成
アーカイブもBloggerの公式ガジェットをカスタマイズしてBootstrap仕様に変更しています。
・アーカイブサンプルイメージ
・挿入するコード
<b:widget id='BlogArchive1' locked='false' title='アーカイブ' type='BlogArchive' version='1'>
<b:widget-settings>
<b:widget-setting name='showStyle'>FLAT</b:widget-setting>
<b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
<b:widget-setting name='showWeekEnd'>true</b:widget-setting>
<b:widget-setting name='monthPattern'>MMMM yyyy</b:widget-setting>
<b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
<b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
<b:widget-setting name='chronological'>false</b:widget-setting>
<b:widget-setting name='showPosts'>false</b:widget-setting>
<b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<h2 class='h5 mt-3'><data:title/></h2>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId +
"_ArchiveList"'>
<b:include cond='data:this.style ==
"HIERARCHY"' name='hierarchy'/>
<b:include cond='data:this.style in
{"FLAT", "MENU"}' name='flat'/>
</div>
</div>
</div>
</b:includable>
<b:includable id='flat'>
<div class='dropdown d-grid'>
<button aria-expanded='false' class='btn btn-outline-secondary
btn-block text-left m-1' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'><i
class='bi bi-caret-down-fill'/>　アーカイブを選択</button>
<ul aria-labelledby='dropdownMenuButton1' class='dropdown-menu
overflow-auto w-100' style='height:300px;'>
<b:loop values='data:data' var='i'>
<li class='archivedate'><a
class='dropdown-item' expr:href='data:i.url'><data:i.name/><span
class='post-count'>(<data:i.post-count/>)</span></a></li>
</b:loop>
</ul>
</div>
</b:includable>
<b:includable id='hierarchy'>
<b:include data='data' name='interval'/>
</b:includable>
<b:includable id='interval' var='intervals'>
<ul class='hierarchy'>
<b:loop values='data:intervals' var='interval'>
<li class='archivedate'>
<div class='hierarchy-title'>
<a class='post-count-link'
expr:href='data:interval.url'>
<data:interval.name/>
<span
class='post-count'>
<data:interval.post-count/>
</span>
</a>
</div>
<div class='hierarchy-content'>
<b:include
cond='data:interval.data' data='interval.data' name='interval'/>
<b:include
cond='data:interval.posts' data='interval.posts' name='posts'/>
</div>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''>
<data:title/>
</option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'>
<data:i.name/>(<data:i.post-count/>)
</option>
</b:loop>
</select>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts hierarchy'>
<b:loop values='data:posts' var='post'>
<li>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass
== "expanded" ? " toggle-open" : "")'>
<b:if cond='data:interval.expclass ==
"expanded"'>
▼ 
<b:elseif
cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
</b:widget>
※日付の形式「YYYYMM」などはBloggerの管理画面から設定変更をお願いします。
[ガジェット] サイト内検索の作成
BFBを利用している場合、Blogger公式のガジェットではサイト内も表示崩れしていましたので、この記事で紹介しているカスタマイズを行いました。また見栄えが少し良くなるようにプレースホルダーの設定を合わせて行いました。
・挿入するコード
<!--サイドバー
サイト内検索-->
<b:widget
id='BlogSearch1' locked='false' title='このブログを検索' type='BlogSearch'>
<b:includable id='main'>
<div class='mb-3'>
<div expr:id='data:widget.instanceId + "_form"'>
<form class='form-inline' expr:action='data:blog.searchUrl'>
<b:attr cond='not data:view.isPreview' name='target'
value='_top'/>
<table cellpadding='0' cellspacing='0' class='col'>
<tbody>
<tr>
<td>
<input autocomplete='off' class='form-control w-100'
placeholder='このブログを検索' expr:value='data:view.isSearch ? data:view.search.query.escaped
: ""' name='q' size='10' title='search' type='text'/>
</td>
<td>
<input class='btn btn-primary
ml-2' expr:value='data:messages.search' title='search' type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</b:includable>
</b:widget>
※検索欄にデフォルトで入っている文言を変更したい場合は黄色塗りつぶしの部分の文言を変更してください
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。
[ガジェット] ナビゲーションバーの作成
ブログの上部にラベルや個別ページへのリンクを貼りたい方も多いのではないでしょうか。その場合、Bootstrapで用意されているnavbarが便利です。Bloggerテンプレート「BFB」にもデフォルトで実装しましたが、こちらの記事でもカスタマイズ方法を紹介します。
■PC版
※デザインはBootstrapのnavbarを参考にしています。サイト内検索は以前の記事で実装したものをnavbar内に表示するように切り替えました。
・挿入するコード
■</body>の直前あたり
<script crossorigin='anonymous'
integrity='sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj'
src='https://code.jquery.com/jquery-3.5.1.slim.min.js'></script>
<script crossorigin='anonymous'
integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo'
src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
<script crossorigin='anonymous'
integrity='sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI'
src='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js'></script>
■header部分
<header class='border-bottom py-1 mb-3'>
<nav class='navbar navbar-expand-xl navbar-light p-1'>
<a expr:href='data:blog.homepageUrl'
expr:title='data:blog.title'><h1 class='mb-0 h5
font-weight-bold'><data:blog.title/></h1></a>
<button aria-controls='navbarSupportedContent'
aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler'
data-target='#navbarSupportedContent' data-toggle='collapse' type='button'>
<span class='navbar-toggler-icon'/>
</button>
<div class='collapse navbar-collapse'
id='navbarSupportedContent'>
<ul class='navbar-nav mr-auto
ml-3'>
<li class='nav-item
active px-2'>
<a class='nav-link' href='#'>リンク1</a>
</li>
<li class='nav-item
active px-2'>
<a class='nav-link' href='#'>リンク2</a>
</li>
<li class='nav-item
active px-2'>
<a class='nav-link' href='#'>リンク3</a>
</li>
</ul>
<form class='form-inline my-1'
expr:action='data:blog.searchUrl'>
<b:attr cond='not
data:view.isPreview' name='target' value='_top'/>
<table cellpadding='0'
cellspacing='0' class='col'>
<tbody>
<tr>
<td>
<input autocomplete='off' class='form-control w-100' expr:value='data:view.isSearch ?
data:view.search.query.escaped : ""' name='q' placeholder='このブログを検索' size='20'
title='search' type='text'/>
</td>
<td>
<input class='btn btn-primary ml-2' expr:value='data:messages.search' title='search'
type='submit'/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</nav>
</header>
※黄色塗りつぶしの部分がリンクになります。設置したいリンクに差し替えてください。
※最初のスクリプトを追加しておかないとSP版で表示したときにハンバーガーメニューが開閉しなくなってしまいますので、忘れずに追加をお願いします。（Bootstrap公式ページで紹介されているものです）
[ガジェット] ラベルの作成
Bloggerの公式ガジェットのラベルをBFB用にアレンジしたものです。デザインはBootstrapで提供されているものを参考に再現しています。
・ラベルサンプル
※デザインはBootstrapのbuttonを利用しています
・挿入するコード
<!--サイドバー ラベル-->
<b:widget id='Label1' type='Label'>
<b:includable
id='main'>
<b:if
cond='data:title != ""'>
<h2 class='h5 mt-3'><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display +
"-label-widget-content"'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<a class='btn btn-outline-secondary btn-sm m-1'
expr:dir='data:blog.languageDirection'><data:label.name/></a>
<b:else/>
<a class='btn btn-outline-secondary btn-sm m-1'
expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>
※挿入箇所は「<!--サイドバー全体-->」以下の部分です。
[カスタマイズ] パンくずリストの作成
パンくずリストを導入したい場合は、以下のようにカスタマイズすることで表示させることができます。
・パンくずリストサンプル
※デザインはBootstrapのBreadcrumbを利用しています
・変更前のコード
<!--カテゴリの表示-->
<div class="col-12">
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a class="badge badge-pill badge-primary"
expr:href='data:label.url'
rel='tag'><data:label.name/></a>
<b:if cond='not data:label.isLast'></b:if>
</b:loop>
</b:if>
</div>
・変更後のコード
<!--パンくずリストの表示-->
<div class="col-12">
<ol class="breadcrumb small" itemscope='itemscope'
itemtype='http://schema.org/BreadcrumbList'>
<li class="breadcrumb-item active" itemprop='itemListElement'
itemscope='itemscope' itemtype='http://schema.org/ListItem'><a expr:href='data:blog.homepageUrl'
itemprop='item'><span itemprop='name'>HOME</span></a><meta itemprop="position"
content="1" /></li>
<li class="breadcrumb-item" itemprop='itemListElement' itemscope='itemscope'
itemtype='http://schema.org/ListItem'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'
itemprop='item'><span itemprop='name'><data:label.name/></span></a><meta
itemprop="position" content="2" />
<b:if cond='not
data:label.isLast'></b:if>
</b:loop>
</b:if></li>
<li class="breadcrumb-item active"><data:post.title/></li>
</ol>
</div>
Googleのリッチリザルトテストで動作確認したところ、パンくずリストとして問題なく認識されていました。SEO対策として導入するのも良いでしょう。
【注意点】複数のラベルを付与すると、表示崩れが起きたりリッチリザルトがうまく認識されない可能性があります。このカスタマイズをする際には基本的に1記事1ラベルとしてください。どうしても複数ラベルを使いたい方は、申し訳ないのですがCSS等で調整をお願いします。
[カスタマイズ] Twitterカードを表示する
Twitterでブログのリンクを貼ると自動で記事のタイトルやキャプチャなどがカードで表示されると思います。配布しているテンプレート「BFB」もTwitterカード（OGP）に対応しましたので、カスタマイズ方法をこちらの記事で紹介したいと思います。
・挿入するコード
<!-- OGP（SNS対応） -->
<meta name='twitter:card'
content='summary_large_image'/>
<!-- 投稿記事の場合 -->
<b:if cond='data:blog.pageType ==
"item"'>
<meta property='og:type'
content='article'/>
<meta property='og:url'
expr:content='data:blog.canonicalUrl'/>
<meta property='og:title'
expr:content='data:blog.pageName'/>
<meta property='og:image'
expr:content='data:blog.postImageUrl'/>
<!-- それ以外の場合 -->
<b:else/>
<meta property='og:type'
content='blog'/>
<meta property='og:url'
expr:content='data:blog.homepageUrl'/>
<meta property='og:title'
expr:content='data:blog.pageTitle'/>
</b:if>
こちらのコードでは表示するページによって、内容を変化させています。
投稿記事のページの場合は、
- ページタイプを「article」
- アイキャッチ画像をTwitterカードに表示
TOPページと個別記事の場合は
- ページタイプを「blog」
- ブログTOPのURLとブログを名称
を表示するようにしています。
挿入箇所は<head>～</head>の中になります。
正しくTwitterカードが表示されているかは、以下のサイトで確認をすることができます。
[参考]
うまいこといくと以下のような画像が表示されます。
URLだけでなく、このようにカードタイプになると、Twitterで紹介される際によりページに訪れてもらいやすくなりますね。参考になれば幸いです。
[カスタマイズ] SNSボタンの作成
Bloggerテンプレート「BFB」にもSNSへシェアできるようにSNSシェアボタンを実装しました。といっても「Twitter」と「Facebook」の２つだけとシンプルですが。参考までにカスタマイズ方法を記事にしたいと思います。カスタマイズ内容を参考に、他のシェアボタン（pocketやLINE、はてなブックマークなど）を追加しても良いと思います。
・SNSシェアボタンサンプル
■PC版イメージ
※デザインはBootstrapのbadgeを参考にしています。
※アイコンにはBootstrap iconsを利用しています。
・挿入するコード
以下のコードの挿入をお願いします。自分はSNSアイコンだけで1行取られるのがごちゃごちゃしていて嫌だったので、投稿日（日付）と横並びになるようにカスタマイズしました。
<!--投稿日の表示-->
<div class='col-12 small text-muted'>
<i class="bi bi-clock mr-1"></i><time
itemprop="datePublished" expr:datetime='data:post.timestampISO8601'><b:eval
expr='data:this.allBylineItems.timestamp.label + " " +
data:post.date'/></time>
<!--SNSシェアボタンの表示-->
<b:if cond='data:blog.pageType ==
"item"'>
<div class='m-1 text-center badge
position-relative float-right' style="background-color:#1877f2;"><a class='stretched-link
text-white' expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.canonicalUrl + "&t=" + data:post.title'
target='_blank'><i class="bi bi-facebook text-white
mr-2"></i>Share</a></div>
<div class='m-1 text-center badge
position-relative float-right' style="background-color:#1DA1F2;"><a class='stretched-link
text-white' expr:href='"https://twitter.com/intent/tweet?text=" +
data:post.title + " &url=" + data:post.canonicalUrl'
target='_blank'><i class="bi bi-twitter text-white
mr-2"></i>Tweet</a></div>
</b:if>
</div>
※挿入箇所は<!--投稿日の表示-->のエリアをまるっと上記のコードに置き換えてください。
※もしシェアしたいサービスを追加したい場合は<div>～</div>を1行コピーして追加してみてください。
※シェアボタンが右上にあるとしっくり来たのでそのように設定していますが、もし左上にしたい場合は、float-rightを削除してください。
[カスタマイズ] 見出しの装飾
配布しているテンプレート「BFB」はプレーンなBootstrapのデザインを使うように心がけています。それは、あとから利用者の方がカスタマイズしやすいように、独自のCSSを極力追加したくないためとなります。
しかし、個人的にBootstrapの見出しのデザインがあまり好きではありません。ほとんど素の見出しのため、特にスマホで見るとコンテンツの境界を見出しで区切ってる感がありません。なので、自分はこのブログではちょっとだけカスタマイズしましたので、その方法を紹介したいと思います。
・追加するCSS
#Blog0 h2{
margin:
20px 0px 20px;
font-size:
1.2rem;
font-weight: bold;
padding:
10px 10px 10px 15px;
border-left: 5px solid #007bff;
background: #f6f6f6;
}
#Blog0 h3{
margin:
20px 0px 20px;
font-size:
1.1rem;
font-weight: bold;
padding:
10px 10px 10px 15px;
border-left: 5px solid #28a745;
}
・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ガジェットのカスタマイズ方法を紹介しました。皆様の参考になれば幸いです。
