今回はVaster2のトップページや記事ページにあるラベルのデザインについてのお話です。
デフォルトの状態では青のバックに白文字。そのままでも問題はありませんがもう少し自分好みに変える方法を紹介していきますね。
カスタマイズにはテンプレートを変更する必要があるのでバックアップは忘れずにとっておいてください。
カスタマイズの前の注意点
ラベルのデザインはトップページも記事ページも「post-tag」という共通のクラス名のCSSで管理されています。
同じように変更してしまうと、特にトップページのデザインが崩れる可能性があるのでクラス名別にしておいた方がいいかもしれません。
背景色を変える程度など、大幅に変えない場合はそのままで大丈夫です。
クラス名を別にする場合
まず「p class='post-tag'」で検索してください。
これが記事ページのラベルのクラス名です。トップページの方は「span class='post-tag'」。
span class='post-tag-t'
わかりやすいように文字を足してクラス名を変えます。例は「-t」を追加。toppageの頭文字のtですね。
次はCSSをコピーしてクラス名を変えましょう。
２カ所あります。
「.post-tag」で検索。以下のものが出てくるはずです。
.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}
まずひとつ目のCSS。これの真下にコピーして１行目のクラス名を「.post-tag」から「.post-tag-t」に変えます。font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}
.post-tag{
font-size:12px !important;
padding:1px 4px !important;
line-height: initial !important;
}
ふたつ目はレスポンシブ用のCSS。こちらも同じようにコピーしてクラス名を変えましょう。font-size:12px !important;
padding:1px 4px !important;
line-height: initial !important;
}
これでトップページと記事ページのラベルのデザインが切り分けられました。
トップページのラベルをカスタマイズする場合は「.post-tag-t」
記事ページのラベルをカスタマイズする場合は「.post-tag」
クラス名はとりあえずで決めてるので好きなものに変えてかまいません。
ラベルのバックの色を変える
「.post-tag」で検索します。クラス名を個別にした場合は変えたい方を変更しましょう。
.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}
background:#008ec2;がバックの色を決めています。font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;
margin-top:0;
display:inline-block;
}
color:#fff;はフォントの色。今は白になっているのでバックの色次第では変える必要があるでしょう。
カラーコードを「#000」に変更すれば黒バックに白文字になります。
カラーコードを「#ff0000」なら赤のバックです。
ちなみにこの６桁のカラーコードは画面用の光の三原色であるRGBの値なのですが、6桁のうち２桁ずつがそれぞれ[R][G][B]に対応しています。２桁が同じ値である場合は省略可能で、黒は本来#000000ですが#000でも表記可能です。白も同じく#ffffffなので#fffでＯＫ。
赤も#ff0000を#f00としても赤になります。
ラベルのフォントサイズを変える
.post-tag{
font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;margin-top:0;
display:inline-block;
}
font-size:14px !important;がフォントのサイズです。font-size:14px !important;
background:#008ec2;
padding:1px 4px !important;
color:#fff;margin-top:0;
display:inline-block;
}
フォントサイズだけを大きくするとバックとの比率が悪くなるので、バックも少し広げてあげます。
font-size:20px !important;
padding:6px 6px 3px !important;
padding:6px 6px 3px !important;
ラベルとラベルの間をわかりやすくする
ラベル同士は半角スペースで分かれているだけなのでもう少しわかりやすくした方がいいので変更しましょう。
<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>
赤文字の行の位置を変えます。<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'>
<i aria-hidden='true' class='fa fa-tag'/>
<data:label.name/>
</b:loop>
</span>
<b:loop values='data:post.labels' var='label'>
<i aria-hidden='true' class='fa fa-tag'/>
<data:label.name/>
</b:loop>
</span>
まとめ
この記事では、「ラベルの背景色」「フォントサイズの変更」「ラベル間をわかりやすくする」カスタマイズ方法をご紹介させてもらいました。ラベルを個別に切り分けるデザインも紹介したかったのですが少し記事が長くなったので別の記事に書きますね。
今日のお話はここまで！
それではまたお会いしましょう〜
