ナビゲーションラベルで出来ること

投稿日: カテゴリー: Wordpress

若干複雑になりがちな部分をなるべく簡単にして、メニューのデザインを変えてみよう、と思う。

PHPを触ったり、テーマデザインの根幹となるCSSを触ったり…は、それはそれで勿論面白い。
が、今回は【ナビゲーションラベル】と若干のCSSでイメージをどこまで変えられるのか、という感じで作業を進めてみる。
前回の記事の続き的な作業ね。

メニューの各【ナビゲーションラベル】には以下を入力。

で、上記のクラスのCSSは以下。

background-imageには、各メニューの左側にくるラインを画像化して配置してみた。
もちろん、border-leftでも線は入れられるが、クラスの【.menu-styling02】と【.menu-styling03】のheightのHover時の挙動を制御できずに検証して修正するのが面倒なので画像で処理してみた。

結果、こんな感じ。下のサンプルではテーマはAvadaで製作してみたが、恐らくどのようなテーマでもこんな感じで出来る。

一番右にあるお問い合わせの「電話番号」はPHPを触っている。
Avadaの場合は、【templates】フォルダ内の【header-1.php】がメニューに関する記述のようなので、フロートで絶対に右端に表示されるように指示している。
PHPへの記述はこんな感じ。

上記のPHPで追加したのはこの部分。

でこのidのために追加したcssは…

で一定幅からは表示させなくしている。

PHPを触ってコンテンツを追加するならTEL番を直に追加せずに、ウィジェットエリアを追加してコンテンツはウィジェットで管理するのも手かもしれない。
と、今思っちゃった。