現在のページのメニューの装飾を変更する方法【jQueryだけでOK】

どうもWEBエンジニアのがむしゃらワーカーしゅう丸(@shumarukiti)です!

この記事では、

WordPressじゃなくてhtmlベースでサイト制作の話がきた。現在のページでメニューに色をつけたりするのどうすればいいんだろ・・・。WordPressなら簡単だけどhtmlだとわからないな。

という疑問にお答えします。

結論ですがhtmlでのサイト制作でも現在のページのメニューに色をつけたりcssをいじることは可能です。

先日、後輩から上記のような質問を受けたので記事にすることにしました。

ちなみにこの記事を書いている僕は、未経験から独学でプログラミングを勉強しまして、WEBエンジニアとして転職して今ではWordPressでのサイト制作を軸としたフリーランスエンジニアとして活動しています。そんな僕がWordPressを無料で勉強して理解度をグッとあげる方法について語ります。

〜本記事の内容〜

  1. htmlで現在のページのメニューの色をつける方法【簡単】
  2. WordPress以外のサイト制作もまだまだある【勉強すべき】

htmlで現在のページのメニューの色をつける方法【簡単】

結論ですが、jQueryを使うだけで実現できます。

jsに描くときはscriptタグはいらないので注意です。

ちなみにこのコードは何も難しいことはしていなくて、表示しているページの「header nav ul li a」に「now」というclassを付けるよという意味です。

皆さんが使う場合は、「header nav ul li a」のみ自分が制作しているサイトに適応させるように変更すれば良いです。

「now」というclassが付いた時にcssで色とかをつけてあげる指定をしてあげれば良いです。

「header nav ul li a.now」の色を指定。

みたいな感じですね。

ここも実装したいものに応じて変更してください。

これで例えば「会社概要」ページにいるときは、メニュー部分が赤色になります。

WordPress以外のサイト制作もまだまだある【勉強すべき】

以上ですが、WordPressでのサイト制作に慣れているとhtmlだけのサイト制作でわからないところが結構出てきたりしますよね。

実際にWordPressではphpで関数を描くだけで解決することが多いので。

なのでhtmlでのサイト制作に備えてjQueryもある程度勉強しておくのがおすすめですよ。htmlベースでのサイト制作ならjQueryがある程度出来ればほぼ何でもできるので。

ちなみにjQueryの基礎はこの1冊で結構身についたのでおすすめです。

〜おすすめ記事〜

【フリーランス向け】HTML、CSSスキルを身につけてコーディング案件を受注する方法【月5万稼ぐ】

2018.04.07

【フリーランス初心者】プログラミング勉強開始2ヶ月で10万円稼ぐノウハウ公開します【実体験】

2018.01.02

【フリーランス向け】おすすめエージェント3選をご紹介【エンジニア必見】

2018.02.02
テックアカデミーのロゴ

TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料(0円)で1週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券500円がもらえます。

» 公式サイトを見る
TECHEXPERTのロゴ

TECH CAMPは転職に特化したプログラミングスクール。転職成功率は98%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。

» 公式サイトを見る
TechBoostのロゴ

TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。

» 公式サイトを見る