Blogger の自作ブログテーマの雛形「Blogger Base Theme」を制作しました

「Bloggerブロガー」は Google が運営する無料ブログサービスです。

日本での知名度は低いですが、他の日本の大手無料ブログサービスにはない優れたメリットを持っています。

Blogger は全機能が無料であり、強制広告が一切ありません。そして、ブログデザインのカスタマイズの自由度が非常に高く、根本的なデザイン変更がほぼ何でもできます。

このため、ブログテーマ（ブログテンプレート）の自作が可能であり、サードパーティー（非公式）のブログテーマが多数配布されています。

背景: 日本語対応が乏しくブログテーマの自作が難しい

しかし、Blogger のサードパーティーのブログテーマは殆ど外国製であり、日本語対応のものはまだまだ少ないです。

さらに、ブログテーマの自作には高度な技術的知識が必要であり、日本語の情報もまだ十分あるとは言えないのが現状です。

Blogger の自作テーマの雛形を制作

そこで、装飾を削ぎ落としできるだけ単純化した Blogger のブログテーマ「Bloggerブロガー Baseベース Themeテーマ」を制作しました。

このブログテーマを雛形としてカスタマイズして、Blogger のブログテーマの自作に使ってもらい、自作のハードルが少しでも下がるのを期待しています。

このブログテーマは、このまま使うのではなく、カスタマイズして使うのが前提のため、カスタマイズには BloggerXML、HTML、CSS、JavaScript の知識がある程度必要です。

そのため、デザインは非常に殺風景でダサいシンプルです。

よって、おしゃれなブログテーマやかっこいいブログテーマが欲しい方には不向きであり、「Blogger テンプレート 日本語」などと検索して他のブログテーマを探すのをお勧めします。

仕様と機能

このブログテーマはレイアウトを単純化するため 1 カラムにしています。ヘッダー、メインコンテンツ、フッターの 3 要素でできており、サイドバーやサイドメニューはありません。

このブログテーマのデモサイトはこちらです。

管理画面の「レイアウト」でウィジェット一覧が表示されますが、全ウィジェットのコードを独自にカスタマイズしているため、ウィジェットを削除すると復元不能になります。

「レイアウト」では各ウィジェット名を変更しても問題ありません。

ですが、カテゴリーやアーカイブ ウィジェットでは、ウィジェット名以外の設定変更を行うと、正常に機能しなくなる場合があるのでご注意下さい。

レイアウト

このブログテーマの全体のレイアウトです。ページ見出し、コメント欄、ブログページャーは管理画面の「レイアウト」には表示されません。

ファビコン

ファビコンは以下のコード (20 行目) で設定されています。このファビコンは iOS Safari や Android 版 Chrome などのモバイルブラウザのお気に入りのアイコンにも使われます。

青マーカーの箇所がファビコンの画像の URL です。この箇所にあなたが指定したい画像の URL を入れて下さい。

公式テーマ（Contempo や Soho など）では、ファビコンは管理画面の「設定」で設定できますが、サイズの上限が 48×48 px に制限されており、モバイルブラウザのお気に入りのアイコンに不向きなため、このような独自仕様にしています。

もし管理画面の「設定」からファビコンを変更できるようにしたい場合、
「<link rel='icon' expr:href='resizeImage(data:skin.vars.favicon, 96, "1:1")'/>」(50 行目)
を
「<link rel='icon' expr:href='data:blog.homepageUrl.canonical + "favicon.ico"'/>」
に変更して下さい。

1 ページ当たりの記事数

1 ページに表示される記事数は、トップページと記事一覧ページの場合は、管理画面の「設定」で設定・変更します。

ですが、カテゴリーページと検索結果ページの場合は以下のコード（25 行目）で設定されています。

青マーカーの箇所が記事数で、デフォルトは 10 です。1～20 の範囲の整数を設定できます。

画像のない投稿のサムネイル

画像のない投稿のサムネイル（代替画像）は以下のコード（32 行目）で設定されています。

青マーカーの箇所が代替画像 URL です。変更したい場合、この箇所にあなたが指定したい画像の URL を入れて下さい。

CSS と JavaScript

CSS と JavaScript はなるべくコードをひとまとめにして、かつ、軽量化のため BloggerXML の条件分岐で不要なコードをなるべく出力しないようにしています。

CSS はブログとしての見た目を保つ最低限の記述に留めています。

ヘッダー

トップページでは、ブログ名、ブログの説明文、背景画像が表示され、他のページでは、トップページへのリンク付きのブログ名が表示されます。

ブログの説明文は、管理画面の「レイアウト」の「Header1」から設定・変更できます。

一方、背景画像は「レイアウト」ではなく、以下のコード（26 行目）で設定されています。

背景画像はトップページや記事一覧の OGP のサムネイルにも流用されます。

青マーカーの箇所が背景画像の URL です。この箇所にあなたが指定したい画像の URL を入れて下さい。

背景画像を「レイアウト」で設定できるようにするには、
「<img class='top-img no-under-gap' expr:src='resizeImage(data:skin.vars.top_img_url, 1600, "3:2")'/>」(483 行目)
を
<img class='top-img no-under-gap' expr:src='resizeImage(data:image, 1600, "3:2")'/>」
に変更して下さい。

ページ番号

カテゴリーページ、記事一覧ページ、検索結果ページでは、1 ページに表示できる記事の上限を超えると、次のページとそのリンクが生成されます。

Blogger にはページ番号を表示する機能が存在しません。

そこで、2 ページ目以降のページの見出しに「～～: ページ N」の形でページ番号を表示する独自仕様にしています。

URL の最後に「#p-N」(N はページ番号) の部分を独自に追加しており、JavaScript でページ番号を判断する仕組みです。

コメント欄

記事のカテゴリー（ラベル）一覧が本文の後にあり、その後がコメント欄です。

コメント欄のコードは完全な独自仕様のため、公式テーマとは全く異なります。

公式テーマでは、コメント投稿者がアイコン未設定の場合、正方形の透明画像または Blogger のロゴ画像になり、デザイン性がイマイチだと感じます。

そこで、アイコン画像未設定のコメント投稿者に独自の画像（代替画像）を表示する仕様にしています。

デフォルトでは上の画像が代替画像になっています。代替画像は以下のコード（38 行目）で設定されています。

青マーカーの箇所が代替画像 URL です。変更したい場合、この箇所にあなたが指定したい画像の URL を入れて下さい。

ブログページャー

公式テーマのブログページャーは、記事一覧ページと投稿ページでは普通に前後ページの移動のリンクとして機能しますが、カテゴリーページでは「前の記事」のリンク先が 1 ページ目になり、アーカイブページでは「次の記事」のリンク先が記事一覧ページになってしまい、厄介だと感じます。

そこで、カテゴリーページの「前の記事」のリンクの文言を「ページ 1」にしています（上の画像の左の赤丸）。

アーカイブページのページャーは、「アーカイブ」ウィジェットのコードを改変して、年月の文言とリンクが表示されるページャー（上の画像の右の赤丸）に作り替えました。

アーカイブページでは元のページャーは出力されないようにしています。

カテゴリーページのバグ修正

Blogger のブログのカテゴリーページには、リンク先に記事リンクが存在しないのに「前の記事」のリンクが表示されるバグがあります。

なので、JavaScript でこの不要なリンクを検知して自動削除する仕様にしています。

フッター

各ウィジェットのタイトルは、公式テーマだと「<b:include name="widget-title"/>」のコードで出力されていますが、余分な h3 タグも一緒に出力されます。

そこで、余分なコードを除くため、ウィジェットのタイトルを「<data:title/>」で出力しています。

ダウンロード

特に理由が無ければ最新版のダウンロードを推奨します。旧バージョンは仕様が異なるため非推奨とします。

「コンピューターに損害を与える可能性があります」との警告が表示されますが、「このままダウンロード」を押して下さい。

• バージョン 20240720

ライセンス

このブログテーマのライセンスは CC0 とします。

よってブログテーマのカスタマイズ、商用利用、二次配布などあらゆる利用が可能で、事前連絡やクレジット表記は不要です。