【WordPresss】テーマ「LION MEDIA」のスマホでのピックアップ記事の表示を改善する

【WordPresss】テーマ「LION MEDIA」のスマホでのピックアップ記事の表示を改善する

今回はLION MEDIAのカスタマイズについてです。

以前、メニューの改善方法を紹介しましたが、今回は注目記事の表示方法を改善したいと思います。

【WordPress】テーマ「LION MEDIA」のメニューを改善する


スポンサーリンク

注目記事を縦に並べる

ピックアップ

LionMediaではTOPピックアップ記事という項目があります。

これはカスタマイズの基本機能設定から設定することができます。

”スマホでは非表示にする”にチェックを入れれば表示されなくなりますが、これではTOPページがちょっと寂しいので、チェックは外しておきます。

before

しかし、スマホ表示ではピックアップ記事が横に並べられてしまいます。

ユーザーに横にスワイプしてもらわないと表示されません。

メニューのときもそうでしたが、LION MEDIAは横に並べたがるようです。

ちょっと見ずらいので改善しましょう。

CSSを追加

カスタマイズ → カスタムCSSから以下のコードを入力します。

@media only screen and (max-width: 767px){
    .key__item {
        height: 210px;
    }
    .key__list {
        display: flex;
        flex-direction: column;
    }
}

key_itemの高さは自由に設定してください。

displayをflexにして、flex-directionをcolumnに設定することで要素を縦に並べます。

さいごに

after

これで、トップページの一面にピックアップ記事が表示されるようになりました。

ぜひ参考にしてみてください。


スポンサーリンク

WordPressカテゴリの最新記事