X-T9 のナビゲーションブロックのスマホ表示をカスタマイズしてみた

ナビゲーションブロックのスマホ表示で気になった点

WordPress テーマ X-T9 のサイトに置いたナビゲーションブロックをスマホで表示すると、こんなかんじになります。

人それぞれ好みが違うし、どのように感じるかも違うのですが、デフォルトのままだと、私は以下の点が気になりました。

フォントがもっと大きいと見やすいなぁ…
閉じるボタンが小さくて、画面上端ぴったりの位置にあって、押しづらいなぁ…

カスタマイズしたナビゲーションブロック

そこで、CSS でカスタマイズして、こんなふうにしてみました。

フォントを大きくして、英語表記を右端に移動しました。
閉じるボタンを大きくして、上に余白を持たせました。

このサイトをスマホでご覧いただくと、カスタマイズしたナビゲーションブロックをご覧いただけます。

カスタマイズのコード

カスタマイズに使った CSS のコードはこちら↓です。

.has-modal-open .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation-item__content {
    display: flex;
    justify-content: space-between;
    font-size: 1.35rem;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}
.has-modal-open .wp-block-navigation .wp-block-navigation-item__description {
    font-size: 1rem;
}
.has-modal-open .wp-block-navigation__responsive-container-close {
    top: 15px;
}
.has-modal-open .wp-block-navigation__responsive-container-close svg {
    height: 32px;
    width: 32px;
}

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら