ものすごく簡単にページタイプごとにブロガーのスタイルを変更する方法。
Blogger Sentral さんからの目から鱗が落ちるようなアイディアです。
<body>タグを検索します。
<body expr:class='"loading" + data:blog.mobileClass'>
Classの最後にdata:blog.pageTypeを追加します。
<body expr:class='"loading" + data:blog.mobileClass + " " + data:blog.pageType'>
"ｽﾍﾟｰｽ"のところがキモで、これがないと、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; }
個別ページの投稿記事部分のみ背景色を変える。