ページによって背景色変えたりしたいけど、WordPressじゃなくても条件分岐させられる？
例えばヘッダーの背景色を以下のようにしたいとします。
- トップページ → 白
- お問い合わせページ → 灰色
- 上記以外 → 黒
WordPressの場合は各ページのテンプレートで条件分岐できます（詳しくは以下の記事を参照下さい）
あわせて読みたい
-
【コピペOK！】よく使うWordPress条件分岐タグまとめ
続きを見る
そして今回は解説はWordPressではなく、静的サイトの場合になります。
ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。
実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
5大無料特典2023年12月31日まで！
jQueryを使ってURLによって条件分岐させる方法
今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryを使ったことがない人はこちらの記事を参照下さい。
あわせて読みたい
-
【初心者向け】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"); // お問い合わせとブログページ以外
}
});今回はヘッダーの背景色を変えましたが、もちろん他にもいろんな処理が可能なのでぜひ試してみて下さい。
以上になります。
