ラベルページの見出しデザインを変える

通常、ラベルごとのページを表示すると、以下のような見出しが先頭についています。



しかし、この見出しは周りのレイアウトを考えていないため、どうしても浮いてしまいます。

そのため当ブログでは、トップページと同じような形で、選択したラベルを見出しとして表示するよう修正しました。

修正手順

まず、テンプレート内を「data:navMessage」で検索します。

ヒットした部分を囲むincludableタグ（）内が「ラベル＊＊＊＊＊の投稿を表示しています」の実装部分ですので、以下のように編集します。





上の例は、「ラベル＊＊＊＊～」の段落の代わりに、h3タグの見出しとしてラベル名を表示するよう編集しています。

表示するラベル名は、そのページのURLから抜き取りたいと考えたので、javascriptでページURLを編集するようにしました。
（例えば当ブログの「Tips」タグの場合は、「http://i-jupiter.blogspot.jp/search/label/Tips」から末尾の「Tips」のみ抜き取る形になります）



結果、ラベルページは下図のようなデザインになりました。

「ラベル＊＊＊＊～」自体のデザインを変える

上の例では見出しの表示方法自体を変えてしまいましたが、「表示する文字は一緒だけどデザインだけ変えたい！」という場合もあると思います。

その場合は、見出し部分のcssを書き換えてしまいましょう。
上で提示した「編集前」のソースでいうと、「status-msg-wrap」「status-msg-body」のあたりです。


↑css設定例

以上のように設定した場合、デザインはこのようになります。



あとは、お使いのテンプレートにあわせて色味を揃えるなどすればよいでしょう。

参考： Customize your Blogger "Status Message" | Blogger Magz