Blogger テンプレート - Woodmag

Google Blogger テンプレートの選択は簡単ではないです。最近、テンプレートを差し替えたブログがあります。

茶色系のテンプレートを探していたので、最初は Brownline を適用してみました。しかし、致命的な問題が。

長いエントリー記事のタイトルが収まらない

どうもこの Brownline というテンプレートは短めのエントリー記事タイトル（それこそ１単語のような）であれば綺麗に収まるんですが、長いセンテンスのタイトルにすると醜く改行されてしまいます。

単に改行されるだけなら別に問題ないんですが、改行幅が広いこと広いこと。しかもタイトルのスペースに収まらずに、記事本文の位置に重なって表示（オーバーフロー）されてしまう。

タイトルの文字サイズ（font-size）を小さくして、改行幅（line-height）を修正すれば直ったんでしょうけど、感覚的に時間が掛かりそうな嫌な雰囲気があったので Brownline は止めにしました。

デザインが気に入ったテンプレートでも、実際にアップロードしてみると色々な問題が出てくるものです。何もカスタマイズしないで、そのまま使えればラッキー、手を加えないと納得できるスタイルにならないケースが意外と多いように思います。

茶系のBloggerテンプレート Woodmag

Brownline の替わりに茶色系で探した結果、Woodmag （上のスクリーンショット）を発見。このテンプレートを適用してみました。

これはなかなか良くできたテンプレートです。

デザインや HTML をざっと見ただけですが、以下のような小粋なカスタマイズが施されています。

• ヘッダーのサブメニュー
  ヘッダーの Nav メニューの他に、ドロップダウン形式のサブメニューがあります。


• 「続きを読む」標準装備
  Bloggerに「続きを読む」を追加するとは別のやり方で続きを読むを実装しています。


• エントリー記事の画像がサムネイルで表示される
  各エントリー記事中に挿入した最初の画像が、トップページの記事一覧では150px×150px のサムネイルで表示されます。
  ワンポイントで必ず画像を挿入するブログや、写真を多用するビジュアル系ブログ向きです。


• トップページのエントリー記事は RSS でサマリーを取得している？
  トップページに表示されている個々のエントリー記事は、一定文字数で切られています。これはもしかすると RSS からなのか、エントリー記事そのものなのか、文字数をカウントして表示しています。
  表示するテキストの文字数を制御する仕組み（JavaScriptなど）が使われている可能性があり、興味シンシンです。


• フッターにガジェットスペースが３カラム
  海外の Tech Blog などで見かけるフッターにガジェットが追加されているパターン。このフッタースペースに最新記事一覧やコメント一覧、Twitter のつぶやき表示用のブログツールなどが貼り付けられています。

ざっと見ただけですが、それぞれのツールというかモジュールは他のテンプレートに是非適用してみたい小物ばかり。少し時間を掛けて、この Woodmag テンプレートで使われている小技を分解しながら勉強してみます。
個々のモジュールの仕組みや他ブログテンプレートへの適用方法などは、別記事で個別にご紹介できればと思います。

冒頭に申しましたように、だからといって Woodmag テンプレートがそのままノンカスタマイズで使えるかというと実はそうでもなく、リンク色（a, a:hover, a:visited など）の表示がちょっと変だったり、「続きを読む」が既知のパターンじゃなかったので AdSenseタグの挿入場所に悩んだり。一番最初にずっコケたのはブログタイトルとブログ説明（description）。

ヘッダーが div タグで左右に分割されているので（約400pxずつ）、ブログタイトルや説明が長いと（普通の長さでも）改行されまくってヘッダーだけで画面半分が使われてしまうとか。

やはり手を加えないといけない部分もあるようです。そのへんのカスタマイズについても、この Woodmag テンプレートを題材に書いてみようかと思います。

とりあえず今日のところは、Woodmag テンプレートのご紹介まで。