Vaster2カスタマイズ：記事の上にあるラベルもリンクさせる


Bloggerの日本語テンプレートといえば「vaster2」ですよね！
見栄えもよくSEO効果も高いので私もありがたく使わせていただいています。

カスタマイズを前提として作られているので各個人で気になるところや好みで変えたい部分は自分で変更していく必要があります。

私の場合は記事の上にあるラベルの部分。
ここはもともとBlogger純正のテンプレートだとラベルごとにリンクがありクリックするとそのラベル一覧の記事に飛んでいましたよね。
「vaster2」を導入するとその機能はなくなりただのテキストになってしまうのでそのリンクを復活させたいと思います。




記事上のラベルにリンクをつける！


ラベルのリンクを復活させるだけなら簡単です。

「テーマ」の「HTML編集」からHTMLを変更しますのでバックアップを忘れずにお願いします。

<b:loop values='data:post.labels' var='label'>

<data:label.name/>

</b:loop>
まずはこの部分を見つけ出します。
二か所ありますが上の方がトップの記事一覧のラベルで、下の方が記事上のラベルになります。
記事上のラベルは<!--記事ページの時-->を検索してそこから20行ほど下の方です。

<b:loop values='data:post.labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' class='taglink'>
<data:label.name/>
</a>
</b:loop>

この２行を追記しましょう。
これでラベルにリンクが張られたので各ラベルをクリックすればラベルごとのページに飛ぶはずです。
1行目の方の太字でclass='taglink'とclassをつけているのは後でリンクの色を変更するためです。

2か所とも同じように変更してしまうとトップページの「記事へのリンク」に不具合が出てしまいます。
変更前はこの全体が１つのリンクとしてクリックできますが、同じ内容で変更してしまうと、画像をクリックしないとその記事へリンクが機能しないようになってしまいます。

先ほど検索してもらった2か所のうち上の方がトップページのラベルだと先ほど書きましたが、そちらの方は下記の内容に変更してください。
この変更は記事一覧のラベルのデザインを変更するためのものなので必要なければしなくてもいいです。
<b:loop values='data:post.labels' var='label'>
<span class='taglink'>
<data:label.name/>
</span>
</b:loop>
『<!--公開日を表示-->』で検索して10行ほど上のにあるのがトップページの記事一覧のラベルの部分です。
赤文字の部分を追記します。

この変更によって次のラベルのデザインの変更が記事内のラベルにも、トップページのラベルにも適用されることになります。

ラベルのリンクの色を変更しよう！

リンクに変えると当然ですが文字の色も変わってしまいます。
なのでリンク文字の色も変更した方が見やすくなります。
ただし単純にリンクの色を変えると記事中の全てのリンクの色が変わってしまうので、このラベルの部分だけを変更したいと思います。

先ほどのコードは<span class='post-tag'></span>で囲われているので
.post-tagを検索で探します。

.post-tag{
font-size:14px !important;
background:$(articlelist.posttag.color);
padding:1px 4px !important;
color:$(articlelist.posttag.font);
margin-top:0;
display:inline-block;
}

初期状態ではこの様になっているはずです。
※使用しているのが「Vaster2 」TD（テーマデザイン）なのでTDじゃない方と、「background」や「color」の所などが少し表記が違います。

わかりやすいようにその下に、

a.taglink:link{color:white;}/*未訪問リンクの色*/
a.taglink:visited{color:white;}/*訪問済リンクの色*/
a.taglink:active{color:white;}/*クリックして離されるまでのリンクの色*/
a.taglink:hover{color:white;}/*カーソルがのった時のリンクの色*/

この４行を追記します。

color:white;　赤文字の部分は色指定。
 とりあえず白にしていますが好みの色に変えて構いません。
今はどの状態でも白になるように設定しています。

さらにこれにひと工夫。

a.taglink:link{color:white;}/*未訪問リンクの色*/
a.taglink:visited{color:white;}/*訪問済リンクの色*/
a.taglink:active{color:white;}/*クリックして離されるまでのリンクの色*/
a.taglink:hover{color:white;/*カーソルがのった時のリンクの色*/
background:deepskyblue;/*カーソルがのった時の背景の色*/
}

カーソルが上に来た時に色が変わるように変更します。
これでどのタグを選択しているかわかりやすくなりました。
背景の色を好みの色に変える場合は、
.post-tag{
font-size:14px !important;
background:$(articlelist.posttag.color);
padding:1px 4px !important;
color:$(articlelist.posttag.font);
margin-top:0;
display:inline-block;
}
この部分を変えます。
※「Vaster2 」TDじゃない方は、赤文字のところに色の値が入っています。

背景全体を黒に変えたい場合は、
background:$(articlelist.posttag.color);
↓
background:black;

全体の背景の色を変えたらカーソルがのった時の色もマッチするような色に変えるのを忘れずに。

ラベルの境界線をわかりやすくしよう


ラベル同士が近いのでちょっとわかりにくいですよね。
スペースを空けるか「,」を入れたいところ。

ラベル同士の間隔を広げ読みやすくする


.taglink{
padding:0px 2px/*赤文字は左右の間隔の値*/
}

CSSの適当なところに追記します。
ラベル同士の間隔が広くなりました。
赤文字の数値を大きくすると間隔も広くなります。

スペースではなく「,」で区切ってみる


一番初めにリンクを追加するときに出てきたコードです。

<b:loop values='data:post.labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=10&quot;' class='taglink'>
<data:label.name/>,
</a>
</b:loop>

ちょっとわかりにくいですが、
<data:label.name/>,
この一行の最後に追加するだけです。

ラベルの間に「,」が追加されました。

これで少しユーザビリティが改善されたのではないでしょうか？
次回はラベルのデザインそのものをカスタマイズしてみたいと思います。

それではまた次回！