Vaster2｜記事ページのラベルにリンクを付ける方法。

みなさんこんにちはsoeパパです。
今回はVaster2の記事ページのラベルについてのお話です。

Vaster2の記事ページの一番上のタイトル上にはその記事に設定されたラベルの一覧が表示されていますが、そのラベルにはリンクが張られていないのでクリックすることはできません。
できればラベルをクリックして同じカテゴリ一覧にジャンプできるようにしたいところですよね。

ラベルのリンクを機能するようにカスタマイズする方法を解説しますね。

Vaster2の記事のラベルのコードを探す

記事のラベルは日付の横にあるコレ。
カスタマイズするにはまずはこのコードを探します。

「<span class='post-tag'>」で検索してください。
以下のコードが見つかると思います。

<span class='post-tag'>
<i aria-hidden='true' class='fa fa-tag'/>
<b:loop values='data:post.labels' var='label'>

<data:label.name/>

</b:loop>
</span>

これが記事の上のラベルをはき出すコードになります。
記事に設定されているラベルを表示するようになっていますが、<a>タグがないのでリンクがありません。
<b:loop>というのがくり返しというタグ、<data:label.name/>がラベルを出力するタグになります。
<data:label.name/>の前後に空白の行があるところをみると前後に<a>タグを入れたい方用のにわかりやすく空けてあるのでしょう。

ラベルにリンクを追加する

<data:label.name/>の前後に<a>タグが必要になります。

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

赤文字のコードを追加してください。

「class='taglink'」
CSSで調整するためにクラス名を入れています。

「max-results=10」
ラベルのリンクをクリックしたときの1ページ中に表示する記事数の設定です。
10の部分を変更すれば表示数が変わります。

ラベルのリンクの色を変更する

リンクが張られたことによりラベルの文字色が変わります。
今まで白文字だったものが通常のリンクの色と同じになってしまい見にくいので変更する必要がありますね。

設定したクラス名を使ってCSSでカスタマイズします。
まずは「.post-tag」で検索してください。

.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}

これはラベルのCSSなので、わかりやすいようにその下に追記します。

a.taglink:link{color:#fff;}/*未訪問リンクの色を白に*/
a.taglink:visited{color:#fff;}/*訪問済リンクの色を白に*/
a.taglink:active{color:#fff;}/*クリックして離されるまでのリンクの色を白に*/
a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
}

上記のコードを追加してください。
これでラベルの文字色は常に白になるように変更されました。

どのラベルを選択しているかわかりやすくする

マウスオーバーで下線を出す

追加したCSSはリンクの上にマウスカーソルがきた時にでる下線も消しているので、どのラベルを選択しているのかわかりにくくなっています。

a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
}

「text-decoration:none;」を削除するとマウスカーソルがラベルの上に来た時に下線が出るようになります。必要な場合は変更してください。

マウスオーバーで背景色を変える

マウスカーソルが上にきたら背景色を変えることで分かりやすくする事もできます。

a.taglink:hover{
color:#fff;/*カーソルがのった時のリンクの色を白に*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
background:#00bfff;/*カーソルがのった時の背景の色*/
}

a.taglink:hoverに赤文字の行を追加してください。
これでマウスオーバーで色が変化するようになるはずです。

まとめ

Vaster2を導入したもののラベルのリンクが消えてしまっていて復活させたかった方も多いのではないでしょうか。カテゴリはクリックできるものと思っていてクリックしても反応が無かったらモヤッとするものですし。

今回のカスタマイズしたのは<a>タグの追加とCSSで文字色を制御しているだけの簡単なものなので試してみてくださいね！

今日のお話はここまで！
それではまたお会いしましょう〜

Vaster2 カスタマイズ