複雑なデザイン変更に何時間も費やすことなく、WordPressサイトを一新しませんか？
私たちは2008年からWordPressサイトを制作してきました。サイトの背景色を変更することは、サイトの外観を変える最も手っ取り早い方法のひとつです。
しかし、WordPressのテーマやエディターがすべて異なるため、初心者にとっては適切な方法を見つけることが圧倒的に難しく感じられるかもしれない。
この簡単なガイドでは、どのテーマやページビルダーを使用していても、WordPressの背景色を変更する方法を具体的に紹介します。
なぜWordPressの背景色が本当に重要なのか？
サイトの背景色は、デジタルホームの壁だと考えてください。WordPressテーマには初期設定がありますが、適切な背景色を選択することで、サイト訪問者を歓迎する気持ちが大きく変わります。
このWordPressのデザイン要素がなぜ重要なのかを説明します：
- コンテンツが読みやすくなる
- 重要な情報を目立たせる
- サイトの雰囲気を作る
- サイトをよりプロフェッショナルに見せることができる。
適切な背景色は、重要なボタンを強調し、コンバージョンを高めるのに役立ちます。また、ブログのカテゴリーや特別なお知らせごとに特定の色を使うなど、コンテンツを整理するために色を使い分けることもできます。
さらに魅力的なサイトにしたい場合は、動画背景を追加して訪問者の注意を引くこともできます。
それでは、WordPressで背景色を変更する方法を見ていきましょう。背景色をカスタマイズするさまざまな方法を紹介しますので、お好みのセクションに進んでください：
- How to Change Background Color in WordPress Theme Customizer
- How to Change Background Color in Full Site Editor (2024 Method)
- How to Change Background Color in WordPress With CSS
- How to Randomly Change Background Colors in WordPress
- How to Change Background Color for Individual Posts
- Bonus Tip: Use a Page Builder for More Design Control
WordPressテーマカスタマイザーで背景色を変更する方法
テーマによっては、WordPressテーマカスタマイザーを使って背景色を変更できる場合があります。コードを編集することなく、リアルタイムでサイトの外観を編集することができます。
WordPressテーマカスタマイザーにアクセスするには、サイトにログインし、外観 ” カスタマイズに進みます。
テーマカスタマイザーが開き、テーマを変更するための複数のオプションが表示されます。メニュー、色、ホームページ、ウィジェット、背景画像などが含まれます。
利用可能なオプションは、サイトが使用しているWordPressテーマによって異なります。このチュートリアルでは、デフォルトのTwenty Twenty-Oneテーマを使用します。
サイトの背景色を変更するには、左側のメニューから「カラー＆ダークモード」設定タブをクリックします。
次に、「Background Color（背景色）」オプションをクリックし、サイトの色を選択します。
カラーピッカーツールを使用するか、16進数のカラーコードを入力して背景を選択できます。
変更が終わったら、忘れずに「公開する」ボタンをクリックしてください。
これで、WordPressサイトにアクセスして、新しい背景色を実際に確認することができます。
お使いのテーマには、テーマ・カスタマイザーでこの設定ができない場合があります。その場合は、以下の方法をお試しください。
フルサイトエディターで背景色を変更する方法（2024の方法）
フルサイトエディター（FSE）は、ブロックテーマを編集するためのWordPress編集プラットフォームです。このエディターを使えば、サイトの背景色を超簡単に変更できます。その手順を一緒に見ていきましょう。
WordPressダッシュボードの外観 ” エディターから始めます。
メニュー設定のひとつに「スタイル」ボタンがあります。
それをクリックしてください。
ここで、鉛筆の編集ボタンをクリックする。
これで編集インターフェースが表示されます。
画面の右側に便利なパネルがあります。ここはデザインコントロールセンターで、色やフォントなどを変更することができます。
背景色を変更するには、スタイルパネルの「色」をクリックします。
次に「背景」をクリックする。
無地かグラデーションのどちらかを選ぶことができる。あなたのスタイルに一致するものを自由に選んでください。選択したものに満足したら、「保存」を押して完了です！
WordPressの背景色をCSSで変更する方法
CSSを使って背景色を変更する方法をご存知ですか？
WordPressサイトの背景色を変更するもう一つの方法は、WordPressテーマカスタマイザーでカスタムCSSを追加することです。
まず、外観 ” カスタマイザーを開き、「追加CSS」タブを開きます。
次に、以下のコードを入力する：
1 2 3 | body { background-color: #FFFFFF;} |
すべて、背景色のコードをサイトで使用したい色のコードに置き換えるだけです。次に、Additional CSSタブにコードを入力します。
完了したら、忘れずに「公開する」ボタンをクリックしてください。これで、あなたのサイトにアクセスして新しい背景色を表示することができます。
詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
WordPressで背景色をランダムに変更する方法
さて、WordPressの背景色をランダムに変更する方法をお探しですか？
異なる背景色間を自動的に移行するスムーズな背景色変更エフェクトを追加できます。エフェクトは、最終的な色に達するまで複数の色を通過します。
この効果を追加するには、WordPressサイトにコードを追加する必要があります。以下にその手順を説明します。
まず最初に行う必要があるのは、スムーズな背景色変更効果を追加したいエリアのCSSクラスを見つけることです。
ブラウザーにあるインスペクトツールを使って、これを行うことができます。すべて、色を変えたいエリアにマウスを持っていき、右クリックして検査ツールを選択するだけです。
その後、ターゲットにしたいCSSクラスを書き込む必要がある。例えば、上のスクリーンショットでは、CSSクラス「page-header」を持つエリアをターゲットにしたい。
次に、コンピューター上でメモ帳のようなプレーンテキストエディターを開き、新規ファイルを作成する必要があります。そのファイルをデスクトップに’wpb-background-tutorial.js’として保存する。
それが完了したら、先ほど作成したJSファイルに以下のコードを追加する：
1 2 3 4 5 6 7 8 9 10 11 12 | 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); }); }); |
コードを見ると、「ページヘッダー」CSSクラスを使用していることに気づくだろう。
また、16進数のカラーコードを使って4色を使っていることもわかるだろう。背景色は何色でも追加できます。すべてスニペットにカラーコードを入力し、他の色と同じようにコンマと個別引用符で区切ります。
JSファイルの準備ができたら、ファイル転送プロトコル（FTP）サービスを使ってWordPressテーマのJSフォルダにアップロードする必要があります。
このチュートリアルでは、FileZillaを使用します。これはWindows、Mac、Linux用の無料のFTPクライアントで、とても使いやすい。
開始するには、サイトのFTPサーバーにログインする必要があります。ログイン情報は、ホスティングサービスからのメールまたはホスティングアカウントのcPanelダッシュボードで見つけることができます。
ログイン中、’Remote site’ 列の下にあなたのサイトのフォルダーとファイルのリストが表示されます。先に進み、あなたのサイトのテーマのJSフォルダーに移動します。
もしあなたのテーマにjsフォルダーがない場合は、作成してください。
FTPクライアントでテーマのフォルダーを右クリックし、「ディレクトリを作成」オプションをクリックするだけです。
次に、「ローカルサイト」のカラムでJSファイルの場所を開く必要があります。
次にファイルを右クリックし、「アップロード」オプションをクリックしてファイルをテーマに追加します。
詳しくは、FTPを使ってWordPressにファイルをアップロードする方法のチュートリアルをご覧ください。
次に、テーマのfuntions.phpファイルに以下のコードを入力する必要があります。このコードは、JavaScriptファイルと、このコードを動作させるために必要な依存jQueryスクリプトを 適切に読み込みます：
1 2 3 4 | 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クラスを見つけることです。ブログの投稿を表示し、右クリックしてブラウザーでInspectツールを使用することでそれを行うことができます。
以下はその例である：
1 | <article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized"> |
投稿IDを取得したら、以下のカスタムCSSを使用して個々の投稿の背景色を変更することができます。投稿IDを自分の投稿IDに一致させ、背景色を希望するコードに置き換えるだけです。
1 2 3 4 | .post-104 {background-color: #D7DEB5;color:#FFFFFF;} |
カスタムCSSを追加するには、WordPressテーマカスタマイザーを使用します。まず、WordPressサイトにログイン中であることを確認してください。次に、ブログ投稿にアクセスし、上部にある「カスタマイズ」オプションをクリックします。
その後、左側のメニューから「Additional CSS」タブに移動します。
次に、カスタムCSSを入力します。
それが完了したら、『公開する』ボタンをクリックする。
これであなたのブログ投稿にアクセスして、新しい背景色を見ることができます。
投稿者、コメント、カテゴリーごとに背景色を変えたい場合は、WordPressの投稿日ごとに背景色を変える詳しいチュートリアルをご覧ください。
ボーナスのヒントページビルダーでデザインをコントロールする
背景色の変更はほんの始まりに過ぎません。サイトのデザインを完全にコントロールしたいのであれば、ページビルダーを使えばさらに多くの可能性が広がります。
WordPressで最も人気のあるページビルダーであるSeedProdを使用するのが好きです：
- コーディングなしでどんなページでもデザインできる
- 色、レイアウト、スペースのカスタマイザー
- プロフェッショナルなページを数分で作成
- すべての端末でページを美しく見せる
WordPressプラグインインストールガイドを参照して、SeedProdをインストールし有効化するだけです。
注： 無料版から始めることもできますが、SeedProd Proではより多くのテンプレートやデザインオプションが利用できます。
プラグインが有効化されると、ライセンスキーの入力を求められます。キーはSeedProdアカウントエリアにあります。キーを入力した後、’Verify Key’ボタンをクリックしてください。
次に、SeedProd ” ページにアクセスしてください。
ここから「新規ランディングページを追加」ボタンをクリックします。
その後、ランディングページのテーマを選択する必要があります。SeedProdは美しいランディングページのテンプレートをたくさん提供しています。
空白のテンプレートを使ってゼロから始めることもできます。しかし、ランディングページをより簡単かつ迅速に作成する方法として、テンプレートを使用することをお勧めします。
テンプレートを選択すると、ページ名の入力とURLの選択が求められます。
その後、’Save and Start Editing the Page’ボタンをクリックするだけです。
次の画面では、SeedProdページビルダーが表示されます。ここでは、ドラッグ＆ドロップビルダーを使用して、左側のメニューからブロックを追加することができます。見出し、動画、画像、ボタンなどを追加できます。
下にスクロールすると、Advancedセクションの下にさらにブロックがあります。例えば、緊急性を高めるためにカウントダウンタイマーを追加したり、フォロワーを増やすためにソーシャルプロフィールを表示したり、リードを集めるためにオプションフォームを追加したりすることができます。
ドラッグ＆ドロップビルダーを使えば、ランディングページの各ブロックの位置を簡単に変更できます。テキストのレイアウト、サイズ、色、フォントも変更できます。
ランディングページの背景色を変更するには、ページの任意のセクションを選択するだけです。左側のメニューに、背景のスタイルや色を編集したり、画像を追加したりするオプションが表示されます。
ランディングページの編集が終わったら、上部にある「保存」ボタンを忘れずにクリックしましょう。
次に、’接続’タブに移動し、ページをさまざまなメールマーケティングサービスと統合することができます。例えば、Constant Contactや Brevo（旧Sendinblue）などに接続することができます。
その後、「ページ設定」タブをクリックする。
ここで、ページの状態を下書きから公開に変更し、ページを公開することができます。
その他、ページのSEO設定の変更、アナリティクスの表示、スクリプトのカスタムコードの追加、カスタムドメインの入力も可能です。
完了したら、SeedProdページビルダーを終了し、カスタムランディングページにアクセスします。
動画チュートリアル
WordPressで背景色を変更する方法について、この投稿がお役に立てば幸いです。また、FigmaをWordPressに変換する方法や、最高のウェブデザインソフトウェアの比較もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.