【DIVER】固定記事を横並びに表示する方法【カスタマイズ】

f:id:aoi-affiliate:20190108102835p:plain

「DIVER」のカスタマイズ｜固定記事を横並びに表示する

WordPressの有料テーマ「DIVER」では固定記事を縦リストから横並びに表示する方法を解説します。

「DIVER」での固定記事の表示方法はこちら。
tan-taka.com

【Before】カスタマイズ前の「DIVER」固定記事の表示

f:id:aoi-affiliate:20181222155347p:plain

現在の「DIVER」では、トップページに固定記事を表示する際に縦リストでしか表示できません。

左側にアイキャッチ画像、右側に記事タイトル、日付、カテゴリー、記事抜粋などが表示されます。

縦リストで表示してしまうと、トップページを開いた時にスクロールしないと新着記事が見えなくなってしまいます。スマホ表示の場合も何度もスクロールしないと記事が読めないとなると読者は少し苦痛ですよね。

また、固定記事は注目記事としてトップページに表示させたい人以外にも、同じジャンルの記事をまとめた記事（まとめ記事）を表示させたい人もいますよね。

トップページにまとめ記事やカテゴリー別記事を表示させることでブログでもサイト化することができ、「あの記事どこにあったかな？」「こんな記事はないのかな？」など、読者が目的の記事を探しやすいサイト作りができると思います。

そして、まとめ記事やカテゴリー別記事を固定記事にするということは、日付、カテゴリー、抜粋記事などはあまり必要ないと思ったので、それらも非表示にできないかと「DIVER」の開発者の方に相談してみました。

【After】カスタマイズ後の「DIVER」固定記事の表示

f:id:aoi-affiliate:20181222155309p:plain

結果、私が思い描いていたような横並びでアイキャッチ画像と記事タイトルのみの固定記事を表示させることができました。

何度も試行錯誤してくださり、3回目でやっと綺麗に表示されるように改良されました。ありがとうございました

現在は3つの固定記事を表示していますが、横並びにすることで固定記事が省スペース化して、スクロールなしで記事一覧が見えるようになりました。

ソースコード

@media screen and (min-width:599px){
 ul.sticky-post-wrap {
    display: -webkit-flex;
    display: flex;
    -js-display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

li.sticky-post-box+li.sticky-post-box {
    margin-left: 10px;
}

.sticky-post-box .post_thumbnail {
    width: 100%;
    margin: 0 0 10px 0;
}

}

.sticky-post-box .post-date,
.sticky-post-box .post-tag,
.sticky-post-box .post-substr {
    display: none;
}

ul.sticky-post-wrap {
    width: 100%;
}

.sticky-post-box{
    display:block;
}

こちらのコードをWPダッシュボード → 「外観」 → 「カスタマイズ」 → 「追加CSS」内にコピペしてください。コピペしたら「公開」ボタンを押して反映させてください。

※こちらのソースコードは「DIVER」開発者の方から教えていただいたものです。

CSS編集をすることで、既存の設定などによってデザインや機能が変わったり崩れたりする可能性があります。当ブログではCSS編集で起きたいかなる問題に対して一切の責任を負えませんので、あらかじめご了承いただき自己責任での編集をよろしくお願いします。