WordPressで背景色を変更する方法（初心者向けガイド）

ウェブサイトの背景色は、訪問者全体のムードを設定します。

クリーンでプロフェッショナルな雰囲気、温かく迎え入れるような雰囲気、あるいは大胆でクリエイティブな雰囲気など、どのような雰囲気を目指すにしても、適切な背景色がすべてを変えることができます。

良いニュースは、それを変更するために技術的なスキルや高価なツールを必要としないことです。WordPressには、数回のクリックで色をカスタマイズできる組み込み機能があります。

多くのサイトオーナーがウェブサイトをパーソナライズするのを支援してきた結果、ほとんどの人がそのプロセスがいかにシンプルで即時であるかに驚いていることがわかりました。

WordPressで背景色を更新する3つの簡単な方法を、最も初心者向けのオプションから始めて、少し高度なテクニックに進みながら説明します。

WordPressの背景色が本当に重要な理由 🎨

ウェブサイトの背景色を、デジタルホームの壁と考えてみてください。WordPressテーマにはデフォルトの色がありますが、適切な背景色を選ぶことで、訪問者にとってサイトがどれだけ居心地の良いものになるかが大きく変わります。

このWordPressのデザイン要素が非常に重要な理由は次のとおりです。

• コンテンツが読みやすくなります
• 重要な情報が目立つようになります
• それらはあなたのウェブサイトのムードを設定します
• それらはあなたのサイトをよりプロフェッショナルに見せることができます

適切な背景色は、重要なボタンを強調し、コンバージョンを増やすのに役立ちます。また、異なる色を使用してコンテンツを整理することもできます。たとえば、ブログのカテゴリ別や特別な告知用に特定の色を使用するなどです。

そして、サイトをさらに魅力的にしたい場合は、訪問者の注意を引くために動画の背景を追加することもできます。

それでは、WordPressで背景色を変更する方法を見ていきましょう。背景色をカスタマイズするさまざまな方法を紹介するので、好みのセクションにジャンプできます。

• WordPressテーマカスタマイザーで背景色を変更する方法
• フルサイトエディターで背景色を変更する方法（2024年版）
• CSSでWordPressの背景色を変更する方法
• WordPressで背景色をランダムに変更する方法
• 個々の投稿の背景色を変更する方法
• Bonus Tip: Use a Page Builder for More Design Control
• よくある質問: WordPressで背景色を変更する

WordPressテーマカスタマイザーで背景色を変更する方法

テーマによっては、WordPressテーマカスタマイザーを使用して背景色を変更できる場合があります。これにより、コードを編集することなく、サイトの外観をリアルタイムで編集できます。

WordPressテーマカスタマイザーにアクセスするには、ウェブサイトにログインしてから、外観 » カスタマイズに移動します。

これにより、テーマを編集するための複数のオプションがあるテーマカスタマイザーが開きます。これには、メニュー、色、ホームページ、ウィジェット、背景画像などが含まれます。

利用可能な具体的なオプションは、サイトで使用しているWordPressテーマによって異なります。このチュートリアルでは、デフォルトのTwenty Twenty-Oneテーマを使用します。

ウェブサイトの背景色を変更するには、左側のメニューから「色とダークモード」設定タブをクリックしてください。

次に、「背景色」オプションをクリックして、ウェブサイトの色を選択します。

カラーピッカーツールを使用するか、背景の16進数カラーコードを入力できます。

変更が完了したら、「公開」ボタンをクリックすることを忘れないでください。

これで、WordPressウェブサイトにアクセスして、新しい背景色が実際に適用されていることを確認できます。

テーマによっては、テーマカスタマイザーでこのオプションが利用できない場合があります。その場合は、以下のいずれかの方法を試すことができます。

フルサイトエディターで背景色を変更する方法（2024年版）

フルサイトエディター（FSE）は、ブロックテーマを編集するためのWordPressの編集プラットフォームです。このエディターを使用すると、サイトの背景色を非常に簡単に変更できます。一緒に手順を見ていきましょう。

WordPressダッシュボードで 外観 » エディター に移動します。

メニューオプションのいずれかに「スタイル」ボタンが表示されます。

クリックしてください。

次に、鉛筆編集ボタンをクリックします。

これで編集インターフェースが表示されます。

さて、画面の右側に便利なパネルが表示されます。ここは、色、フォントなどを変更できるデザインコントロールセンターです。

背景色を変更するには、スタイルパネルの「色」をクリックするだけです。

次に、「背景」をクリックします。

これで、単色またはグラデーションを作成するかを選択できます。あなたのスタイルに合うものを選んでください。選択に満足したら、「保存」をクリックすれば完了です！

CSSでWordPressの背景色を変更する方法

CSSを使用して背景色を変更する方法を知りたいですか？

WordPressウェブサイトの背景色を変更するもう1つの方法は、WordPressテーマカスタマイザーにカスタムCSSを追加することです。

まず、外観 » カスタマイズに移動し、「追加CSS」タブを選択します。

次に、次のコードを入力できます：

body {
 background-color: #FFFFFF;
}

背景色のコードを、ウェブサイトで使用したい色のコードに置き換えるだけです。次に、「追加CSS」タブにコードを入力してください。

完了したら、「公開」ボタンをクリックすることを忘れないでください。これで、ウェブサイトにアクセスして新しい背景色を確認できます。

詳細については、WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドを参照してください。WordPressサイトにカスタムCSSを簡単に追加する方法。

WordPressで背景色をランダムに変更する方法

WordPressで背景色をランダムに変更する方法をお探しですか？

異なる背景色の間で自動的に遷移するために、スムーズな背景色の変更効果を追加できます。この効果は、最終的な色に達するまで複数の色を通過します。

効果を追加するには、WordPressウェブサイトにコードを追加する必要があります。以下にその手順を説明します。

まず、スムーズな背景色の変更効果を追加したい領域のCSSクラスを見つける必要があります。

ブラウザのインスペクトツールを使用することで、これを行うことができます。変更したい領域にマウスを移動し、右クリックしてインスペクトツールを選択するだけです。

その後、ターゲットにしたいCSSクラスを記述する必要があります。たとえば、上記のスクリーンショットでは、「page-header」というCSSクラスを持つ領域をターゲットにしたいと考えています。

次に、コンピューターでメモ帳のようなプレーンテキストエディターを開き、新しいファイルを作成する必要があります。ファイルをデスクトップに「wpb-background-tutorial.js」として保存する必要があります。

それが完了したら、作成したばかりのJSファイルに次のコードを追加できます。

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

コードを調べると、ウェブサイトでターゲットにしたい領域であるため、「page-header」CSSクラスを使用したことがわかります。

16進数カラーコードを使用して4色使用したこともわかります。背景には好きなだけ色を追加できます。他の色と同様に、スニペットにカラーコードを入力し、コンマと単一引用符で区切るだけです。

JSファイルが準備できたら、WordPressテーマのJSフォルダーにアップロードする必要があります。これを行う最も簡単な方法は、ファイル転送プロトコル（FTP）クライアントを使用することです。これにより、Webサーバー上のファイルを直接管理できます。

このチュートリアルでは、FileZillaを使用します。これはWindows、Mac、Linux向けの無料かつシンプルなFTPクライアントです。実際、サイトファイルを管理するために私たちが自身でテストした一般的なツールです。

まず、ウェブサイトのFTPサーバーにログインする必要があります。ログイン情報は、ホスティングプロバイダーからのメールまたはホスティングアカウントのcPanelダッシュボードで見つけることができます。

ログインすると、「リモートサイト」列の下にウェブサイトのフォルダとファイルのリストが表示されます。サイトのテーマのJSフォルダに移動してください。

テーマにjsフォルダがない場合は、作成できます。

FTPクライアントでテーマのフォルダーを右クリックし、「ディレクトリーの作成」オプションをクリックするだけです。

次に、「ローカルサイト」列の下にあるJSファイルの場所を開く必要があります。

次に、ファイルを右クリックして「アップロード」オプションをクリックし、ファイルをテーマに追加します。

詳細については、WordPressにファイルをアップロードするためにFTPを使用する方法に関するチュートリアルを参照してください。

次に、次のコードをテーマのfuntions.phpファイルに入力する必要があります。このコードは、JavaScriptファイルを適切に読み込み、このコードを機能させるために必要な依存関係にあるjQueryスクリプトを読み込みます。

function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial',  get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
 }
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );

コードをサイトに安全に追加するには、無料のWPCodeプラグインの使用をお勧めします。詳細については、ウェブからスニペットをWordPressに貼り付ける方法に関するガイドをご覧ください。

これで、ウェブサイトにアクセスして、ターゲットにした領域でランダムに色が変わる様子を確認できます。

個々の投稿の背景色を変更する方法

ウェブサイト全体で単一の色を使用する代わりに、WordPressで個々のブログ投稿の背景色を変更することもできます。カスタムCSSを使用して。

特定の投稿の外観を変更し、背景をパーソナライズできます。たとえば、著者ごとに各投稿のスタイルをカスタマイズしたり、最もコメントの多い投稿に異なる背景色を表示したりできます。

特定のカテゴリの投稿の背景色を変更することもできます。たとえば、ニュース投稿はチュートリアルとは異なる背景色にすることができます。

最初に行う必要があるのは、テーマのCSSで投稿IDクラスを見つけることです。これは、ブログ投稿を表示し、右クリックしてブラウザのインスペクトツールを使用することで行うことができます。

以下は、それがどのように見えるかの例です。

<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">

ポストIDがわかったら、以下のカスタムCSSを使用して個々の投稿の背景色を変更できます。ポストIDを自分のものに一致させ、希望する背景色のコードに置き換えるだけです。

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}

カスタムCSSを追加するには、WordPressのテーマカスタマイザーを使用できます。まず、WordPressのウェブサイトにログインしていることを確認してください。次に、ブログ記事にアクセスし、上部にある「カスタマイズ」オプションをクリックします。

その後、左側のメニューから追加CSSタブに移動します。

次に、カスタムCSSを入力します。

それが完了したら、「公開」ボタンをクリックします。

これで、ブログ投稿にアクセスして新しい背景色を確認できます。

著者、コメント、またはカテゴリに基づいて背景色を変更したい場合は、WordPressの各投稿を異なる方法でスタイル設定する方法に関する詳細なチュートリアルをご覧ください。

ボーナスヒント：ページビルダーを使用してデザインのコントロールを強化する

背景色の変更はほんの始まりにすぎません。ウェブサイトのデザインを完全に制御したい場合、ページビルダーはさらに多くの可能性を開いてくれます。

WPBeginnerでは、SeedProdを推奨しています。なぜなら、WordPressで最も人気があり、ユーザーフレンドリーなページビルダーだからです。当社のパートナーブランドも、WPForms、Duplicator、Charitableなど、ウェブサイトのデザインにこれを使用しています。

完全なデザインコントロールを提供し、以下を可能にします：

• コーディングなしで任意のページをデザイン
• 色、レイアウト、間隔をカスタマイズ
• 数分でプロフェッショナルな見た目のページを作成
• あらゆるデバイスでページをきれいに表示

デモ環境でこのツールを徹底的にテストした結果、非常に直感的で使いやすいことがわかりました。私たちの経験について詳しく知りたい場合は、SeedProdのレビューをご覧ください。

開始は簡単です。当社の簡単なWordPressプラグインインストールガイドを使用して、SeedProdをインストールして有効化するだけです。

注: 無料版から始めることもできますが、テンプレートやデザインオプションをさらに必要とする場合は、SeedProd Pro でアクセスできます。

プラグインがアクティブになったら、ライセンスキーを入力するように求められます。キーはSeedProdアカウントエリアで見つけることができます。キーを入力したら、「キーの検証」ボタンをクリックします。

次に、SeedProd » ページに移動できます。

ここから、「新しいランディングページを追加」ボタンをクリックします。

その後、ランディングページのテーマを選択する必要があります。SeedProdは、開始するための美しいランディングページテンプレートを多数提供しています。

最初から始めるために空白のテンプレートを使用することもできます。ただし、テンプレートを使用することをお勧めします。ランディングページを作成するためのより簡単で迅速な方法です。

テンプレートを選択すると、ページ名を入力し、URLを選択するように求められます。

その後、「保存してページの編集を開始」ボタンをクリックするだけです。

次の画面でSeedProdのページビルダーが表示されます。ここで、左側のメニューからブロックを追加するためにドラッグアンドドロップビルダーを使用できます。見出し、動画、画像、ボタンなどを追加できます。

下にスクロールすると、高度なセクションの下にさらに多くのブロックがあります。たとえば、緊急性を高めるためにカウントダウンタイマーを追加したり、フォロワーを増やすためにソーシャルプロフィールを表示したり、リードを収集するためのオプションフォームを追加したりできます。

ドラッグアンドドロップビルダーを使用すると、ランディングページの各ブロックの位置を簡単に変更できます。レイアウト、サイズ、色、テキストのフォントも変更できます。

ランディングページの背景色を変更するには、ページのセクションを単純に選択します。左側のメニューに背景スタイル、色を編集し、画像を追加するためのオプションが表示されます。

ランディングページの編集が完了したら、上部にある「保存」ボタンをクリックするのを忘れないでください。

次に、「接続」タブに移動し、ページをさまざまなメールマーケティングサービスと統合できます。たとえば、Constant Contact、Brevo（旧Sendinblue）などに接続できます。

その後、「ページ設定」タブをクリックしてください。

ここで、ページのステータスをドラフトから公開に変更して、ページを公開できます。

それ以外にも、ページのSEO設定を変更したり、アナリティクスを表示したり、スクリプトの下にカスタムコードを追加したり、カスタムドメインを入力したりできます。

完了したら、SeedProdページビルダーを終了し、カスタムランディングページにアクセスできます。

動画チュートリアル

よくある質問: WordPressで背景色を変更する

WordPressで背景色を変更することに関して、読者からよく寄せられる質問をいくつかご紹介します。

色の代わりに画像で背景を設定できますか？

はい、絶対に可能です。背景色を変更できるほとんどのWordPressテーマには、背景画像をアップロードするオプションもあります。

通常、この設定はテーマカスタマイザー（外観 » カスタマイズ）の「背景画像」のようなタブで見つけることができます。そこから、コンピューターからファイルをアップロードできます。

背景色を変更するとサイトの速度に影響しますか？

単色の背景色はサイトの速度にほとんど影響を与えないため、安全で簡単なパフォーマンス向上策となります。

ただし、大きすぎる最適化されていない背景画像を使用すると、ページの読み込み時間が大幅に遅くなる可能性があります。画像を使用する場合は、最初に圧縮することを常にお勧めします。

その他のヒントについては、画質を損なわずにウェブ用に画像を最適化する方法に関するガイドをご覧ください。

ブランドカラーの正しい16進数コードを見つけるにはどうすればよいですか？

16進数コードは、特定の色を表す6桁のコードです（例：純粋な白の場合は#FFFFFF）。ブランドの16進数コードを見つけるのに最適な場所は、会社の公式スタイルガイドです。

もしまだお持ちでない場合は、HTML Color Codesのような無料のオンラインツールを使用できます。このカラーピッカーを使用すると、希望する任意の色合いの正確な16進数コードを見つけることができます。

この記事がWordPressの背景色を変更する方法を学ぶのに役立ったことを願っています。また、FigmaをWordPressに変換する方法に関するガイドや、最適なWebデザインソフトウェアの比較も参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。