視覚的に美しいWordPressウェブサイトを作成したい場合、背景色を変更することで、重要なコンテンツを強調したり、視覚的な階層を明確にしたり、サイトの魅力を高めたりすることができます。しかし、WordPressのブロックエディタには非常に多くのブロックが用意されているため、それぞれのブロックの背景色を変更する方法がわからず混乱することがあります。
背景色の設定が組み込まれているブロックもありますが、少し違ったアプローチが必要なブロックもあります。良いニュースは、ほとんどのWordPressコアブロックは、ネイティブの背景色のカスタマイズをサポートしていることです。
このガイドでは、サイト上のあらゆるブロックを自信を持ってスタイリングできるように、3つの簡単な方法を説明します。直接色を変更できるブロック、グループブロックの使い方、ヒーローセクションやバナーのような高度なデザインのためのカバーブロックについて説明します。さっそく始めましょう。
方法1：直接背景色（ネイティブ対応）
WordPressのコアブロックの多くは、背景色の変更をネイティブでサポートしています。これは、余分なブロックやカスタムコードを追加することなく、直接色を適用できることを意味します。
ステップ1：ブロックの選択
まず、エディター内でカスタマイズしたいブロックをクリックしてください。これでブロックが有効になり、その設定が ブロック設定 右側のパネル。
ステップ2：ブロック設定サイドバーを開く
設定パネルが表示されていない場合は 設定 ボタンをクリックします。その下にある ブロック設定 パネルで スタイル セクションを参照されたい。
ステップ3：背景色の調整
スタイル設定パネルから カラー セクションを参照。以下 カラー設定見つける 背景.あとはパレットから色を選ぶか、カラーピッカーを使うか、カスタムHEX/RGB/HSLコードを入力するだけです。
適用対象
- テキスト＆コンテンツブロック:段落、見出し、リスト、引用、プルクオート、コード、プリフォーマット、節
- レイアウト・ブロック:グループ、コラム、表紙、メディア＆テキスト
- インタラクティブ／ウィジェット・ブロック:ボタン、カレンダー、最新記事、カテゴリー、タグクラウド、ソーシャルアイコン、ナビゲーション、ファイル、オーディオ、ビデオ、RSS、検索、ログイン/アウト、ページ一覧
- サイト/ポストブロック:サイトタイトル、サイトタグライン、投稿タイトル、投稿内容、投稿抜粋、投稿日、投稿者、投稿カテゴリー、投稿タグ、コメント、次/前の投稿、続きを読む
- ユーティリティ・ブロック:スペーサー（限定）、セパレーター（限定）、テーブル（テーブル全体のみ）。
備考
- カバーブロック： 背景の代わりにオーバーレイオプションがあります。レイヤー効果のための不透明度設定とともに、オーバーレイの色を調整できます。
- ボタン・ブロック 背景色はボタン自体に適用され、テキスト色オプションはボタンのテキストを変更します。
- ソーシャル・アイコン 背景色はアイコンコンテナのみに影響する。
- テーブル・ブロック:
- を変更する。 テーブル全体の背景色テーブルブロックを選択し、設定パネルで色を適用します。
- 行の色を変えることはできますが、デフォルトのオプションに限られます。デフォルトの スタイル セクションで ストライプ オプションがありますが、ストライプの色はあらかじめ定義されており、ネイティブにカスタマイズすることはできません。
方法2：グループ・ブロックで包む
メディア、レガシー、ユーティリティ・ブロックなど、ネイティブの背景色オプションを持たないブロックには Group block を使用して、柔軟なコンテナとして機能させることができます。グループブロックの中にコンテンツを包み込むことで、セクション全体に背景色を適用することができます。
ステップ1： 特定ブロックの特定とターゲット
背景色をサポートしていないブロックを直接クリックしてください。そうすると、そのブロックの上にブロックツールバーがポップアップします。
ステップ2：ブロックをグループ化する
をクリックします。 オプションメニュー (3つの点)を選択します。 グループ をドロップダウンメニューから選択する。これにより、選択されたブロックがグループブロックの中に包まれます。
ステップ3：グループ・ブロックの選択
グループ・ブロックの外縁をクリックし、ツールバーが表示されたら、左端にある親グループ・ブロックを選択する。これでセクション全体がハイライトされます。
ステップ4：背景色を適用する
すぐに ブロック設定パネルまでスクロールする。 カラー セクションで背景色を選択するか、カラーピッカーを使用してカスタムシェードを選択します。
ステップ5：スペーシングの調整（オプション）
グループブロック内のコンテンツがブロックの幅全体を占める場合、背景色を表示するためにコンテンツの幅を調整する必要があるかもしれません。その場合は グループ ブロックに移動し（ステップ3で行ったように）、次に ブロック設定までスクロールする。 コンテンツ幅そして、カスタム幅を設定し、コンテンツと色のついた背景の間にスペースを作る。
適用対象
- 直接サポートなしのメディアブロック： 画像（表紙に変換されていない場合）、動画、音声
- レガシー／ユーティリティ・ブロック ショートコード、クラシック、その他、カスタムHTML、レガシーウィジェット、テンプレートパーツ、改ページ、アーカイブ、埋め込み（YouTube、Twitterなど）、アバター、コメントクエリループ、スペーサー（高度なコントロール用）、セパレーター（柔軟性追加用）
備考
- グループブロックは、背景色が統一されたセクションを作成するのに最適です。
- グループ・ブロックの中に複数のブロックを入れ子にして、1つのまとまったセクションとしてスタイル設定することができます。
- レイアウト設定（アライメントやパディングなど）を調整することで、スペーシングやコンテンツの流れをよりよくコントロールできます。
方法3：カバーブロックを使う
オーバーレイ効果やレイヤー背景など、高度なデザインオプションが必要な場合は カバーブロック は完璧なソリューションです。カスタマイズ可能な不透明度で背景色や画像を追加できるので、ヒーローセクション、バナー、特集コンテンツエリアに最適です。
ステップ1：カバーブロックを追加する
をクリックして開始します。 + ボタンをクリックし カバーそれをコンテンツに挿入する。
ステップ2：背景色の選択
初期設定から、背景色を選択するか、画像を追加します。画像を使用する場合でも、色を使用する場合でも、オーバーレイの色を変更し、オーバーレイの不透明度を調整することができます。そのためには カラー の下にある。 スタイル タブの ブロック設定.
ステップ3：表紙ブロックの中にコンテンツを挿入する
カバーブロックの中にコンテンツを挿入するには、単純に ブロックツールバー を使用して、スタイル設定したいブロック (段落、見出し、画像など) を表紙ブロックにドラッグするか、新しいブロックを直接追加します。 ブロックインサーター (ボタン）。
適用対象
- 高度な設計ニーズに対応： 段落、見出し、画像、ボタン、あるいは複数のブロックを組み合わせたものなど、背景のレイヤー効果を必要とするあらゆるブロック。
備考
- カバーブロックは以下の用途に最適である。 ヒーローセクション, コール・トゥ・アクション・エリアそして バナー.
- 背景色や画像の上にテキストを重ねることで、印象的な視覚効果を得ることができます。
- 微妙なオーバーレイや大胆なカラーブロックのために不透明度を調整する。
総括表ブロックとメソッド
ブロック・カテゴリー |
方法 |
|---|---|
テキスト／コンテンツブロック（段落、見出し、リストなど） |
方法1 |
メディアブロック（画像、動画、音声など） |
方法2または3 |
レイアウトブロック（カラム、グループ、カバーなど） |
方法1、2、または3 |
インタラクティブブロック（ボタン、ソーシャルアイコンなど） |
方法1 |
ウィジェットブロック（検索、カレンダーなど） |
方法1 |
レガシー／ユーティリティ・ブロック（ショートコード、クラシックなど） |
方法2 |
結論
ウェブサイトの全体的なルック＆フィールに大きな影響を与える最も簡単な方法は、おそらく使用しているWordPressコアブロックの背景色を変更することです。適切な背景色を使用してコンテンツを配信するあなたの選択は、間違いなくウェブサイトの閲覧者を魅了するでしょう。ユーザーエクスペリエンスを向上させ、サイトを目立たせるためのシンプルかつ強力なハックです。ネイティブの背景色設定を選んでも、グループブロックの方法を使っても、カバーブロックのアプローチを選んでも、結局のところ、色を追加することだけが重要なのではなく、コンテンツがより大きな声で話す環境を作ることが重要なのです。ですから、色を試してみてください。そして、小さな変化があなたのウェブサイトをより効果的なプラットフォームに変えることができるかを確かめてください。
