diviでこんな感じのナビを作る

Diviのメニューをセクションの背景の上に表示させる方法

こんにちは、ナオミです!

diviでこんな感じのナビを作る

今日はこんな感じのメニューが背景画像の上にくるデザインをDiviで作って見たいと思います。

早速始めます。

Diviのメニューをセクションの背景の上に表示させる方法を動画でご覧になりたい方はこちらからどうぞ!

Diviの固定ナビゲーションバーを無効にする

Diviの使い方、diviの固定ナビゲーションバーを無効にする

まずはWordPressのダッシュボードからDiviのオプションに行きまして、固定ナビゲーションバーを無効にします。

こうすることによって、メニューがスクロールと共についてくるのを防げます。

Diviのテーマカスタマイザー

次にメニューのカスタマイズです。

Diviのテーマカスタマイザーを開きます。

そして、『ヘッダーとナビ』→『第一メニューバー』に行きます。

Diviの使い方、ヘッダーナビのカスタマイズ

メニューの背景色を透明にする

Diviの使い方、ナビゲーションメニューの背景色を透明にする

セクションに背景画像をセットする

Diviのナビゲーションに背景画像を入れる

ここまでのステップがちゃんと出来ていれば、このように表示されます。

好きな背景画像をセットします。

フォントの色を変えたり大きくして見やすくしましょう。

Diviメニューに背景をセットする方法

これで完成です。

セクションを使いこなせ!

セクションは1からページを作る際に一番最初に設定する要素であり、Diviでページのデザインする時の基礎になります。セクションを使いこなすことで、行やモジュールをより際立たせることができます。

本記事の他にもセクションについて記事を書いていますので、ぜひご覧ください。

Diviのセクションを分ける『Dividers』の使い方

Diviの三つのセクションのタイプ

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通