Bloggerテンプレート「Hello, world!（ハローワールド）」のサンプルページへようこそ！

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

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


特徴


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


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

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


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

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

レスポンシブ対応


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

最低限のSEO対策済み


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

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

選べる仕様


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

  1. ノーマル版
  2. ノーマル版（目次なし）
  3. テーマデザイナー対応版
  4. テーマデザイナー対応版（目次なし）

 ※サンプルサイトではノーマル版を使用しています

可読性の高いフォント


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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

どうですか？読みやすいでしょう？

主な機能


可変ヘッダーナビ


当テンプレートはデバイスのサイズによってヘッダーナビが変化する仕様になっています。ですので、デバイスサイズによるヘッダーナビの表示崩れが起きません。

代替サムネイル


当テンプレートでは、サムネイルなしの記事の場合でも、記事リスト、人気記事、Twitterカードに代替サムネイルが表示される仕様になっています。画像のソースは「Blogger labo」にアップロードしたものですが、お好きな画像URLに変更することも可能です（むしろ適用後にすぐに変えたほうが無難かもしれません）。

しかし、残念ながら最新記事ガジェットは仕様で代替サムネイルは非対応です。

ページトップボタン


当テンプレートにはページトップボタンが標準搭載されています。レスポンシブ対応になっており、デバイスのサイズによって形が変化します。

自動目次機能※


当テンプレートには自動目次機能が標準搭載されています。これは仕様によって有無を選ぶことができます。

目次表示の仕様は「moreタグがある かつ h2タグ（大見出し）がある場合のみ」に表示されるようになっているので、記事によって表示の有無をコントロールしやすくなっています。

記事中・記事下アドセンス貼り付け欄


当テンプレートには、個別記事ページの記事中・記事下にアドセンス広告を表示できるようにアドセンス表示欄を設けています。また、固定ページにも記事下にアドセンス表示欄を設けています。デフォルトではアドセンスコードは記述していないので、そのままでは何も表示されません。

記事中にアドセンスを入れる場合は、JavaScriptでmoreタグの下（目次がある場合は目次の下）に表示される仕様になっています。記事中アドセンス表示欄を使う場合、moreタグが必須になるので注意が必要です（moreタグなしだと記事下に表示される）。

SNSボタン（シェアボタン）


当テンプレートには、SNSボタン（シェアボタン）を標準搭載しています。種類は Facebook、Twitter、はてなブックマーク、Pocket、LINEです。

関連記事表示機能


当テンプレートには、関連記事表示機能が標準搭載されています。ラベルから関連する記事を判断して表示する仕様になっており、表示件数も最大99件まで表示できるようになっています。なお、最大表示件数はコードをいじることで変更することもできます。

番号付きページナビ


当テンプレートには、記事リストの下部に番号付きページナビが表示される仕様になっています。

最新記事ガジェット


当テンプレートには、Bloggerの機能に無い「画像付き最新記事を表示するガジェット」を標準搭載しています。レスポンシブにも対応しているので、デバイスの違いによって表示崩れは起きないようになっています。なお、不要な場合はレイアウト画面から削除することも可能です。

カスタム人気記事ガジェット


当テンプレートには、オリジナルの「人気記事ガジェット」を標準搭載しています。このガジェットは通常のガジェットのようにレイアウト画面から表示形式を変更することもできます。なお、レスポンシブにも対応しているので、デバイスの違いによって表示崩れは起きないようになっています。

カスタムアーカイブガジェット


当テンプレートには、クリックで開閉可能なアーカイブガジェットを標準搭載しています。

404ページ


当テンプレートでは、専用の404ページ（エラーページ）を表示する機能を標準搭載しています。エラーページとは存在しないURLにアクセスした時に表示されるページのことです。Bloggerにはカスタム404ページを設定する機能がありますが、当テンプレートを使う場合は不要です。

留意点


jQueryを使用しています


当テンプレートにはjQueryを利用した機能を搭載しています。ですので、スピードテストなんかで診断してみるとやや重い判定が出ることがあります。しかし、体感では遅いと感じるレベルではないので、よほどこだわりがなければ そのままお使いいただけるものと思われます。

WEBフォントを使用しています


当テンプレートでは一部WEBフォントを使用しています。WEBフォントは外部から読み込んで表示するタイプのフォントなので、スピードテストの最適化項目に引っかかることがあります。ですが、体感では遅いと感じるレベルではないので、よほどこだわりがなければ そのままお使いいただけるものと思われます。