WordPressでブロックの背景色を変更する方法

この記事をAIで要約する

WordPressでブロックの背景色を変更する方法

視覚的に美しいWordPressウェブサイトを作成したい場合、背景色を変更することで、重要なコンテンツを強調したり、視覚的な階層を明確にしたり、サイトの魅力を高めたりすることができます。しかし、WordPressのブロックエディタには非常に多くのブロックが用意されているため、それぞれのブロックの背景色を変更する方法がわからず混乱することがあります。

背景色の設定が組み込まれているブロックもありますが、少し違ったアプローチが必要なブロックもあります。良いニュースは、ほとんどのWordPressコアブロックは、ネイティブの背景色のカスタマイズをサポートしていることです。

このガイドでは、サイト上のあらゆるブロックを自信を持ってスタイリングできるように、3つの簡単な方法を説明します。直接色を変更できるブロック、グループブロックの使い方、ヒーローセクションやバナーのような高度なデザインのためのカバーブロックについて説明します。さっそく始めましょう。


方法1:直接背景色(ネイティブ対応)

WordPressのコアブロックの多くは、背景色の変更をネイティブでサポートしています。これは、余分なブロックやカスタムコードを追加することなく、直接色を適用できることを意味します。

ステップ1:ブロックの選択

まず、エディター内でカスタマイズしたいブロックをクリックしてください。これでブロックが有効になり、その設定が ブロック設定 右側のパネル。

ブロックを選択する

ステップ2:ブロック設定サイドバーを開く

設定パネルが表示されていない場合は 設定 ボタンをクリックします。その下にある ブロック設定 パネルで スタイル セクションを参照されたい。

ブロック設定サイドバーを開く

ステップ3:背景色の調整

スタイル設定パネルから カラー セクションを参照。以下 カラー設定見つける 背景.あとはパレットから色を選ぶか、カラーピッカーを使うか、カスタムHEX/RGB/HSLコードを入力するだけです。

背景色の調整

適用対象

  • テキスト&コンテンツブロック:段落、見出し、リスト、引用、プルクオート、コード、プリフォーマット、節
  • レイアウト・ブロック:グループ、コラム、表紙、メディア&テキスト
  • インタラクティブ/ウィジェット・ブロック:ボタン、カレンダー、最新記事、カテゴリー、タグクラウド、ソーシャルアイコン、ナビゲーション、ファイル、オーディオ、ビデオ、RSS、検索、ログイン/アウト、ページ一覧
  • サイト/ポストブロック:サイトタイトル、サイトタグライン、投稿タイトル、投稿内容、投稿抜粋、投稿日、投稿者、投稿カテゴリー、投稿タグ、コメント、次/前の投稿、続きを読む
  • ユーティリティ・ブロック:スペーサー(限定)、セパレーター(限定)、テーブル(テーブル全体のみ)。 

備考

  • カバーブロック: 背景の代わりにオーバーレイオプションがあります。レイヤー効果のための不透明度設定とともに、オーバーレイの色を調整できます。