Twenty Twenty-Oneはスマホで見てもPCで見てもレイアウトがさほど変わらないように、ワンカラムのWebサイトとなっていますね（サイドバー等がなく、一列だけのレイアウト）。ただPCでホームページを見る際は、おそらく縦よりも横が長い画面で見ると思います。その場合は、横に並べてパッと内容が確認できるようにしたほうがいいのではないかな～と思いました。
そこで、今回はもともと1カラムレイアウトの新着記事一覧を横に並べてみることにしました。正直これはこのテーマのみならず、いろんなテーマに応用できると思います。
目次
- 新着記事ブロックを調整する
- 横並びにするため追加CSSでカスタマイズする
- まとめ
１．新着記事ブロックを調整する
今回は、以下のように見栄えを変えてみたいと思います。
- 3件まで見えるようにする。
- サムネイル画像、タイトル、日付を表示する
- 横並びにする。
そこで初めに、新着記事ブロックを編集して、「3件まで表示」と「サムネイル画像、タイトル、日付の表示」を設定します。
新着記事ブロックをクリックすると、右サイドバーの「ブロック」タブが表示されると思います。これを、以下のように編集します。
- スタイル ＞ 「区切り」
（横並びにしたときの見栄えがいいのでこれを採用） - 投稿コンテンツ設定 ＞ 投稿コンテンツ：OFF
- 投稿メタ設定 ＞ 投稿者名：OFF
- 投稿メタ設定 ＞ 投稿日：ON
- アイキャッチ画像設定 ＞ アイキャッチ画像を表示：ON
（サイズは「大」でいったんOK。見栄えが悪ければ調整。） - 並び替えと絞り込み ＞ 項目数：３
- 高度な設定 ＞ 追加CSSクラス：cus-newpost-list
（すでに何か書いてある場合は、半角スペースを空けてcus-newpost-listを追記）
これで記事編集画面での設定はOKです。
２．横並びにするため追加CSSでカスタマイズする
１．で最後に設定した追加CSSクラスを使用して、横並びになるようにCSSをカスタマイズします。
メニュー「外観」 ＞ 「カスタマイズ」 ＞ 「追加CSS」を開き、以下のCSSを追記してください。
@media only screen and (min-width: 822px) {
*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) .cus-newpost-list {
max-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li .cus-newpost-list li {
display: inline-block;
width: 30%;
vertical-align: top;
margin-left: calc(10% / 4);
border-bottom: 0px;
}
}
気を付けたいのは1行目と3行目です。スマホの場合みにくくなってしまうので、横並び表示はPC・タブレットでのみ表示されるようにしています（1行目）。また、新着記事エリアのみ横幅を広げているのですが、ホームページを閲覧しているデバイスの横幅によって計算するようにしています（3行目）。例えば3行目で「1240px」と固定値を設定してしまうと、PCではきれいに表示されますがタブレットで表示したときに幅が広すぎて表示しきれません。
あと余談でセレクタがだいぶ長くなっていますが、!importantをなるべく使いたくないため全指定しています。
３．まとめ
最終的に、こんな見た目になりました。
横幅が広い画面で見るには、こちらのほうがスクロールする手間も省けていいかなと思います！
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
