Blogger Labo：【Vaster2】関連記事のカスタマイズ

このページでは、Vaster2の関連記事のカスタマイズ方法を説明する。

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

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


関連記事の見出しのカスタマイズ


関連記事の見出し

関連記事の見出しのCSS


 関連記事の見出しの設定 

#related-posts h2{
   padding: .5em .75em;　上下・左右の余白（文字の開始位置と帯の幅）
   margin-bottom: 30px;　下外側の余白（サムネイルまでの間隔）
   background:$(entryh2.background);　背景色
   color:$(entryh2.color);　文字色
}

上記が Vaster2の関連記事の見出しのCSSに説明を加えたもの。

基本的には「#related-posts h2{」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

ちなみに、関連記事の見出しを記事のh2と同じ設定にしても見た目にズレが生じる。

詳しい原因は分からないが、見た目を合わせるには数値をいじって微調整すればよい。

見出しを装飾する


見出しのデザインについては下記のサイトを参考にすると分かりやすい。

・サルワカ（CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選）

関連記事の記事タイトルのカスタマイズ


関連記事の記事タイトル

関連記事の記事タイトルのCSS


 関連記事の記事タイトルの設定 

#related-title {
   font-size:12px;　記事タイトルの文字サイズ
   width:140px;　記事タイトルの横幅
   height: 70px;　記事タイトルの高さ
   font-weight:700;　記事タイトルの文字の太さ
   margin-right: 5px;　記事タイトルの右の余白
   margin-left: 5px;　記事タイトルの左の余白
   box-sizing: border-box;
}

上記が Vaster2の関連記事の記事タイトルのCSSに説明を加えたもの。

基本的には「#related-title {」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

関連記事のリンクのカスタマイズ


関連記事のリンク

関連記事のリンクのCSS


 関連記事のリンク設定 

#related-posts a{
   color:#666;　記事タイトルの文字色
   transition:0.3s;　時間的変化
}

 カーソル通過時の関連記事のリンク設定 

#related-posts a:hover{
   color:$(related.color);　記事タイトルの文字色
   background:$(related.background);　記事の背景色
}

上記が Vaster2の関連記事のリンクのCSSに説明を加えたもの。

基本的には「#related-posts a{」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

関連記事のサムネイルのカスタマイズ


関連記事のサムネイル

関連記事のサムネイルのCSS


 関連記事のサムネイルの設定 

#related-posts .related_img {
   margin:5px;　サムネイル周辺の余白
   width: 140px;　サムネイルの横幅
   height: 100px;　サムネイルの高さ
   transition:all 300ms ease-in-out;　時間的変化
}

上記が Vaster2の関連記事のサムネイルのCSSに説明を加えたもの。

基本的には「#related-posts .related_img {」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

画像のサイズ比を変えないようにする


【方法】

・「#related-posts .related_img {」で検索
・「#related-posts .related_img {}」の中に「object-fit: cover;」を追記

サムネイルと記事タイトルの隙間を埋める


【方法】

・「#related-posts .related_img {」で検索
・「#related-posts .related_img {}」の中に「display: inline-block;」を追記

参考：Vaster2カスタムブログ

画像に枠線をつける


【方法】

・「#related-posts .related_img {」で検索
・「#related-posts .related_img {}」の中に「border:値;」を追記

備考：スタイルシートリファレンス（border）

その他


関連記事の一列の件数を変える


【方法】

・記事ページの幅を広げる
・サムネイル・タイトルの幅を小さくする

関連記事の見出しタイトルを変える


【方法】

・「この記事の関連記事」で検索する
・その下辺りにある「この記事の関連記事」の文字列を変える

関連記事の表示件数を変える


【方法】

・「<!-- 関連記事-->」で検索する
・その下辺りにある「var maxresults=8;」の数値を変える（初期は8件）