Blogger Labo：【Vaster2】トップページのサムネイルのカスタマイズ

このページでは、Vaster2のトップページのサムネイルのカスタマイズ方法を説明する。

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

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


トップページのサムネイルのカスタマイズ


トップページのサムネイル

トップページのサムネイルのCSS


 トップページのサムネイルの設定 

.article-list img{
   float:left;　左に寄せる
   width:300px;　サムネイルの横幅（300px）
   height:185px;　サムネイルの高さ（185px）
   padding-right:20px;　右の余白（20px）
}

※（）内は初期値

上記が Vaster2のトップページのサムネイルのCSSに説明を加えたもの。

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

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



.article-list img{
   float:left;
   width:300px;
   height:185px;
   padding-right:20px;
   object-fit: cover;　/*　画像サイズ比を変えない　*/
}

※赤字の部分を追加する

「.article-list img{」を検索して、上記のようにコードを書き加える。

なお、「object-fit: cover;」は画像をサムネイルのサイズでトリミングしてはめ込む要素らしい。

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

画像に枠線をつける



.article-list img{
   float:left;
   width:300px;
   height:185px;
   border: 2px #ccc solid;　/*　画像の周りの枠線　*/
   margin-right:20px;　/*　右の余白　*/
}

※上記のように書き換える

「.article-list img{」を検索して、上記のようにコードを書き換える。

上記のコードでは「padding-right」を消して、「margin-right」と「border」を書き加えている。

「padding-right」を「margin-right」とすることで余白を枠外に設けることができる。

なお、画像のサイズ比を変えたくない場合は、上で説明したサイズ比のコードを書き加える。

画像なしの記事に代替サムネイルを設定する


代替サムネイルを設定する方法は、既に詳しく説明しているサイトがある。

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

・プゥ二郎さんの日記