過去の記事で、ピックアップ一覧をカスタマイズで実装しました。↑↑

ただ、上で紹介している実装だけじゃスマホで表示したときに悲惨になります。すみません(笑)

そこで今回は、このピックアップ記事一覧をスマホでの表示に対応させたいと思います!

目次

  1. ピックアップ記事に施したカスタマイズ内容を、タブレット表示、PC表示のみに適用する。
  2. スタイルを調整する
  3. まとめ

1.ピックアップ記事に施したカスタマイズ内容を、タブレット表示、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表示の時だけ、カスタマイズが適用されるようになります。

2.スタイルを調整する

あとはスマホ表示のスタイルを調整するだけです。以下の内容コピペで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;
}

すると、表示がこうなります!

PC版
スマホ版

まとめ

これで違和感なくスマホでも表示されるようになりました。カスタマイズするとスマホ表示も考えないといけないので注意が必要でしたね!

デモサイト↓↓
Twenty Twenty-One デモサイト


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP