こんにちは！前回の記事が大変好評だったので、今回はさらにデザイン案を増やしてお届けします！WordPressテーマ「Lightning」を使っている方なら、モバイルナビボタンのカスタマイズは一度はやりたい部分ですよね。今回は、簡単にコピペで実装できるCSSデザインを複数ご紹介します。
Lightningは初心者にも使いやすいテーマでありながら、カスタマイズ性も抜群。自分好みのデザインにカスタマイズできるのが魅力です。今回のデザインも、コーディングに自信がない方でも気軽に使っていただけるよう、シンプルにまとめました。
そして、もし「こんなデザインがいいな」という案があれば、手書きでもOK！ぜひわたしにお知らせください。あなたのイメージを実現するお手伝いができればと思っています。
1. テーマカラーを使った四角いモバイルナビボタン
下のデザインは、テーマカラーに合わせた四角いモバイルナビボタンです。シンプルですが、色使いを活かしてサイト全体と統一感を出せます。
プレビュー画像
/*モバイルナビボタン*/
.vk-mobile-nav-menu-btn {
background: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-btn-white.svg) center 50% no-repeat;
}
.vk-mobile-nav-menu-btn.menu-open {
background: url(/wp-content/themes/lightning/_g3/inc/vk-mobile-nav/package/images/vk-menu-close-white.svg) center 50% no-repeat;
}
.vk-mobile-nav-menu-btn.position-right {
right: 0;
}
.vk-mobile-nav-menu-btn, .vk-mobile-nav-menu-btn.menu-open {
top: 0;
left: auto;
border: none;
border-radius: 0;
width: 50px;
height: 50px;
background-size: 85%;
background-color: var(--vk-color-primary);
}
2. テーマの文字色を使った丸いモバイルナビボタン
こちらは、テーマの文字色を活かした、丸い大きなモバイルナビボタンです。大きなボタンで視認性も抜群なので、訪問者がすぐにメニューにアクセスできるようになります。
プレビュー画像
/*モバイルナビボタン*/
.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
background-size: 80%;
border-radius: 50%;
width: 55px;
height: 55px;
border-color: var(--vk-color-text-body);
top: 15px;
}
.vk-mobile-nav-menu-btn.position-right {
right: 15px;
}
3. 「メニュー」と表示される丸いナビボタン
こちらは、ボタンに「メニュー」という文字が表示されるバージョンです。シンプルなボタンですが、ユーザーにとって非常にわかりやすいUIとなっています。
プレビュー画像
/*モバイルナビボタン*/
.vk-mobile-nav-menu-btn,
.vk-mobile-nav-menu-btn.menu-open {
background-size: 45%;
border-radius: 50%;
width: 55px;
height: 55px;
border-color: var(--vk-color-text-body);
top: 15px;
text-indent: 0;
font-size: 12px;
text-align: center;
padding-top: 10px;
background-position-y: 25px;
letter-spacing: 0;
}
.vk-mobile-nav-menu-btn.position-right {
right: 15px;
}
4. 依頼もお待ちしています！
わたしの記事を気に入っていただけたら、カスタマイズの依頼もぜひご検討ください！カスタムデザインや、あなたのアイデアを形にするお手伝いができると嬉しいです。
Lightningを使ってもっと素敵なサイトを作りたい方、ぜひこのCSSデザインを使って、簡単にモバイルナビボタンをカスタマイズしてみてくださいね！
