サイトの背景色は、デザインやブランディングにおいて重要な権限グループを担っています。コンテンツをより読みやすくし、サイトにアクセスしたユーザーの注意を引くのに役立ちます。
WPBeginnerでは、15年以上WordPressを使用しており、ユーザーが背景色をより簡単に変更できるように進化してきたのを見てきました。例えば、フルサイトエディターやテーマカスタマイザーを使ってテーマを変更し、異なる色を選択することができます。
この投稿では、WordPressサイトの背景色を簡単に変更する方法をいくつかご紹介します。
WordPressで背景色を変更する理由
WordPressテーマにはデフォルトの背景色が設定されています。背景色を変更することで、サイトのデザインをパーソナライズし、読みやすさを向上させることができます。
例えば、異なる背景色を使用してページの特定のセクションを目立たせることができます。これは、行動喚起（CTA）を強調し、コンバージョンを増やすのに役立ちます。
WordPressブログでは、投稿者、コメント、カテゴリーによって背景色を使い分けることができます。これにより、サイト上の他のコンテンツと投稿を区別することができます。
また、動画の背景を追加して訪問者の注意を即座に引き、エンゲージメントを高める方法もある。
それでは、WordPressで背景色を変更する方法を見ていきましょう。背景色をカスタマイズするさまざまな方法を紹介しますので、お好みのセクションに進んでください：
動画チュートリアル
文章での説明がお望みなら、このまま読み進めてほしい。
WordPressテーマカスタマイザーを使って背景色を変更する
テーマによっては、WordPressテーマカスタマイザーを使って背景色を変更できる場合があります。コードを編集することなく、リアルタイムでサイトの外観を編集することができます。
WordPressテーマカスタマイザーにアクセスするには、サイトにログインし、外観 ” カスタマイズに進みます。
テーマカスタマイザーが開き、テーマを変更するための複数のオプションが表示されます。メニュー、色、ホームページ、ウィジェット、背景画像などが含まれます。
利用可能なオプションは、サイトが使用しているWordPressテーマによって異なります。このチュートリアルでは、デフォルトのTwenty Twenty-Oneテーマを使用します。
サイトの背景色を変更するには、左側のメニューから「カラー＆ダークモード」設定タブをクリックします。
次に、「Background Color（背景色）」オプションをクリックし、サイトの色を選択します。
カラーピッカーツールを使用するか、16進数のカラーコードを入力して背景を選択できます。
変更が終わったら、忘れずに「公開する」ボタンをクリックしてください。
これで、WordPressサイトにアクセスして、新しい背景色を実際に確認することができます。
お使いのテーマには、テーマ・カスタマイザーでこの設定ができない場合があります。その場合は、以下の方法をお試しください。
フルサイトエディターによる背景色の変更
フルサイトエディター（FSE）は、サイトの背景色を編集するために使用できるブロックベースのWordPressテーマエディターです。サイトのデザインをカスタマイズするためのさまざまなブロックを提供し、WordPressブロックエディターを使用するのと似ています。
完全なサイトエディターは現在、Twenty Twenty-Twoテーマのような一部のWordPressテーマで利用可能です。背景色の変更を行うには、WordPressダッシュボードから外観 ” エディターに移動します。
フルサイトエディターでは、各ブロックの背景色を変更することができます。
まず、編集したいブロックを選択します。次に、右側の設定パネルから「色」セクションに移動し、「背景」オプションをクリックして色を選択します。
終わったら、「保存」ボタンをクリックします。
一方、すべてのブロックの背後に表示される背景色を追加したい場合は、Coverブロックを追加することができます。
まず、上部の「+」記号をクリックし、「カバー」ブロックを追加する。
次に、テーマテンプレートの「表紙」ブロックが表示され、背景色のオプションがいくつか選択できる。
オプションとして、右側の設定パネルからオーバーレイセクションに移動し、「カラー」オプションをクリックすることもできます。
色を選んだら、次のステップはページ全体にその色を表示することです。
まず、上部にある3つのダッシュのリスト表示アイコンをクリックします。テーマのアウトラインが開き、さまざまなセクションが表示されます。
次に、リスト表示のすべてのテーマ要素をCoverブロックの下にドラッグ＆ドロップするだけです。
そうすると、カバーブロックの色がサイト全体の背景色として表示されます。
一番上の「保存」ボタンをクリックし、変更内容を保存することをお忘れなく。
カスタムCSSの追加による背景色の変更
CSSを使って背景色を変更する方法をご存知ですか？
WordPressサイトの背景色を変更するもう一つの方法は、WordPressテーマカスタマイザーでカスタムCSSを追加することです。
まず、外観 ” カスタマイザーを開き、「追加CSS」タブを開きます。
次に、以下のコードを入力する：
body {
background-color: #FFFFFF;
}
すべて、背景色のコードをサイトで使用したい色のコードに置き換えるだけです。次に、Additional CSSタブにコードを入力します。
完了したら、忘れずに「公開する」ボタンをクリックしてください。これで、あなたのサイトにアクセスして新しい背景色を表示することができます。
詳しくは、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
WordPressの背景色をランダムに変更する
さて、WordPressの背景色をランダムに変更する方法をお探しですか？
異なる背景色間を自動的に移行するスムーズな背景色変更エフェクトを追加できます。エフェクトは、最終的な色に達するまで複数の色を通過します。
この効果を追加するには、WordPressサイトにコードを追加する必要があります。以下にその手順を説明します。
まず最初に行う必要があるのは、スムーズな背景色変更効果を追加したいエリアのCSSクラスを見つけることです。
ブラウザーにあるインスペクトツールを使って、これを行うことができます。すべて、色を変えたいエリアにマウスを持っていき、右クリックして検査ツールを選択するだけです。
その後、ターゲットにしたいCSSクラスを書き込む必要がある。例えば、上のスクリーンショットでは、CSSクラス「page-header」を持つエリアをターゲットにしたい。
次に、コンピューター上でメモ帳のようなプレーンテキストエディターを開き、新規ファイルを作成する必要があります。そのファイルをデスクトップに’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);
});
});
コードを見ると、「ページヘッダー」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スクリプトを 適切に読み込みます：
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ツールを使用することでそれを行うことができます。
以下はその例である：
<article id="post-104" class="post-104 post type-post status-publish format-standard hentry category-uncategorized">
投稿IDを取得したら、以下のカスタムCSSを使用して個々の投稿の背景色を変更することができます。投稿IDを自分の投稿IDに一致させ、背景色を希望するコードに置き換えるだけです。
.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}
カスタムCSSを追加するには、WordPressテーマカスタマイザーを使用します。まず、WordPressサイトにログイン中であることを確認してください。次に、ブログ投稿にアクセスし、上部にある「カスタマイズ」オプションをクリックします。
その後、左側のメニューから「Additional CSS」タブに移動します。
次に、カスタムCSSを入力します。
それが完了したら、『公開する』ボタンをクリックする。
これであなたのブログ投稿にアクセスして、新しい背景色を見ることができます。
投稿者、コメント、カテゴリーごとに背景色を変えたい場合は、WordPressの投稿日ごとに背景色を変える詳しいチュートリアルをご覧ください。
背景に動画を使う
サイトの背景に動画を使用することは、訪問者の注意を引き、ユーザーエンゲージメントを高める素晴らしい方法です。
背景に動画を追加する最も簡単な方法は、WordPressプラグインを使うことです。このチュートリアルでは、バックグラウンド動画にmb.YTPlayerを使用します。
WordPressサイトのバックグラウンドでYouTube動画を再生できる無料のプラグインです。mb.YTPlayerのウォーターマークを取り除くことができるプレミアムバージョンもあり、より多くのカスタマイズ機能を提供しています。
まず、サイトにプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。
有効化した後、WordPress管理エリアからmb.ideas ” YTPlayerにアクセスしてください。
次の画面では、YouTube動画のURLを入力し、背景動画を有効化する必要があります。
その上、プラグインは背景動画を表示する場所を選択することができます。静的ホームページ、ブログインデックスホームページ、またはその両方を選択できます。すべて」を選択すれば、サイト全体に動画を表示する設定もある。
動画のURLを入力し、背景を有効化したら、あなたのサイトにアクセスして動画の背景を実際に見てみましょう。
カスタマイザー・ランディングページの作成
WordPressでカスタマイザーページを作成すると、リードを生成し、ビジネスの売上を向上させることができます。ページの背景色やデザインを完全にコントロールできます。
非常に魅力的なカスタムランディングページを作成する最も簡単な方法は、SeedProdを使用することです。WordPressのための最高のランディングページプラグインであり、コードを編集することなくページを作成するための使いやすいドラッグアンドドロップページビルダーを提供しています。
まず最初に、あなたのサイトにSeedProdをインストールし、有効化する必要があります。WordPressプラグインのインストール方法はこちらをご覧ください。
注： SeedProd Proバージョンは、より強力な機能、テンプレート、カスタマイズオプションを提供しているため、私たちはSeedProd Proバージョンを使用します。しかし、WordPress.orgで利用可能な無料版もあります。
プラグインが有効化されると、ライセンスキーの入力を求められます。キーはSeedProdアカウントエリアにあります。キーを入力した後、’Verify Key’ボタンをクリックしてください。
次に、SeedProd ” ページにアクセスしてください。
ここから「新規ランディングページを追加」ボタンをクリックします。
その後、ランディングページのテーマを選択する必要があります。SeedProdは美しいランディングページのテンプレートをたくさん提供しています。
空白のテンプレートを使ってゼロから始めることもできます。しかし、ランディングページをより簡単かつ迅速に作成する方法として、テンプレートを使用することをお勧めします。
テンプレートを選択すると、ページ名の入力とURLの選択が求められます。
その後、’Save and Start Editing the Page’ボタンをクリックするだけです。
次の画面では、SeedProdページビルダーが表示されます。ここでは、ドラッグ＆ドロップビルダーを使用して、左側のメニューからブロックを追加することができます。見出し、動画、画像、ボタンなどを追加できます。
下にスクロールすると、Advancedセクションの下にさらにブロックがあります。例えば、緊急性を高めるためにカウントダウンタイマーを追加したり、フォロワーを増やすためにソーシャルプロフィールを表示したり、リードを集めるためにオプションフォームを追加したりすることができます。
ドラッグ＆ドロップビルダーを使えば、ランディングページの各ブロックの位置を簡単に変更できます。テキストのレイアウト、サイズ、色、フォントも変更できます。
ランディングページの背景色を変更するには、ページの任意のセクションを選択するだけです。左側のメニューに、背景のスタイルや色を編集したり、画像を追加したりするオプションが表示されます。
ランディングページの編集が終わったら、上部にある「保存」ボタンを忘れずにクリックしましょう。
次に、’接続’タブに移動し、ページをさまざまなメールマーケティングサービスと統合することができます。例えば、Constant Contactや Brevo（旧Sendinblue）などに接続することができます。
その後、「ページ設定」タブをクリックする。
ここで、ページの状態を下書きから公開に変更し、ページを公開することができます。
その他、ページのSEO設定の変更、アナリティクスの表示、スクリプトのカスタムコードの追加、カスタムドメインの入力も可能です。
完了したら、SeedProdページビルダーを終了し、カスタムランディングページにアクセスします。
WordPressで背景色を変更する方法について、この投稿がお役に立てば幸いです。また、FigmaをWordPressに変換する方法や、最高のウェブデザインソフトウェアの比較もご覧ください。
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。