jQuery Web制作

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

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

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

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

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

あわせて読みたい
【コピペOK!】よく使うWordPress条件分岐タグまとめ
【コピペOK!】よく使うWordPress条件分岐タグまとめ

続きを見る

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

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

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

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

あわせて読みたい
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

それではいくつか例を見ていきたいと思います。

  • 条件にマッチしたページだけ処理を書く
  • 条件を複数書く(or)
  • 条件を複数書いて、どの条件にも当てはまらない時の処理も書く

それでは順番に解説していきます。

 

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

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

  • サイトの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"); // お問い合わせとブログページ以外
  }
});

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

以上になります。

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-jQuery, Web制作