Blogger Labo:【Vaster2】トップページの記事リストのカスタマイズ

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

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

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


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


記事リスト

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

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

記事リスト全体のCSS


 PC版の記事リストの設定 

.post-outer{
    background-color:#ffffff; 記事リストの背景色(白)
    border:1px solid #e5e5e5; 記事リストの枠線(1px)
    box-shadow:1px 1px 2px rgba(0,0,0, .4); 記事リストに影をつける
    margin-bottom:20px; リストの下外側の余白(リストの間隔)
}

 スマホ版の記事リストの設定 

@media screen and (max-width: 768px){
.post-outer{
    margin-bottom:10px; リストの下外側の余白(リストの間隔)
    box-shadow:none !important; 影なし
}

※()内は初期値

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

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

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

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

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

記事リストの中のCSS


 カーソル通過時の記事リストの設定 

.article-list:hover{
   background-color:$(articlelist.background.color); カーソル通過時の背景色(テーマデザイナー設定)
}

 記事リストの中の全体の設定 (※<style>以下にあるコード)

.article-list{
    border:none; 罫線の設定(なし)
    margin-bottom:0; 下外側の余白(なし)
    padding:10px; 上下左右の内側の余白(10px)
    box-sizing:border-box;
}

※()内は初期値

上記が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版と同じ設定になる

備考:カラーコード