QooQ ラベル（タグ）関連のカスタマイズ【Blogger】
今回はラベル（カテゴリー・タグ）、パンくずリストまわりのカスタマイズをいくつかメモ。
ラベルが2個以上設定されている場合の表示
投稿された各記事ページの上部パンくずリスト部分は、ホーム/ラベル という表示になります。（薄い緑の記事タイトルと白い記事本文の間にある、薄いグレー部分）
この部分、記事に複数のラベルが設定されていても、デフォルトでは最後のラベルしか表示されないのですが、設定されているラベルを全部表示させたいところ。
ホーム/ラベル1/ラベル2… という表示にしたいと思います。
<b:if cond='data:blog.pageType == "item"'>を検索。
その数行下の下線のあるタグ<b:if cond='data:label.isLast == "true"'>と、対になる</b:if>の2行を削除。間のコードは残したままです。
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> --- ここを1行削除
<span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'>
<a expr:href='data:label.url' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta content='2' itemprop='position'/>
</span> /
</b:if> --- ここを1行削除
</b:loop>
<b:else/>
<span>その他</span> /
</b:if>
</b:loop>
対になる</b:if>がどれかよく分からない場合は、HTMLを編集する画面の左はじに小さな▼印がついていると思います。行数の▼をクリックすると、対になる</b:if>までコードが折りたたまれて青い ←→ が出てくるので、その方法で探してください。
【 QooQ カスタマイズ 】パンくずリストと関連記事にラベルすべての要素を追加する
前後記事リンクと上下・位置入れ替え
前後記事リンクと上下・位置を入れ替えをすることにしました。～カテゴリの表記もいらないので削除（ラベル名だけ表示）。
リンク先ではコメント欄とフッターの間に移動させる方法が解説されていますが、前後ナビをどこに置くかでコードの移動先が変わってきます。
当ブログでは単純にラベルと前後ナビを上下いれかえただけ（前後ナビは関連記事の上）なので、基本手順だけを参考にさせていただきました。
<b:include name='nextprev'/> を検索。2か所あると思います。
<div id='single-footer'>
<b:if cond='data:blog.pageType == "item"'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons' />
<b:include name='nextprev' /> --- 移動
<b:if cond='data:top.showPostLabels and data:post.labels'>
<div id='single-footer-category'>
<b:loop values='data:post.labels' var='label'>
<a class='single-footer-category-item' expr:href='data:label.url'>
<data:label.name />
<data:postLabelsLabel /> --- ～カテゴリ表示不要なら削除
</a>
</b:loop>
</div>
</b:if>
<b:if cond='data:skin.vars.mrp_enable == "true"'>
<div id='mrp-wrapper'>
<p id='mrp-title'><data:skin.vars.mrp_title /></p>
<b:include data='post' name='mrp' />
</div>
</b:if>
</b:if>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_picker' />
</b:if>
</div>
</div>
</b:loop>
<b:else />
<div id='list'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</div>
<b:include name='nextprev' />
</b:if>
</b:includable>まず、ラベル名後の「～カテゴリ」の表記が不要な場合は、上記10行目の <data:postLabelsLabel /> を削除します。
次に、上記3行目の<b:include name='nextprev'/> を移動させるのですが、説明がややこしいので、当ブログと同じで良ければこのまま以下をコピペするのが手っ取り早いです。（以下コードは～カテゴリの削除済み）
<div id='single-footer'>
<b:if cond='data:blog.pageType == "item"'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons' />
<b:if cond='data:top.showPostLabels and data:post.labels'>
<div id='single-footer-category'>
<b:loop values='data:post.labels' var='label'>
<a class='single-footer-category-item' expr:href='data:label.url'>
<data:label.name />
</a>
</b:loop>
</div>
</b:if>
<b:if cond='data:view.isPost'>
<b:include name='nextprev' />
</b:if>
<div id='mrp-wrapper'>
<p id='mrp-title'><data:skin.vars.mrp_title /></p>
<b:include data='post' name='mrp' />
</div>
</b:if>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comment_picker' />
</b:if>
</div>
</div>
</b:loop>
<b:else />
<div id='list'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post' />
</b:loop>
</div>
<b:include name='nextprev' />
</b:if>
</b:includable>
ラベルをCSSで装飾
デフォルトでは、上は右寄せ・下はセンタリングで複数ラベル指定がある場合は2段になるので、下のラベル表示をもっとスマートに。1行で複数ラベルを表示し左寄せにします。
上のラベル（カテゴリー）
- id='single-header-category' で表示する場所
- class='single-header-category-item' で各ラベル表示の設定
下のラベル（カテゴリー）
- id='single-footer-category' で表示する場所
- class='single-footer-category-item' で各ラベル表示の設定
それぞれCSSで表示をカスタマイズします。上ラベルは移動はないので装飾だけの変更で済みましたが、下ラベルは以下のように変更しました。
/* オリジナルコード */
#single-footer-category{
margin-top: 2em;
}
.single-footer-category-item{
display: table;
margin: 1em auto 0 auto;
padding: 1em;
font-weight: bold;
border-radius: 3px;
background: $(brand.color);
color: $(brand.font);
}以下のように変更。
#single-footer-category{
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 左寄席せ */
font-size: 80%;
}
.single-footer-category-item{
display: block;
margin-top: .1em;
margin-left: .3em;
padding: .3em .5em;
color: $(brand.color);
border: solid 2px $(brand.color); /*線*/
border-radius: 10px; /*角の丸み*/
}
ここまで記事末尾（前後ページナビとラベル入れ替え・CSS装飾）のカスタマイズ後のイメージは以下の通り。
CSSでの装飾・余白調整についてはお好みになりますが、ご参考まで。
当ブログ内、QooQカスタマイズ記事をまとめました
8-stars.blogspot.com
