1.5流はトップページをサイト化しているのですが、新着記事を大きなサムネイルで横並びにしてみることにしました。もともと大きなサムネイルで並べたいのをいじるのが面倒で、小さなサムネイルを使って縦並びでごまかしていたのですがついに重い腰を上げました。
新着記事って一番目を引いてほしいので、PCやタブレットなどの大きな画面では横に2記事、スマホでは1記事並ぶように設定していきます。
まずはショートコードを大きなサムネイルに設定する
記事をどれだけ並べるか？はさておき、新着記事って一番目を引いてほしいので、PCやタブレットなどの大きな画面では横に2記事、スマホでは1記事並ぶように設定していきます。
ショートコードは書き方によって表示が変わってくるので詳細はCocoonの説明を確認してください。
横並びになるようにCSSに追記する
前のコードを記載しただけだと新着記事表示（大きなサムネイル）はこのように表示されます。
そのまま横に並んでくれると大変ありがたいのですがそういうわけにはいかないらしいので、テーマファイルエディタのスタイルシートにCSSを追記します。large_thumbを選んだので、下記表記ですが、large_thumb_onを選んだ場合はlarge-thumb-onに書き換えれば同様に利用可能です。
/************************************
** 新着記事横並び表示
************************************/
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 50%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
ちなみに私は2個並べたいので50%、50%、100%で設定していますが、仮に大画面で4個並べたい場合は25%にするなど%を変更すれば横に並べる数を変更することが可能です。
上記のようにCSSに追記すると、ちゃんと横並びで表示されました。ちなみに横幅の狭いスマホでは縦並びになります。ただ最近のスマホは解像度も高いので、新着記事は横並びに表示されてることもあるんですよね。
最近はスマホでの閲覧の方が多いので、パソコンブラウザでの閲覧に力を注ぐより、スマホに注力しろよって感じがしなくもないですけど…（笑）
匙加減が難しい～！
コメント