Vaster2 カスタマイズ 「消えたラベルの絞り込み表示」復活させるには


Bloggerでとても有名な日本語テンプレート、「Vaster2」のラベルに関するカスタマイズ方法のリクエストを頂きましたので微力ながらお助けしたいと思います。

今回リクエストいただいた内容はBloggerの標準テンプレートだと元々あった機能の復活になります。
テンプレートを「Vaster2」に変えると、ラベルリストで特定のラベルに記事をしぼった時に一覧の上に出てくる、『ラベル 〇〇〇 の投稿を表示しています。 すべての投稿を表示』という表示がなくなってしまっていると思います。
Bloggerではおなじみのこんな感じのやつです。
「Vaster2」のテンプレートを適用したブログでラベルを絞り込んだ画面ですが、記事一覧の上には特に何も表示されていません。
それがないと今何のラベルについて絞り込みをしているのか見失ってしまい、せっかく来てくれた読者様が迷子になってしまうかもしれません。
というわけで、さっそくカスタマイズの内容に触れていきたいと思います。


カスタマイズのその前に


といいつつ前置きとして…

正直なところ…私自身はテンプレートを自作したりできるほど詳しかったりコードを自在に操れるようなスキルもありません。
なので他のテンプレートと見比べてこれかなと思ったところをちょいちょいいじってみて地道に変化を確かめてカスタマイズしていく程度が関の山です。
間違っている部分や、もっとこうした方がスマートだよなどのご指摘があればありがたいのでよろしくお願いいたします。

それから改変前にはHTMLのバックアップは変更前に必ず取りましょう
テンプレートのダウンロードだけでなく、HTMLのコードを全文コピーしてテキストファイルに貼り付けておくと万全です。

カスタマイズ方法


HTMLのカスタマイズは「テーマ」の「HTMLの編集」を選択するとテンプレートのコードを書き換えることができます。

<!--SNSボタン編集ここまで-->
まずはこの部分を検索してください。

その下に、
<!--SNSボタン編集ここまで-->
</b:includable>
<b:includable id='status-message' title='不要'>
</b:includable>
というのがあると思います。
省略されてるかもしれませんが左側の黒い三角をクリックすると全文がでてきます。

赤文字の部分を下記の赤文字と差し替えます。

<!--SNSボタン編集ここまで-->
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
これで機能は戻ってきたのですがどこに表示をするのかがまだ指定されていません。

 それでは次はどこに表示するのかを指定してあげましょう。
<b:includable id='main' var='top'>
まずは上記を検索してください。
一か所しかないと思います。

その真下に、
<b:include data='top' name='status-message'/>
この1行を追記。

最後に「テーマを保存」を選択して変更を適用して完了です。
はい、これでこんな感じになったかと思います。

文字の大きさを調整する


ちょっとばかり今の状態では大きすぎる感じがしませんか?
これは好みの問題なのでどちらでもいいのですが、
CSSのところに下記を追記してあげると文字の大きさをコントロールできます。

.status-msg-wrap{
font-size:90% !important;
}
『90%』の部分の数値を変えると文字の大きさが変わりますので好みで変更してくださいね。
90%だとこんな感じです。

グレーの囲みの中で文章が若干上寄りな気がするのですが私の力量ではセンタリングすることができませんでした。
もしお力添えいただける方がいらっしゃればコメント貰えるととてもありがたいです。
中途半端な結果で申し訳ない…。

カスタマイズリクエストはもうひとついただいていたので、次回は「パンくずリスト」について書きたいと思います。
それではまた次回!