過去の記事で、ピックアップ一覧をカスタマイズで実装しました。↑↑
ただ、上で紹介している実装だけじゃスマホで表示したときに悲惨になります。すみません（笑）
そこで今回は、このピックアップ記事一覧をスマホでの表示に対応させたいと思います！
目次
- ピックアップ記事に施したカスタマイズ内容を、タブレット表示、PC表示のみに適用する。
- スタイルを調整する
- まとめ
１．ピックアップ記事に施したカスタマイズ内容を、タブレット表示、PC表示のみに適用する。
開発者ツールで画面幅を変更しながら確認すると、どうやら表示がおかしいのはスマホで表示（画面の横幅が482px以下）のときだけのようでした。
そこで、メディアクエリを用意して、その中にカスタマイズ内容を移動させます。
/*style.css*/
/*ピックアップ記事一覧のカスタマイズ内容を・・・*/
/*.is-style-pickup li{
width: 100%;
background-color: #f0f0f0;
}*/
/*以下省略*/
@media only screen and (min-width: 482px) {
/*ここにカスタマイズ内容を移動する*/
.is-style-pickup li{
width: 100%;
background-color: #f0f0f0;
}
/*以下省略*/
}
これで、タブレットとPC表示の時だけ、カスタマイズが適用されるようになります。
２．スタイルを調整する
あとはスマホ表示のスタイルを調整するだけです。以下の内容コピペでOK。注意するのは、メディアクエリの外に書いてくださいということです！
/*style.css*/
.wp-block-latest-posts__featured-image.alignleft {
width: 100%;
margin-bottom: 0px;
}
.wp-block-latest-posts__list.wp-block-latest-posts.is-style-pickup li {
background-color: #f0f0f0;
}
.wp-block-latest-posts__list.wp-block-latest-posts.is-style-pickup li a {
line-height: 2.5rem;
letter-spacing: 0.3rem;
padding: 30px 20px 30px 20px;
margin: 0px;
font-weight: bold;
}
すると、表示がこうなります！
まとめ
これで違和感なくスマホでも表示されるようになりました。カスタマイズするとスマホ表示も考えないといけないので注意が必要でしたね！
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
