2013年12月30日月曜日

Bloggerのページタイプごとにスタイルを変更する

ものすごく簡単にページタイプごとにブロガーのスタイルを変更する方法。

簡単にブロガーのお色直し

Blogger Sentral さんからの目から鱗が落ちるようなアイディアです。


<body>タグを検索します。
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Classの最後にdata:blog.pageTypeを追加します。
<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>


&quot;スペース&quot;のところがキモで、これがないと、data:blog.pageTypeが展開されません。

テンプレートによっては<body>タグが異なることがあります。
<body>だけになっていたなら、<body expr:class='data:blog.pageType'>のようにします。

たったこれだけで、ページタイプのClassを追加できました。

PC(モバイル以外)で閲覧すると次のように4つのページタイプによってHTMLが展開されます。

index
<body expr:class='loading index'>
item
<body expr:class='loading item'>
archive
<body expr:class='loading archive'>
static_page
<body expr:class='loading static_page'>

モバイルで閲覧するとこれにmobile クラスが追加されます。
<body class='loading mobile index'>

loading と mobile はBloggerのbundle cssで設定されています。
Bloggerのページタイプについては、Bloggerのページタイプにて記事にしましたのでよかったら見ていってください。

CSSを書く場所は、なるべく優先されるように]]></b:skin>の直前が良いと思います。

書き方の例

.index .post-timestamp { display:  none; }

インデックスのページでフッターのタイムスタンプを非表示にしています。

ただコンテンツを表示しないようにするのは、HTMLのテンプレートで分岐した方が綺麗なので、使いどころとしては色を変えたりする見映えの部分、スキンのような使い方が良いのではないでしょうか。

.item .post-body { background-color: #f0f8ff; }

個別ページの投稿記事部分のみ背景色を変える。