【jQuery】URLによって条件分岐させる方法

ページによって背景色変えたりしたいけど、WordPressじゃなくても条件分岐させられる？

例えばヘッダーの背景色を以下のようにしたいとします。

トップページ → 白
お問い合わせページ → 灰色
上記以外 → 黒

WordPressの場合は各ページのテンプレートで条件分岐できます（詳しくは以下の記事を参照下さい）

あわせて読みたい

: 【コピペOK！】よく使うWordPress条件分岐タグまとめ
続きを見る

そして今回は解説はWordPressではなく、静的サイトの場合になります。

ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。

実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼完全無料／

ZeroPlus Gate公式サイト

毎日先着制！

jQueryを使ってURLによって条件分岐させる方法

今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

条件にマッチしたページだけ処理を書く

例えば以下の条件だとします。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
お問い合わせページのヘッダーだけ背景色を変える

そして基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL")) {
    // URLがマッチした場合の処理
  }
});

マッチさせたいURLは、全体のURLの一部がマッチすればOKとなります。

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50");
  }
});

これでURLにcontactが含まれるページのヘッダーのみ、背景色が変わります。

条件を複数書く（or）

次は条件を複数書いてみます。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
ブログページのURLは『https://sample.jp/blog』
お問い合わせページとブログページのヘッダーだけ背景色を変える

基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL①")) {
    // URL①がマッチした場合の処理
  } else if (document.URL.match("/マッチさせたいURL②")) {
    // URL②がマッチした場合の処理
  }
});

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50"); // お問い合わせページ
  } else if (document.URL.match("/blog")) {
    $("header").css("background-color", "#90ee90"); // ブログページ
  }
});

条件を複数書いて、どの条件にも当てはまらない時の処理も書く

次は条件を複数書いてみます。

サイトのURLは『https://sample.jp/』
お問い合わせページのURLは『https://sample.jp/contact』
ブログページのURLは『https://sample.jp/blog』
お問い合わせページとブログページのヘッダーだけ背景色を変える
お問い合わせページとブログページ以外のヘッダーの背景色を変える

基本となるコードはこちらです。

$(window).bind("load", function () {
  if (document.URL.match("/マッチさせたいURL①")) {
    // URL①がマッチした場合の処理
  } else if (document.URL.match("/マッチさせたいURL②")) {
    // URL②がマッチした場合の処理
  } else {
    // URL①とURL②以外の場合の処理
  }
});

これに今回の例を当てはめると以下になります。

$(window).bind("load", function () {
  if (document.URL.match("/contact")) {
    $("header").css("background-color", "#ff7f50"); // お問い合わせページ
  } else if (document.URL.match("/blog")) {
    $("header").css("background-color", "#90ee90"); // ブログページ
  } else {
    $("header").css("background-color", "#f0e68c"); // お問い合わせとブログページ以外
  }
});

今回はヘッダーの背景色を変えましたが、もちろん他にもいろんな処理が可能なのでぜひ試してみて下さい。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶