Bloggerでトップページ表示をCSSで変更する方法

Bloggerテンプレートタグの解析もやっていかないとかな？
Ardor(@ArdorOnline)です。
表示されているイメージのように、
トップページに表示される記事のレイアウトを変更しました。
でも記事ページは、そのままですよ！
今回は、トップページ表示をCSSで変更する方法をご紹介します。

個人的に「読みやすいな」と思うブログの条件として、
まず挙げるのが次の条件です。

トップページは、記事の要約一覧が表示されていること
記事ページには、詳細な内容が表示されること

理想を言ってしまえば、トップページの要約には、
左右どちらかに画像、その隣に本文の一部があると
一覧にしても見やすいと思います。

配布されているテンプレートで、実現しているものは無いかと探したところ
いくつか見つかりました！

http://btemplates.com/2012/blogger-template-simples-2-0/demo/

見つけたテンプレートの見た目は次の通りです。

トップページ

記事ページ

こんな感じにできたら良いなと思って、テンプレートを見ていたのですが、
javascriptでタグとスタイルを書き換える方法でした。

トップページは、たくさん表示されるページですし、
Javascriptでやりたくないので、他の方法は無いかと探してみました。

要約ページを作る方法

やり方を探した結果、古くから次の方法が利用されているようです。

トップページをJavascriptで書き換える
RSSをサマリで取得して表示する

RSSのサマリを取得する方法は、良いアイディアだと思いました。

それから「人気の投稿」ガジェットがどうやってやっているのか
気になったので調べてみました。
画像はGoogleが小さいサイズに加工しているようです。
さすがGoogle先生。
あとはサマリから本文を引っ張ってきているようです。

採用した方法

どちらの手法もたくさんのメリットがあります。

しかし、せっかく追記機能を埋め込んでトップページに表示させていたので、
もっと簡単にできないものかと、考えてました。

そこで出てきたアイディアは、

javascriptでスタイルを書き換えるくらいなら、
テンプレートでスタイルを指定すれば、できるのではないか！

というもの。
これくらいシンプルなら受け入れられる。
それにサーバサイドでページが完成するから
トップページが重くならないハズ。

実現する手順

手順は、次の通りです。

テンプレートのバックアップを行う
トップページ用CSSを作成する
トップページだけ有効になる仕掛けを作る
各ページで表示を行って確認する

テンプレートを変更するので、必ずバックアップを行って、
自己責任で編集してください。
バックアップは、以前の記事を参考にしてください。
参考：Bloggerのテンプレートをバックアップする方法

トップページ用CSSを作成する

バックアップを行ったら、トップページに適用するCSSを作成します。
私は、Google Chromeを利用していて、CSSは表示しながら決めています。

右上にあるメニューから「ツール」→「デベロッパーツール」を選択します。
面倒な方は、右クリックから「要素を検証」をクリックします。

次のように、要素を解析する画面が表示されます。
直接、スタイルの追加や無効化ができますので、使ってみてください。

レイアウトは、左にイメージ、右に概要としたいので、
イメージのスタイルを変更します。

対象のイメージタグを選択します。
すると右の欄に適用されている内容が表示されます。
このブログでは、「.post-body img」に指定があります。
「.post-body img」をトップページだけ変更できれば実現できそうです。

width、heightとfloatをスタイルに追加してみます。
リアルタイムでスタイルが適用され、表示されます。

これでトップページ用のCSSができました。
それぞれ使っているテンプレートによって、指定方法が異なるので、
CSSを調べてみてください。

トップページだけ有効になる仕掛けを作る

適用するスタイルが完成したら次のステップです。
トップページだけ有効になるように仕掛けを作ります。

テンプレート内を探すと次のような記述があると思います。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!--ここの記述が有効となる-->
</b:if>

これは記事ページ以外が表示された時に有効になることを意味しています。
プログラミングの条件分岐です。

「data:blog.pageType」が持つ値を調べてみました。
次のようになるようです。

指定値	意味
index	トップページやラベルで表示した場合の値
archive	アーカイブページを表示した場合の値
item	各記事ページを表示した場合
static_page	固定ページ（作成したページ）を表示した場合の値

他にもあるかもしれません。
もしご存知でしたらコメントなど頂けると助かります。

では作成したスタイルを適用する範囲を決めたいと思います。
要約表示したいのはトップページ、ラベルページ、アーカイブです。
つまり、「index」と「archive」です。
しかし、Bloggerの条件分岐は「OR（または）」の利用ができないようです。
一般的なプログラミング言語なら
if (data:blog.pageType == index || data:blog.pageType == archive)
と書けるのですが、できませんでした。

「OR（または）」を使うときは、二つに分けて書いて表現するようです。
これだと、スタイルの記述が2箇所になってメンテナンスが面倒になりそう。。

そこで、「AND（かつ）」を利用することにしました。
if (data:blog.pageType != item && data:blog.pageType != static_page)
と、書ければいいのですが、書けませんでした。
ですが、次のように2つに分けて書くことができます。

if (data:blog.pageType != item) {
  if (data:blog.pageType != static_page) {
    ここに内容
  }
}

これで、記事ページ以外かつ作成ページ以外と言う意味になり、
トップページとアーカイブを対象することができます。

条件とスタイルを記述して完成したコードが次の通りです。

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.post-body img {
width:200px;
height:150px;
float:left;
}
</style>
</b:if>
</b:if>

各ページで表示を行って確認する

あとは完成したコードをテンプレートに追加します。
styleタグが記述できるところならどこでもOKです。

このブログでは、head終了タグの直前に入れました。

テンプレートを保存したら、各ページで適用できた表示になっているか
確認してください。

最後に

如何でしたでしょうか？
お好みのトップページが作成できましたか？

ここまでやってみて感じたことがあります。
テンプレートで使われているタグの意味をしっかり解析しておかないと
カスタマイズが難しいですね。

後々テンプレートタグについては、まとめていきます。

最後まで読んで頂き、ありがとうございます。

2012/11/13