この記事にはプロモーションが含まれています。

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

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

ケケンタ

WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない……

今回はこのようなお悩みについて解説をしていきます。

この記事で分かること
  • WordPressの特定のページの背景色を変える方法
ケケンタ

HTMLやCSSの知識が無くても、この記事の手順通りに作業することで誰でも簡単にWordPressで特定のページの背景色を変更することが可能です!

特定のページという細かい括りではなく、固定・投稿ページといったページ種類ごとに背景色を変更する方法が知りたい方はこちらの記事をご覧ください。




ケケンタ

ケケンタのITブログでは、WebアプリPHPLaravel)やWeb制作WordPressコーディング)について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください!


運動不足、気になっていませんか?

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです!

ボタンにカーソルを合わせるだけ
カウントダウンが始まるタイマーをご用意してみました!

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい!

タイマースタート

3:00

※運動不足だと連続3分で取り組んでもかなり息が切れます
(僕は加えて気分もちょっと悪くなりました……)
絶対にご無理の無い範囲でお取り組みください!


目次

WordPressで特定ページの背景色を変える

具体的な作業の流れは以下の通りです。

作業の流れ
  • 背景色を変更したいページの「ページID」を確認する
  • style.cssに背景色を変更するためのプロパティを記述する

手順① 背景色を変更したいページの「ページID」を確認する

STEP
管理画面で背景色を変更したいページの「編集画面」を開く
背景色を変更したいページの編集画面を開く
背景色を変更したいページの編集画面を開く
STEP
URLに記載されている「ページID」を確認する
ページのURLに記載されているページIDを確認
ページIDを確認

手順② style.cssに背景色を変更するためのプロパティを記述する

STEP
style.cssに該当するファイルや画面を開く

style.cssにCSSを記述する方法は大きく3つあり、使用できる方法もテーマごとに異なります。
お使いのテーマに合わせて以下の3つのいずれかをご利用ください。

方法① 追加CSSを使用する

「外観」→「カスタマイズ」→「追加CSS」を開く

追加CSSを開く手順
追加CSSを開く手順

CSSを追記したあとは上の方にある「公開」ボタンを押しましょう。

方法② テーマファイルエディタを使用する

「外観」→「テーマファイルエディタ」→(右側メニューで)「style.css」を選択する

テーマエディタでstyle.cssを開く
テーマエディタでstyle.cssを開く

CSSを追記したあとはページ下にある「ファイルを更新(保存)」ボタンを押しましょう。

方法③ style.cssを直接編集する

ご使用のサーバー内の
「wp-content」→「themes」→「使用中のテーマディレクトリ」→「style.css」を開く
※こちらはテーマディレクトリ内にある「style.css」ファイルを開き、その中に直接書き込む方法です。

style.cssの配置場所はテーマによって異なる場合があります。
また、子テーマを使用している場合には、子テーマ内のstyle.cssを使用することをおすすめします。

STEP
CSSを記述して保存する

STEP1でWordPressの利用状況に適した方法でstyle.cssの編集画面・ファイルを開けたら、下記の内容を追記します。

背景色を変更するページが「固定ページ」なのか「投稿ページ」なのかによって記述内容(class名)が若干変わるため気を付けましょう。

固定ページの場合

.page-id-ページID {
  background-color: 色コード;
}

/*例*/
.page-id-9 {
  background-color: #fafad2;
}

投稿ページの場合

.post-id-ページID {
  background-color: 色コード;
}

/*例*/
.post-id-5 {
  background-color: #fafad2;
}

色コードについては以下のサイトで実際の色味を確認しながら調べることができます。
参考サイト:https://fromkato.com/color

ケケンタ

以上の手順によりWordPressで特定ページの背景色を変更することが可能です!

ページIDが分かれば特定ページのカスタマイズが簡単

いかがだったでしょうか。

今回のようにそのページのIDが分かれば、そのページに対してだけCSSを設定することが可能です。

今回は背景色だけの設定でしたが、CSSの知識があれば他にも色々なカスタマイズも可能ですので、ぜひ挑戦してみて下さい。

ケケンタ

最後までご覧いただきありがとうございました!

WordPressで特定ページの背景色を変更する方法のアイキャッチ画像

この記事が気に入ったら
フォローしてね!

この記事が良いと思ったらシェアしてね!

コメント

コメントする

CAPTCHA


目次