※テンプレートを適用する前にかならずバックアップを取る、もしくはテスト用のダミーサイトでの利用をお願いします。思わぬ不具合が出る可能性がありますので、ご利用の際はご注意ください。
※既に何かしらのテンプレートを適用している方はガジェットがうまく書き換わらない可能性があります。一度テンプレートをリセットしてから「BFB」を適用してみてください。テンプレートの適用・リセット方法はこの記事で紹介します。
「BFB」をダウンロード
特徴①：CSSフレームワーク「Bootstrap」を採用
「BFB」というテンプレート名は「Bootstrap for Blogger」から来ています。ウェブサイトやブログを作ったことのある方なら一度は耳にしたことがあるかと思いますが、「Bootstrap」というCSSフレームワークを利用しています。
プログラミングの学習教材でも取り上げられる機会が多いと思いますので、Bloggerでも利用できるようにしたいと思いまして作成してみました。Bootstrapを採用したことで、Bootstrapのコンポーネントを簡単に利用できます。例えば以下のようなパーツです。
A simple primary alert with an example link. Give it a click if you like.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
これらのパーツはBootstrapのドキュメントからコピペするだけですので非常に簡単に利用することができます。手間を掛けずにそれなりにいい感じのページを作れます。
特徴②：表示の速さ
GoogleのPageSpeed Insightsで以下のスコアとなっています。
■パソコン（99点）
.png)
モバイル版ページはBloggerの仕様で「～?m=1」というURLにリダイレクトされる分、パソコンより若干スコアが低めに出ていますが、良好な結果が出ています。Googleのクローラが評価する項目にページの表示速度があるようですので、この点は強みだと思います。
特徴③：ミニマルなUI
高機能なテンプレートは自分にはまだ作れませんでした・・・。が、逆にそのためにすっきりしたUIになったと思います。特に文章に集中して読んでもらいたい方や、シンプルなテンプレートが好き、という方にはおすすめです。
もしこんな機能を追加したい、というものがあってもBootstrapなので簡単に追加できそうです。ナビバーとか、パンくずリストとかやってみたらいけそうでした。コメント機能は落としてしまいました（うまく実装できないため・・・）
特徴④：レスポンシブ対応
.png)
Bootstrapを利用しているので、当然といえば当然ですがレスポンシブ対応のテンプレートです。Googleのモバイルフレンドリーテストというのがあるのですが、問題なくモバイルフレンドリー評価をもらえました。
Googleは検索ではスマホ重視をしているようなので、この点はしっかりチェックをしました。
「BFB」をBloggerに適用する
そのままBloggerに適用するとガジェットの表示崩れが起きたりする場合がありました。そのため一度テーマをリセットした後、Bloggerに反映をお願いします。
[参考]
■手順1：テーマ ＞ プルダウン > HTMLを編集 に進み以下のコードを貼り付けて更新する
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<b:skin></b:skin>
</head>
<body>
<b:section id='mainSection'>
<b:widget id="Blog1" type="Blog">
<b:includable id="main">
</b:includable>
</b:widget>
</b:section>
</body>
</html>
※プレビューやブログを開くと真っ白なページが表示されます
■手順2：「BFB」をダウンロードする
■手順3：Bloggerに反映する
テーマのページの「カスタマイズ」の横のプルダウンを選択すると、このような画面が表示されるので「元に戻す」を選択し、先程ダウンロードした「xml」ファイルをアップロードします。
免責事項・ライセンスについて
自作テンプレート「BFB」を利用したことによるデータ消失や不具合について、当ブログは責任を負いません。保証等も対象外となりますので自己責任でご利用ください。MIT Licenseとなります。
「BFB」利用におけるデメリット
以下の機能は実装していません。申し訳ないですが、利用を検討されている方はご自身でのカスタマイズをお願いします。
【未実装の機能】
- コメント機能
- 目次機能
- 関連記事機能
まとめ
何かございましたらTwitterに連絡いただけると幸いです。Bloggerのテンプレート作成は初めてなものでして、まだまだ分からないことばかりで対応できない場合があると思いますがご容赦ください。
「こういうのやってみたら実装できたよ」とか「こういうふうにしたら良くなるよ」というものがありましたら教えていただけると嬉しいです（もし良ければテンプレートに反映したく・・・）
どうぞよろしくお願いします。
リリースノート
| # | 主な修正項目 | 日付 |
|---|---|---|
| 1.70 | アーカイブ追加、バグ修正、Github公開 | 2022/06/26 |
| 1.50 | SNSシェアボタンを追加 | 2021/02/13 |
| 1.40 | リッチリザルト「記事」に対応 | 2021/02/10 |
| 1.32 | タブレット向けにnavbarの挙動を調整 | 2021/02/09 |
| 1.31 | Bootstrap Icons追加 | 2021/02/09 |
| 1.30 | navbar対応・検索ウィジェット修正 | 2021/02/09 |
| 1.20 | OGP対応 | 2021/02/07 |
| 1.10 | YouTube埋め込み動画などのiframe要素がはみ出る問題を修正 | 2021/02/07 |
| 1.00 | 初版リリース | 2021/02/06 |