【Contempo】全てのページでラベルを表示させる

2023/09/066
アイキャッチ

Contempo テーマの謎仕様改良シリーズ第2弾です。
今回もまた気になるところをサクッと直しちゃいましょう!

ということで、前回はトップページのサムネイルにリンクを付けるカスタマイズを施しましたけど、今回は記事ページ以外で非表示になっているラベルを、常時表示させるようにしてみたいと思います。

ビフォーアフター

テーマ編集は必ず予めバックアップを取ってから行って下さい。

条件分岐タグを消す

テーマのHTML編集にて <b:includable id='postLabels'>を検索で探します(編集画面内をクリックでアクティブな状態にして Ctrl + F で検索できます)。

全部で4ヶ所あります。一番上は無関係で、上から2つ目が「注目の投稿」、3つ目が「ブログの投稿」、4つ目が「人気の投稿」用のラベル表示を制御しているコードです。※「人気の投稿」ウィジェットを複数置いている環境では当該コードもその分増えます(たぶん5つ目以降)。
手順は簡単で、以下のコード内の赤文字の部分を削除するだけです。
閉じタグの </b:if> も消すのを忘れずに。
ちなみに当ブログでは「ブログの投稿」のコードのみに手を加えています。

<b:includable id='postLabels'>
<b:comment>We don&#39;t display labels on the home page.</b:comment>
<b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
<b:include name='super.postLabels'/>
</b:if>
</b:includable>

<b:comment>We don&#39;t display labels on the home page.</b:comment>
の部分は単なるコメント文(ホームではラベルは表示しませんよ)なので消しても消さなくてもどちらでもOKです。

HTML

<b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
の部分が(ブログの投稿の)記事ページだけに表示させるための条件分岐タグで、これを削除することで記事ページ以外のトップページや検索結果やアーカイブ等、全てのページでラベルが表示されるようになります。

※もし特定のページだけは非表示のままにしておきたい場合は、条件分岐タグだけを書き換えてください。条件分岐タグについては結城永人さんのブログをご参照ください。→

ファビコン些細な日常
サムネイル
Bloggerのカスタマイズのページ毎の振り分けの一覧と条件分岐のifの使い方
Bloggerのテンプレートのカスタマイズのhtml編集で多用する重要なマークアップの一つに振り分けの独自タグのifがある。ページ毎にコンテンツを表示するか否かを決められる。振り分けの指定先と基本的な使い方を纏めた。
https://www.nagahitoyuki.com/2018/10/list-of-page-distribution-and-usage-of-conditional-branch-if-in-blogger-customization.html

ラベルの位置

ラベルの表示位置はデフォルトでは記事のフッター部分になっていると思いますが、もし当ブログの様に上の方に持っていきたいという方は、レイアウト画面にて簡単に移動させることができます。
「ブログの投稿」ガジェットのアイテムの並べ替えで
写真、旅行をドラッグアンドドロップで移動させて「保存」すればOKです。

※フッターの位置のままだと「人気の投稿」のラベルが表示されない(隠れてる?)ので注意。

レイアウト編集

さらにラベルを右寄せにしたい場合はテーマ編集画面(HTML)にて
]]></b:skin> を検索で探し、そのすぐ上に以下のCSSを追記します。

.post-labels {
float: right
}

以上です。

それでは次回第3弾をお楽しみに!(いまのとこネタはないけど…)