Bloggerテンプレートタグの解析もやっていかないとかな？
Ardor(@ArdorOnline)です。
表示されているイメージのように、
トップページに表示される記事のレイアウトを変更しました。
でも記事ページは、そのままですよ！
今回は、トップページ表示をCSSで変更する方法をご紹介します。
個人的に「読みやすいな」と思うブログの条件として、
まず挙げるのが次の条件です。
- トップページは、記事の要約一覧が表示されていること
- 記事ページには、詳細な内容が表示されること
理想を言ってしまえば、トップページの要約には、
左右どちらかに画像、その隣に本文の一部があると
一覧にしても見やすいと思います。
配布されているテンプレートで、実現しているものは無いかと探したところ
いくつか見つかりました！
http://btemplates.com/2012/blogger-template-simples-2-0/demo/
見つけたテンプレートの見た目は次の通りです。
記事ページ
こんな感じにできたら良いなと思って、テンプレートを見ていたのですが、
javascriptでタグとスタイルを書き換える方法でした。
トップページは、たくさん表示されるページですし、
Javascriptでやりたくないので、他の方法は無いかと探してみました。
要約ページを作る方法
やり方を探した結果、古くから次の方法が利用されているようです。
- トップページをJavascriptで書き換える
- RSSをサマリで取得して表示する
RSSのサマリを取得する方法は、良いアイディアだと思いました。
それから「人気の投稿」ガジェットがどうやってやっているのか
気になったので調べてみました。
画像はGoogleが小さいサイズに加工しているようです。
さすがGoogle先生。
あとはサマリから本文を引っ張ってきているようです。
採用した方法
どちらの手法もたくさんのメリットがあります。
しかし、せっかく追記機能を埋め込んでトップページに表示させていたので、
もっと簡単にできないものかと、考えてました。
そこで出てきたアイディアは、
テンプレートでスタイルを指定すれば、できるのではないか！
というもの。
これくらいシンプルなら受け入れられる。
それにサーバサイドでページが完成するから
トップページが重くならないハズ。
実現する手順
手順は、次の通りです。
- テンプレートのバックアップを行う
- トップページ用CSSを作成する
- トップページだけ有効になる仕掛けを作る
- 各ページで表示を行って確認する
テンプレートを変更するので、必ずバックアップを行って、
自己責任で編集してください。
バックアップは、以前の記事を参考にしてください。
参考：Bloggerのテンプレートをバックアップする方法
トップページ用CSSを作成する
バックアップを行ったら、トップページに適用するCSSを作成します。
私は、Google Chromeを利用していて、CSSは表示しながら決めています。
右上にあるメニューから「ツール」→「デベロッパーツール」を選択します。
面倒な方は、右クリックから「要素を検証」をクリックします。
次のように、要素を解析する画面が表示されます。
直接、スタイルの追加や無効化ができますので、使ってみてください。
レイアウトは、左にイメージ、右に概要としたいので、
イメージのスタイルを変更します。
対象のイメージタグを選択します。
すると右の欄に適用されている内容が表示されます。
このブログでは、「.post-body img」に指定があります。
「.post-body img」をトップページだけ変更できれば実現できそうです。
width、heightとfloatをスタイルに追加してみます。
リアルタイムでスタイルが適用され、表示されます。
これでトップページ用のCSSができました。
それぞれ使っているテンプレートによって、指定方法が異なるので、
CSSを調べてみてください。
トップページだけ有効になる仕掛けを作る
適用するスタイルが完成したら次のステップです。
トップページだけ有効になるように仕掛けを作ります。
テンプレート内を探すと次のような記述があると思います。
<b:if cond='data:blog.pageType != "item"'> <!--ここの記述が有効となる--> </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 != "static_page"'>
<style type='text/css'>
.post-body img {
width:200px;
height:150px;
float:left;
}
</style>
</b:if>
</b:if>
各ページで表示を行って確認する
あとは完成したコードをテンプレートに追加します。
styleタグが記述できるところならどこでもOKです。
このブログでは、head終了タグの直前に入れました。
テンプレートを保存したら、各ページで適用できた表示になっているか
確認してください。
最後に
如何でしたでしょうか？
お好みのトップページが作成できましたか？
ここまでやってみて感じたことがあります。
テンプレートで使われているタグの意味をしっかり解析しておかないと
カスタマイズが難しいですね。
後々テンプレートタグについては、まとめていきます。
最後まで読んで頂き、ありがとうございます。
0 件のコメント:
コメントを投稿