Vaster2｜ラベルのデザインをカスタマイズする方法【後編】

みなさんこんにちはsoeパパです。

ひとつ前の記事から引き続きまして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>

記事ページのラベルのコードですが下記に変更してください。

<span class='post-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;'>
<i aria-hidden='true' class='fa fa-tag'/>
<data:label.name/>
</a>
</b:loop>
</span>

• ラベルにリンクが付いた。
• ラベル毎にアイコンが付く。
• ラベルにクラス名"taglink"を追加

以上３点の変更をしています。

次は「p class='post-tag'」で検索してください。
トップページのラベルのコードです。

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

<data:label.name/>

</b:loop>
</p>

こちらは下記に変更して下さい。

<object class='tag-object'>
<p class='post-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;'>
<i aria-hidden='true' class='fa fa-tag'/>
<data:label.name/>
</a>
</b:loop>
</p>
</object>

記事ページと同じ変更に加え<object>で囲っています。こうしないと記事へのリンクがラベルの手前で切れてしまうからです。
詳しくは別記事にて解説しています。

CSSを追加する

「.post-tag」で検索して下さい。

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

元々入っている「.post-tag」のCSSを全部選択して下記を上書きしてください。

.post-tag{
padding:0!important;
margin:0 0 10px 0!important;
display:inline-block;
}
a.taglink:link{
color:#fff;/*未訪問リンクの色を白に*/
}
a.taglink:visited{
color:#fff;/*訪問済リンクの色を白に*/
}
a.taglink:active{
color:#fff;/*クリックして離されるまでのリンクの色を白に*/
}
a.taglink:hover{
color: #008ec2;/*カーソルがのった時のリンクの色*/
background: #fff;/*カーソルがのった時の背景の色*/
text-decoration:none;/*カーソルがのった時の下線をなくす*/
}
a.taglink {
font-size: 14px!important;
color: #fff;
background: #008ec2;
border: 1px solid #008ec2;
border-radius: 0.2em;/*角丸*/
padding: 0px 6px!important;
margin: 4px 0!important;
text-decoration: none;
display: inline-block;
}
.tag-object{
display:inline;/*ラベルを横並びに*/
}

これで完成です。
色を変えたいときは赤文字部分のカラーコードを変更してください。

カスタマイズ後のイメージ

記事ページはこんな感じです。マウスカーソルがのると色が反転します。ちょっといい感じになりましたね！

トップページはこうなります。同じくマウスカーソルがラベルに上にくると色が反転。
気になる点としては、少し大きくなるので３個以上ラベルをつけると日付の横には収まらないようになってしまいます。

まとめ

初期状態だとただラベルがあるだけでしたが、これでちょっとだけ便利になったのではないでしょうか？

記事ページの方はスペースが多いのでラベルが多くても特に気になりませんが、トップページは多くなるとタイトルと文章が下がっていってしまうのでちょっと見た目が悪くなります。ラベル名を短くしたり、ラベルの個数を１、２個しか使わないようにするなど気をつけた方がいいかもしれませんね。

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

Vaster2 カスタマイズ