2015年3月21日土曜日

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

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

鮮やかで目立つBloggerのラベル

カテゴリのラベル名には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には日本語も使えます。

IDに日本語は使えません。

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

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

<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

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-*

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

span

スタイルなし。

a

Bloggerに設定したリンク色

a:link
{ color: #627349; }

a:hover
{ color: #3778cd; }

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