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

公開: 2021-08-09

Webサイトの訪問者が最初に気付くのはその背景です。 単純な色の場合もありますが、画像やその他の視覚資料の組み合わせにすることもできます。 第一印象と並んで、それは高品質のデザインの本質の1つです。 良くも悪くも、それはあなたのブランド、スタイル、読みやすさ、そしてプロ意識そのものを反映します。 そのため、WordPressで背景色を決定することは、一般的に、最初の設計上の選択肢の1つです。 問題は、非常に多くのテーマがあるため、さまざまなカスタマイズオプションが用意されていることです。 その場ですべてを変更できるものもあれば、限られたオプションしか提供しないものもあります。

WordPressで背景色を変更するいくつかの方法

ご想像のとおり、コーディングの知識があれば、すべてを行うことができます。 ただし、WordPressを使用するすべての人がプロのプログラミングをしているわけではありません。 平均的なユーザーの大多数は、ページをカスタマイズするために初心者向けのソリューションを必要としています。 これらの中で、WordPressの背景色を変更することは一般的な問題の1つです。 もちろん、あらゆる要素を構築し、Webサイトのデザインを完成させるために、プロのWordPressサイトケア支援をいつでも利用できます。 ただし、それが選択肢にない場合は、さまざまなアプローチを試してWebサイトをパーソナライズできます。

ウェブサイトの背景、雑誌の表紙、パンフレットとして風景画像を使用します。
Webサイトをパーソナライズしようとするときは、さまざまなアプローチを試してください。

ただし、それは必ずしも単純ではありません。 あなたがしなければならない最初の決定はあなたが望む背景のタイプです。 選択できる人気のあるオプションはいくつかあり、組み合わせることもできます。

  • シンプルな色または色の任意の組み合わせを選択できます
  • 1つまたは複数の色をグラデーションに結合します
  • 画像を背景として配置します
  • 代わりにビデオを使用してください

WordPressで単に背景色を変更するか、より複雑なオプションを使用するかを決定したら、カスタマイズを適用するためのいくつかの方法を見つけましょう。

  1. テーマがカスタム背景をサポートしている場合
  2. 簡単なコードを使ってみることができます
  3. プラグインを使用してWordPressの背景色を変更する
  4. 高度なツールを使用してすべてをカスタマイズする

1.テーマがカスタム背景をサポートしている場合

ほとんどの場合、[外観]> [カスタマイズ]に移動すると、テーマがサポートするオプションを簡単に確認できます。 そこで、どのカスタマイズオプションが許可されているかを確認できます。 場合によっては、色、背景画像、色とダークモード、色と背景などを選択するオプションがあります。 本当にテーマ次第です。 サポートされている場合は、目的のオファーを選択してさらにカスタマイズすることができます。

背景色を変更する適切なオプションを見つけたら、クリックして非常に直感的なインターフェイスを探索します。 通常、いくつかのデフォルトのカラーオプションから選択できます。 ただし、近くには常に「パレットを選択」オプションがあります。 または、任意の色の16進コードを入力するだけです。

より複雑な円形のカラーパレット。
さまざまなツールを使用して、適切な16進カラーコードを選択できます。

色に加えて、一部のテーマでは、画像やその他のビジュアルを配置するオプションが提供されます。 ここから、背景画像をメディアライブラリにアップロードし、直接選択するように求められます。 さらに、その位置、繰り返し、下にある色またはオーバーレイする色などを設定できます。

2.簡単なコードを使用してみることができます

CSSに少し慣れている場合は、カスタムコードを追加することで簡単なカスタマイズを行うことができます。 特に背景色を設定する場合は、それほど高度なことではありません。 [外観]>[カスタマイズ]に移動し、 [追加のCSS]を選択して、次のコード行を入力するだけです。

.body { background-color: #fff; }

ここで、「＃fff」は、選択した色の任意の16進コードにすることができます。 一般的に、カラーピッカーツールを使用すると、カラーコードを簡単に見つけることができます。 ただし、これはすべてのテーマで機能する、または許可されるとは限りません。

3.プラグインを使用してWordPressの背景色を変更します

SiteOrigin CSS

他のオプションで結果が得られない場合は、いつでもプラグインを使用して作業を完了できます。 SiteOrigin CSSのようなWordPressプラグインは、カスタマイズを制御できる強力なツールです。 特に、このプラグインを使用すると、背景色を簡単に編集して、リアルタイムでどのように表示されるかを確認できます。 これは、本質的に、ほとんどの初心者が必要とするものです。 上級ユーザーの場合は、CSSコードを調整するときにオートコンプリート機能が気に入るはずです。 さらに、その「インスペクター」は、必要になる可能性のあるセレクターをすぐに見つけるのに役立ちます。

最良の部分であるSiteOriginCSSは、あらゆるテーマで機能する無料のプラグインです。

AWB –高度なWordPressの背景

背景色を変更するだけでは不十分な場合、AWBはシンプルで効果的なプラグインであり、Webサイトのレイアウトに少しエッジを追加します。 従来のオプションに加えて、AWBでは次のようなより複雑なバックグラウンドソリューションを使用できます。

  • 視差の背景
  • マウス視差
  • パターン
  • さまざまな画像形式
  • 透明度のあるオーバーレイカラー
  • セルフホストおよびオンラインソースの両方からのあらゆる種類の異なるビデオ形式

さらに、ビジュアルショートコードメーカーを使用して、プロセスを簡単にすることができます。 また、人気のあるWPビルダーやグーテンベルクを好む場合は、それらと完全にうまく機能します。

4.高度なツールを使用してすべてをカスタマイズします

ラップトップ、タブレット、およびスマートフォンでの抽象的なライブバックグラウンド効果。
背景から他の要素まですべてをカスタマイズして、Webサイトの視覚的な魅力を変更します。

上記のどれも十分ではなく、より「堅牢な」ソリューションが必要な場合は、CSSHeroという名前のかなり高度なプラグインがあります。 これは、WYSIWYGインターフェイスの有効性を示す完全なカスタマイズシステムです。 これは、基本的に、 「あなたが見るものはあなたが得るものである」という原則を表しています。 CSS Heroは、箱から出してすぐに機能するプラグインであり、ほとんどのテーマや他のプラグインとの互換性を提供します。 実際には、任意の要素をクリックするだけで、色、背景、フォントなどの属性を問題なく変更できます。 ライブプレビューのおかげで、行ったすべての変更がすぐに表示されます。

その機能にもかかわらず、軽量プラグインであることはCSSヒーローの最大の特徴です。 さらに、行った変更はテーマファイルの変更ではありません。 作業が完了したら、Webサイトを壊すリスクなしに、簡単にアンインストールできます。 唯一の欠点は、有料のサブスクリプションを必要とするプレミアムプラグインです。

結論

WordPressで背景色を変更したい場合、単純ではない場合があります。 デフォルトのWordPressカスタマイズオプションを使用できる場合もありますが、常にそうとは限りません。 場合によっては、コーディングの知識があると、迅速な解決策を見つけるのに役立ちます。 しかし、これはWordPressの最高の機能の1つであるため、プラグインはほとんどすべてを完了するのに役立ちます。