記事一覧デザインをカスタマイズ！アイキャッチの上にタイトル表示

トップページの記事一覧デザイン。これはサイトの顔ですよね。

どうしても同じテーマだと似たりよったりしてしまうので、がらっと印象を変えてみました。

BEFORE

AFTER

カスタマイズを始める前に

参考カスタマイズは自己責任。ぼくはこんな風に思っています。

カスタマイズの準備

JINには記事一覧のデザインが数種類あります。

そのため、まずは記事一覧デザインを指定するものに変更します。

外観＞カスタマイズ＞トップページ設定

カスタマイズのコードを入力する場所を決める

2つの方法でカスタマイズコードを追加できます。

はじめてカスタマイズするかたは、「追加CSS」がおすすめです。

詳しいやり方はこちらを参考にしてください。

参考ブログのカスタマイズを加速させる「追加CSS」の追加方

カスタマイズのコード

.post-list-mag .post-list-item .post-list-inner .post-list-thumb,
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-thumb {
    position: relative;
}
.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-date,
.post-list-meta .post-list-title,
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-date {
    color: #fff!important;
}
.post-list-mag .post-list-meta .post-list-cat,
.post-list-mag-sp1col .post-list-meta .post-list-cat {
    background-color: rgba(255,255,255,0.38)!important;
}
.post-list-mag .post-list-item .post-list-inner .post-list-thumb:after,
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-thumb:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    border-radius: 2px;
}
.post-list-mag .post-list-item .post-list-inner .post-list-meta,
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta {
    position: absolute;
    bottom: 0;
}
.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat {
    top: -20px;
}
@media (min-width: 768px){
a.post-list-link {
    margin-bottom: 0;
}}
@media (max-width: 767px){
a.post-list-link {
    margin-bottom: 0;
}
.post-list-mag-sp1col .post-list-item .post-list-inner .post-list-meta .post-list-cat {
    top: -20px;
}
.post-list-mag .post-list-item .post-list-inner .post-list-meta {
    padding: 4px 8px;
    padding-bottom: 14px;
}}

カスタマイズの締め

カスタマイズコードを書き込んだら、最後に必ずキャッシュ削除して更新をしましょう。 これを忘れてしまうとせっかくカスタマイズしたのにデザインに反映されません