背景色 – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Tue, 18 Mar 2025 02:08:33 +0000 ja hourly 1 https://wordpress.org/?v=7.0 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png 背景色 – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【WordPress】固定ページや投稿ページなどページ種別ごとに背景色を設定する https://kekenta-it-blog.com/wp-init-bg-by-pagetype/ https://kekenta-it-blog.com/wp-init-bg-by-pagetype/#respond Wed, 26 Jun 2024 08:11:24 +0000 https://kekenta-it-blog.com/?p=8690

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。 しかし、中には という方もいらっしゃるかと思います。 そこで今回は、 固定ページ・投稿ページ・カテゴリーページなどページ種類に応じて背景色を設 […]]]>

以前に以下の記事で「特定のページごとに背景色を変更する方法」を解説しました。

【WordPress】特定のページのみ背景色を変える方法

しかし、中には

ケケンタ

「ページごと」っていう細かい括りじゃなくて、「固定ページ」、「投稿ページ」って感じでもっと大きな枠ごとに設定したいんだよな

という方もいらっしゃるかと思います。

そこで今回は、

固定ページ・投稿ページ・カテゴリーページなど
ページ種類に応じて背景色を設定する方法

をご紹介していきます。

【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点
【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説
無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】
あわせて読みたい
PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

ソースコード

早速ですが、ベースとなるソースコードは以下のようになります。

下記のソースコードをfunctions.phpへ記述する

function my_headinputtags() {
  $headinputtag = '';

  if ( ページ種類の判定条件 ) {
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: ここに任意のカラーを設定;
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

上記のソースコードに、「ページ種類を判定するための条件分岐タグ」と「任意のカラー」を設定するだけで、ページ種類ごとに背景色を変えることが可能です。

（例）固定ページの背景色を「green」に設定

function my_headinputtags() {
  $headinputtag = '';

  if ( is_page() ) {  // 固定ページかどうかを判定
    $headinputtag = <<<EOM
      <style>
        body {
          background-color: green; // カラーに「green（緑）」を指定
        }
      </style>
    EOM;
  } 
  echo $headinputtag;
  }
  add_action( 'wp_head', 'my_headinputtags', 99);

functions.phpの編集方法がご不明な場合は、こちらの記事をご覧ください

あわせて読みたい
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…

主要な条件分岐タグ

ご参考までに、主要な条件分岐タグをいくつか掲載します。

ケケンタ

ページ種類の判定にご活用ください。

条件分岐タグ判定内容
is_front_page()トップページかどうか判定
is_home()投稿一覧ページかどうか判定
is_page()固定ページかどうか判定
is_single()投稿ページかどうか判定
is_category()カテゴリーページかどうか判定
is_tag()タグページかどうか判定
主要な条件分岐タグ

まとめ

以上がページ種類ごとに背景色を変更する方法でした。

今回ご紹介したソースコードを使用すれば簡単に実装可能ですので、ぜひご活用いただけると嬉しいです。

ケケンタ

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressやWeb制作、PHPに関する情報を発信しています。
他の記事もご覧いただけると嬉しいです。

あわせて読みたい
【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点 WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生…
あわせて読みたい
【WordPress】特定のページのみ背景色を変える方法 WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない…… 今回はこのようなお悩みについて解説をしていきます。  この記事で分かること WordPressの…
]]> https://kekenta-it-blog.com/wp-init-bg-by-pagetype/feed/ 0