今回はLION MEDIAのカスタマイズについてです。
以前、メニューの改善方法を紹介しましたが、今回は注目記事の表示方法を改善したいと思います。
スポンサーリンク
注目記事を縦に並べる
LionMediaではTOPピックアップ記事という項目があります。
これはカスタマイズの基本機能設定から設定することができます。
”スマホでは非表示にする”にチェックを入れれば表示されなくなりますが、これではTOPページがちょっと寂しいので、チェックは外しておきます。
しかし、スマホ表示ではピックアップ記事が横に並べられてしまいます。
ユーザーに横にスワイプしてもらわないと表示されません。
メニューのときもそうでしたが、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に設定することで要素を縦に並べます。
さいごに
これで、トップページの一面にピックアップ記事が表示されるようになりました。
ぜひ参考にしてみてください。
スポンサーリンク