ものすごく簡単にページタイプごとにブロガーのスタイルを変更する方法。
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 で設定されています。
CSS を書く場所は、なるべく優先されるように]]></b:skin>の直前が良いと思います。
書き方の例
.index .post-timestamp { display: none; }
インデックスのページでフッターのタイムスタンプを非表示にしています。
ただコンテンツを表示しないようにするのは、HTML のテンプレートで分岐した方が綺麗なので、使いどころとしては色を変えたりする見映えの部分、スキンのような使い方が良いのではないでしょうか。
.item .post-body { background-color: #f0f8ff; }
個別ページの投稿記事部分のみ背景色を変える。