ページによって背景色変えたりしたいけど、WordPressじゃなくても条件分岐させられる？
例えばヘッダーの背景色を以下のようにしたいとします。
- トップページ → 白
- お問い合わせページ → 灰色
- 上記以外 → 黒
WordPressの場合は各ページのテンプレートで条件分岐できます（詳しくは以下の記事を参照下さい）
あわせて読みたい
-
【コピペOK！】よく使うWordPress条件分岐タグまとめ
続きを見る
そして今回は解説はWordPressではなく、静的サイトの場合になります。
ページごとにヘッダーに別々のclassを書けば条件分岐の必要はないかも知れませんが、そうなるとヘッダーが共通になりません。
実案件では『ヘッダーは共通でお願いします』と言われる事があるので、静的サイトでの条件分岐も覚えておきましょう。
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
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"); // お問い合わせとブログページ以外
}
});今回はヘッダーの背景色を変えましたが、もちろん他にもいろんな処理が可能なのでぜひ試してみて下さい。
以上になります。
