[blogger]記事タイトルの下にラベルタグを表示する方法。

bloggerで、ソーシャルボタンなどを追加していると、記事下にあるラベルタグがどこにあるか分かりづらく感じませんか？
記事を読んで、この分類の記事を探したいと思った時に、どこにあるかわかりづらいのはちょっと困りものです。

そこで、タイトル下にラベルを表示させてみることにしました。

作業

まず、タイトル下がHTMLのどこなのかを探します。

管理画面から、

「テンプレート＞HTMLの編集＞ウィジェットのテンプレートを展開にチェック」

まずここまで、そしてページ内検索などを利用して、

    <div class='post-header'>
    <div class='post-header-line-1'>

この部分を探します。

コードを挿入する

<div class='labelheader'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if></span></div>

＜div class='post-header-line-1'＞の下にこのコードを挿入すれば、ラベルが表示されます。

トップページでは表示しないようにする

区切りを利用して記事を書いている場合、トップページにまで表示させると、ラベルだらけな見た目になるので、個別記事のみに表示させるように、

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ラベルのコード
</b:if>

というように、＜b:if＞で挟んであげます。

私は、ヘッダー部分にソーシャルボタンを置いているので、ラベル表示の上に＜img border＞で、画像を使って横線を入れていますが。

ラベルを右寄せにする

最後に、タイトル下のラベルは右寄せにしたほうが、しっくりきたので、右寄せに。

これは、
「管理画面＞テンプレート＞カスタマイズ＞アドバンス＞CSSの追加」から
カスタムCSSの追加フォームで、

.labelheader{text-align:right;}

と追加表記して、右寄せに。

右寄せにするために、初めのHTMLコードで

<div class='labelheader'>

を追加して、CSSで調整しやすくしてみてます。

こんな感じで、無事ラベルをタイトル下に表示することが出来ました！

Pages

2012/05/27