建設現場デジタルサイネージの「モニたろう」と「モニすけ」ブログ

建設現場に大型LEDビジョンや液晶ディスプレイで現場のICT化を促進する提案を行うヤマト広告公式ブログ

ヤマト広告公式ブログ
大型LEDビジョンモニたろうや液晶モニターモニすけなど
デジタルサイネージ提案で建設現場のICT化を促進します!

jQueryやWordPressで現在地のナビゲーションの色を変える方法。

f:id:yamato-agency88:20160528082424j:plain


こんにちは。
ユーザー視点からのUIを気にかけられる web制作の宇垣です。

だんだんじとっとして夏も近づいてきているように感じます。
今回だけ、土曜日も更新です!

カスタマイズ第4弾

今回は、現在開いているページに対応するナビゲーションの色を変えようという目的です。

f:id:yamato-agency88:20160528082638g:plain

たとえばこのような。
トップページにいるときはナビのトップ部分を色を変えたりデザインを変えたり。閲覧しているユーザーにとって自分がどのページを見ているかがわかりやすい親切な設計だと思います。

1ページ1ページヘッダーが記述してあるようなHTMLファイルだと、それぞれのページでナビを書き換えればいいのですがWordPressや、header.php、header.htmlをインクルードして使用しているサイトでは簡単に実装は難しいのではないかと思います。WordPressだと関数があるのでまだ簡単なのですが、特にPHPファイルだと。(実際私は苦労した……)


ということで、下記ページでソースコードを掲載中です。

よろしければ参考にどうぞ!


wp-notebook.com

ページトップ