Blogger Labo：Bloggerの日本語テンプレート「Hello, world!」が完成しました！

当サイトオリジナルのBloggerテンプレート「Hello, world!（ハローワールド）」がついに完成しました！

このテンプレートは、カスタマイズを前提にした日本語対応の国産テンプレートです。ソースコードにいちいち説明がついているので、カスタマイズ初心者でもコードの意味合いが分かりやすくなっていると思います。また、カスタマイズなんてしない という人のためにも、そのままで十分使える機能を備えた造りになっています。

ちなみに「Hello, world!」とは プログラミング言語を学習する際に最初に画面に表示させる文字列としてよく使われるもので、自分の場合は自作テンプレートを製作中に仮タイトルとして使っていたのですが、テンプレートの処女作ということでそのまま使うことにしました。長いので「ハロワ」とでも略してください（職安っぽいけど）。


サンプルページ


Blogger Labo：Bloggerの日本語テンプレート「Hello, world!」が完成しました！


サイトのデザインとテンプレートの詳細は上記のページでご覧いただけます。

テンプレートの特徴


日本語説明付きのわかりやすいソースコード


当テンプレートのソースコードには いちいちコメント が付いています。ですので、CSSの編集は比較的分かりやすくなっていると思います。また、XHTML（テンプレートタグ）にもコメントを付けているので、コードのまとまりが見やすく、プログラムの追加や削除をしやすくなっています。ただし、ブラウザからソースコードを見られるとダサいかもしれません。

カスタマイズ性の高いソースコード


当テンプレートでは、カスタマイズ性を重視してコントロールしやすい仕様にしています。

・ページタイプの条件分岐をSwitch文で簡略化
・記事リスト、最新記事、人気記事なんかの要約文の長さをコントロールできる
・画像サイズをCSSでコントロール可能

レスポンシブ対応


当テンプレートは、PC、iPad Pro、iPad mini、スマホの4サイズに対応したレスポンシブ用のCSSを当てています。なので、基本的には表示デバイスの違いによってデザイン崩れは出にくいものと思われます。また、ヘッダーナビは画面の小さいデバイスの場合は対応したものに変化する仕様になっています。

最低限のSEO対策済み


当テンプレートは以下のSEO対策をしています。

・OGP設定（Twitterカード）
・パンくずリスト
・schema.orgのマークアップ

選べる仕様


当テンプレートは以下の仕様が選べます。

・ノーマル版
・ノーマル版（目次なし）
・テーマデザイナー対応版
・テーマデザイナー対応版（目次なし）

可読性の高いフォント


当テンプレートは可読性を重視したフォントを使用しています。

テンプレートの主な機能


・可変ヘッダーナビ： ヘッダーナビがデバイスのサイズに合わせて変化します
・代替サムネイル： 画像なし記事でも記事リストと人気記事に自動で代替サムネイルが挿入されます
・ページトップボタン： 常に表示させるページトップに移動するボタンです
・自動目次機能（※選択可能）： 記事の見出しから自動で目次が生成されます
→ 設置方法：「目次・アドセンスを設定する方法」
・記事中・記事下アドセンス貼り付け欄： 投稿ページの記事内にアドセンス欄を設けてあります
→ 設置方法：「記事中・記事下に設置」「ガジェットに設置」
・SNSボタン： Facebook、Twitter、はてなブックマーク、Pocket、LINEボタンを標準搭載しています
・関連記事表示機能： ラベルから関連する記事を表示させる機能です
・番号付きページナビ： 記事リストの下部には番号付きページナビが表示されます
・最新記事ガジェット： Bloggerには無い最新記事ガジェットです
・カスタム人気記事ガジェット： オリジナルの人気記事ガジェットです。
・カスタムアーカイブガジェット： 開閉可能のブログアーカイブです
・404ページ： 404ページを標準搭載しているので、カスタム設定不要です

ダウンロードと適用方法


ダウンロード


【カスタマイズする人向け】

・「Hello, world!」ノーマル版
・「Hello, world!」ノーマル版（目次なし）

【カスタマイズしない人向け】

・「Hello, world!」テーマデザイナー対応版
・「Hello, world!」テーマデザイナー対応版（目次なし）

上記のリンクからzip形式でテンプレートファイルをダウンロードできます。

適用方法


Bloggerの管理画面の「テーマ」から以下のような操作をしてください。

【旧 管理画面】

・「バックアップ/復元」ボタンからテーマをダウンロード（現在の設定のバックアップのため）
・「バックアップ/復元」ボタンからDLしたテンプレートファイルをアップロード

【新 管理画面】

・「カスタマイズ」タブから「バックアップ」を選択してダウンロード（現在の設定のバックアップのため）
・「カスタマイズ」タブから「元に戻す」を選択してDLしたテンプレートファイルをアップロード

使用の注意点


当テンプレートの見出しにはmargin（余白）を設定していません。現在利用中のテンプレートの見出し余白に依存した記事構成をしている場合、デザインが崩れる可能性があります。そうした場合はテンプレートを編集して適切なmarginを設定してください。

また、代替サムネイルは当ブログにアップしたファイルを使用しています。そのままでも使うことは可能ですが、当ブログが閉鎖した場合などに非表示になってしまう可能性がありますので、リンクから画像をダウンロードして自分のブログにアップロードしたURLに書き換えることをおすすめします。なお、テンプレート内には「<!-- 自分の画像URLに変更する -->」とコメントアウトしているので、対応箇所のURLを自身のサイトの画像URLに書き換えてください（計4箇所）。

【画像リンク】

・画像なしサムネイル
・SNS用サムネイル


導入後の疑問点について


thumbnail
【自作テンプレート】よくある質問まとめ
当サイトで配布中のBloggerテンプレートに関するカスタマイズや補足情報についてのＱ&Ａをまとめました。
https://blogger-learning-rab.blogspot.com/2021/02/q-and-a.html

テンプレートに関する「よくある質問」の答えは、上記の記事にてまとめています。

利用規約など


無料で個人利用可、販売、再配布不可


当テンプレートは無料でお使いいただけます。個人利用でのカスタマイズは推奨です。
ただし、当テンプレートおよび当テンプレートを改変したものを販売・再配布することは基本的に禁止します。

紹介される方へのお願い


当テンプレートを紹介してくれる方は当ページへのリンクを添付することをお願いします（カスタマイズ記事の場合も同様です）。また、ファイルへの直リンクはご遠慮ください。よろしくお願いします。

バグ修正について


バグ修正についてはリリース後しばらくは対応するつもりなので、発見された場合はコメント欄にてお知らせください。カスタマイズに関する質問もどうようにコメント欄に書いてもらえれば対応するかもしれません。

【修正履歴】

・20/11/10：OGP設定の不具合修正
・20/09/23：コメントアップグレードの不具合修正
・20/09/22：コメント欄をアップグレード
・20/09/21：Twitterカードの画像表示不具合を修正
・20/09/07：新管理画面のエディタに対応させるため、記事部分の<p>タグのmarginを0に変更
・20/09/07：記事から画像がオーバーフローしないようにCSSを変更

詳しくは「修正履歴」を参照