QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【５パンくずリスト】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
パンくずリストCSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
パンくずリスト
*****************************************/
.breadcrumbs{
line-height: 1;
font-size: 16px; /*文字サイズ*/
margin-top: 10px; /*ヘッダーとパンくずリストの間*/
background: inherit;
color: $(font.light); /*文字色*/
}
/* 404メッセージ */
.status-msg-wrap{
color: $(font.light); /*文字色*/
}
数値を少しいじっているだけになります。
パンくずリストに複数のラベルを表示する方法
ついでなので、パンくずリストに複数のラベルを表示する方法を解説します。
QooQの初期設定では、記事に複数のラベルを設定してもその最後のラベル１つしかパンくずリストには表示されません。
これを記事に設定した複数のラベル全てが表示されるように変更します。
HTMLの編集画面でCtrlキー+FキーでSearch: という検索欄を表示させ、<b:if cond='data:blog.pageType == "item"'>を検索します。
その数行下の<b:if cond='data:label.isLast == "true"'>とそれに対応した</b:if>を削除します。
不安な場合は<!--コメントアウト-->でコードを無効にするのをオススメします。
<b:if cond='data:blog.pageType == "item"'>
～省略～
<!--<b:if cond='data:label.isLast == "true"'>-->
～省略～
<!--</b:if>-->
～省略～
<!--<b:if cond='data:label.isLast == "true"'>-->
～省略～
<!--</b:if>-->
これでパンくずリストに設定した全てのラベルが反映されるようになります！
参考ブログ様
bloggerテンプレート【QooQカスタマイズ】パンくずリストと関連記事に表示されるタグを増やす方法
