Blogger Labo：【Vaster2】ラベル・ラベルアイコンのカスタマイズ

このページでは、Vaster2のラベル・ラベルアイコンのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


ラベルのカスタマイズ



ここでいうラベルとは、トップページと記事ページに表示されるラベルを指す。

ラベルリスト（カテゴリ）は別のページで説明しているので、このページを参照して欲しい。

トップ・記事ページのラベルのCSS


 PC版のトップ・記事ページのラベルの設定 

.post-tag{
   font-size:14px !important;　文字サイズ（14px）
   background:$(articlelist.posttag.color);　表示欄の背景色（テーマデザイナー設定）
   padding:1px 4px !important;　表示欄の上下・左右の内側の余白
   color:$(articlelist.posttag.font);　文字色（テーマデザイナー設定）
   margin-top:0;
   display:inline-block;
}

 スマホ版のトップ・記事ページのラベルの設定 　「/*   レスポンシブデザイン」以下にある

.post-tag{
   font-size:12px !important;　文字サイズ（12px）
   padding:1px 4px !important;　表示欄の上下・左右の内側の余白
   line-height: initial !important;
}

※（）内は初期値

上記が Vaster2のトップ・記事ページのラベルのCSSに説明を加えたもの。

基本的には「.post-tag{」で検索して中身を書き変えていけば、好みに合わせて変更できる。

なお、余白や背景色はラベル表示欄についているため、初期設定ではラベル単体に背景色を設定するのは難しい。

また、スマホ版の設定には余白と文字サイズが設定されているので、こちらも変更する必要がある。

ラベルにリンクをつけて装飾する


ラベルにリンクをつけた装飾したりする方法は、既に詳しく説明しているサイトがある。

下記リンクのサイトが分かりやすいと思うので、そちらで参照してほしい。

・父ちゃんの日々ログ

ラベルアイコンのカスタマイズ



ラベルアイコンとは、ラベル名の前についている「」のタグマークのこと。

これらはフォントアイコンと呼ばれており、設定を書き換えれば好きなものを使うことができる。

トップページのラベルアイコンを変更する


<!--TOP カテゴリ アーカイブの時-->以下

中略

<p class='post-tag'>
   <i aria-hidden='true' class='fa fa-tag'/>　※赤字の部分を変更する

トップページのラベルアイコンは「<!--TOP カテゴリ アーカイブの時-->」以下の「tag」になる。

「fa-tag」で検索すると上下に2箇所引っかかるが、この上の方がトップページの表示となる。

この「tag」を好みのアイコンの指定にすれば変更が可能になる。

備考：フォントアイコン一覧

トップページのラベルアイコンを消す


<!--TOP カテゴリ アーカイブの時-->以下

中略

<p class='post-tag'>
   <i aria-hidden='true' class='fa fa-tag'/>　※赤字の部分を消す

トップページのラベルアイコンを消すには「<i aria-hidden='true' class='fa fa-tag'/>」を削除すればいい。

記事ページのラベルアイコンを変更する


<!--記事ページの時-->以下

中略

<span class='post-tag'>
   <i aria-hidden='true' class='fa fa-tag'/>　※赤字の部分を変更する

トップページのラベルアイコンは「<!--記事ページの時-->」以下の「tag」になる。

「fa-tag」で検索すると上下に2箇所引っかかるが、この下の方が記事ページの表示となる。

この「tag」を好みのアイコンの指定にすれば変更が可能になる。

なお、消し方はトップページと同じなので説明は割愛する。

備考：フォントアイコン一覧