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

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

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

記事リストのカスタマイズ

記事リスト

記事リストとは、トップページに並ぶ記事の一覧を指す。

別に呼び名があるのかも知れないが、CSSで「article-list」となっているので この名で呼ぶ。

記事リスト全体のCSS

上記が Vaster2の記事リスト全体のCSSに説明を加えたもの。

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

ただ、このCSSは<style>の下の方にあるため、場所が分かりづらい。

スマホ版の設定は、PC版の設定の下にある「@media screen and (max-width: 768px){}」で囲まれたものになる。

また、記事リストの中の設定は別であり、その内容は下記のものになる（場所が大きく異なるので注意）。

記事リストの中のCSS

上記がVaster2の記事リスト全体のCSSに説明を加えたもの。

最初の設定では、内側の余白ぐらいしか変更する場所はないと思う。

記事リストの影を消す

【方法】

・「.post-outer{」で検索
・「.post-outer{}」の中の影をつけるコードを「box-shadow:none;」とする
　・もしくは影をつけるコードを消す

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

記事リストの幅を変更する

【方法】
・「.post-outer{」で検索
・「.post-outer{}」の中に「width:数値;」を追加する（画像は700pxで設定したもの）
・スマホ版の「.post-outer{}」の中に「width:auto;」を追加する
　・スマホ版で指定したい値があればそれでも良い

※PCのみで幅を設定するとスマホ表示が崩れるので、スマホ版には自動調整のコードを追加する

参考：Vaster2カスタムブログ

背景色を設定する

【方法】
・「.post-outer{」で検索
・「.post-outer{}」の中の「background-color:色;」に好きな色を設定する（画像は黄色に設定）
・スマホ表示を別にしたければ、スマホ版の「.post-outer{}」に「background-color:色;」を設定する
　・スマホ版の指定がない場合は、PC版と同じ設定になる

備考：カラーコード