Blogger のラベルのデザインをボタン風に変更する

Blogger の記事のフッターのラベルに、個々に別々の Class を指定する方法です。

カテゴリのラベル名には Class が付いていませんので、ブロガーの data タグを使い自動的に HTML に追加することでスタイルを適用できます。

Blogger テンプレート カスタマイズ

テンプレート → HTMLの編集

<b:includable id='post' var='post'> に隠れているので展開して、<span class="post-labels"> を検索します。

変更前

<div class='post-footer-line post-footer-line-2'>
<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>

expr:class='data:label.name'を追加。,(カンマ)を半角スペースに変更し保存します。

変更後

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:class='data:label.name' 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>

ページを表示するとHTMLは次のように、ラベルのリンクにラベル名のクラスが追加されます。

<div class="post-footer-line post-footer-line-2">
<span class="post-labels">
ラベル:
<a class="Mail" href="http://nonsubject.arinco.org/search/label/Mail" rel="tag">Mail</a>
<a class="アプリ" href="http://nonsubject.arinco.org/search/label/アプリ" rel="tag">アプリ</a>
<a class="オンラインストレージ" href="http://nonsubject.arinco.org/search/label/オンラインストレージ" rel="tag">オンラインストレージ</a>
<a class="メール" href="http://nonsubject.arinco.org/search/label/メール" rel="tag">メール</a>
</span> </div>

CSS の Class には日本語も使えます。

ここまでくれば、もう完成。あとは好きなように装飾するだけです。

三角をクリックしてソースコードを展開

▲<b:skin>…</b:skin>

<b:skin><![CDATA[/*

/* ここにスタイルを記述 */

]]></b:skin>

---

表紙にあるボタン風のスタイルにする例です。

フレームワークの Pure を参考にさせてもらいました。

div.post-footer-line-2 {

padding:7px 0;

}
.post-labels a {

font-family: inherit;
font-size: 100%;
border: 1px solid #999;
border-radius: 6px;
background-color: #E6E6E6;
text-decoration: none;
text-transform: uppercase;
font-weight:bold;
color: #444;
padding: 0.8em 2.5em;

}

.post-labels a.アプリ {

background-color: #16bb51;
color: white;
text-shadow: 0 1px 1px rgb(22, 116, 29);
border: none;

}

.post-labels a.オンラインストレージ{

background: red;
color: white;
text-shadow: 1px 1px 1px rgb(170, 46, 23);
border: none;

}

.post-labels a.メール {

background: rgb(255, 236, 15);
color: rgb(146, 128, 32);
text-shadow: -1px 1px 1px white;
border: none;

}

実際の編集画面

参考として周辺のクラスに設定されてるデフォルトの装飾内容です。テンプレートやブログの投稿の設定により多少異なると思いますので、読み換えてください。

post-footer-line

.post-footer-line

.post-footer-line

.post-footer-line

bundle.css で margin のみ設定されています。

.post-footer-line > *
{ margin-right: 1em;}

.post-footer-line > :last-child
{ margin-right: 0px; }

.post-footer-line > :first-child
{ margin-left: 0px; }

post-footer-line-*

.post-footer-line-1

.post-footer-line-2

.post-footer-line-3

デフォルトでは何も設定されていません。

span

スタイルなし。

a

Bloggerに設定したリンク色

a:link
{ color: #627349; }

a:hover
{ color: #3778cd; }

強い影響を及ぼすスタイルはありませんので、ほぼ自由にカスタマイズ可能です。