WordPressで画像の背景を設定する方法

WordPress に背景画像を追加する方法は他にもあります。基本的なものから最も高度なものまで、テーマコードが変更されます。ただし、コーディングやデザインの知識がない Web サイト管理者にとって理想的な、使いやすいツールを導入できることを嬉しく思います。 Citadela Proプラグイン Web サイトをカスタマイズするための多くの機能と設定が付属しています。

Citadela Pro プラグインの強力なブロック、設定、機能を無料でお試しください。すべてのプレミアム機能を備えた 7 日間のトライアルを提供しています。 WordPress ページ、投稿、カスタム投稿タイプに背景画像を追加できる完璧なツールを探索できます。

クラスターは、背景画像を追加できる WordPress の Gutenberg ブロックです。多機能要素を使用すると、WordPress の背景をデフォルトから変更できます。背景画像を追加するだけでなく、他のブロックと組み合わせることもできます。多くのバリエーションと多用途性が得られます。

と組み合わせると、 ページタイトルブロック、素晴らしい見栄えのウェブサイトを簡単に手に入れることができます。 WordPress でさらに Gutenberg ブロックを追加し、背景画像をカスタマイズできます。また、再利用可能なブロックなどのブロックのセットを保存し、Web サイトの任意の場所にテーマを追加することもできます。したがって、背景のWordPress Webサイトを一度に変更できます。

Gutenbergブロックを使用してWordPressに背景画像を追加する方法

Cluster ブロックを使用した WordPress 背景画像

WordPress用に作った背景画像用のGutenbergブロック - Clusterブロックを紹介します。これは独自のブロック グループの一部です。 Citadela Pro プラグインには、美しいウェブサイトの作成に役立つ多くの機能が備わっています。すべての AitThemes カスタム ブロックは次の場所で利用できます。 Citadela Proプラグイン.

読んでください クラスターブロックのドキュメント 詳細設定については。

クラスター ブロックを使用すると、複数のブロックを 1 つにグループ化できます。クラスター化されたグループ全体が 1 つのブロックであるため、効果的に作業できます。クラスター幅はページ幅全体に設定できます。これは、さまざまなブロックを追加するための特別に大きなスペースがあることを意味します。

次の場合、クラスターは全幅に拡張されません。

• アクティブなサイドバーがあります
• クラスターのスペースを制限する列を使用する場合

WordPress のコア ブロックの一部はコンテンツの幅にのみ調整できるため、クラスター ブロックを使用すると、Web サイトを構築する際の多様性が高まります。優れた機能は、WordPress に背景画像を設定したり、その色を変更したり、背景画像のオーバーレイを設定したりできることです。したがって、Web サイトのデザインに合わせて背景を構成できます。

この記事では次のことを説明します。

• WordPressエディターにクラスターブロックを追加する方法
• クラスター内のグループ化
• ツールバーの基本設定
• 見出しと区切り文字の色
• グループ化されたブロックの下に背景画像を追加する方法
• 背景オーバーレイとは
• グループブロックとAitクラスターブロックの違いは何ですか

クラスターブロックの追加方法

クラスター ブロックはプレミアム ブロックであり、インストールしてアクティブ化した場合にのみ使用できます。 Citadela ブロックプラグイン。プラグインをインストールすると、クラスター ブロックが WordPress ブロック エディターに自動的に追加され、すぐに作業を開始できます。

クラスター ブロックは投稿とページの両方に追加できます。トップバーまたはエディターのデスクトップ上の任意の場所で「+」記号をクリックするだけです。その後、Cluster ブロックを検索するだけです。

Cluster ブロックを追加する 2 番目のオプションは、「/」とその後にブロック名を入力することです。これで、クラスター ブロックを使用できるようになります。

クラスターを使用したブロックのグループ化

Cluster ブロックの主な機能は、複数のブロックを 1 つにグループ化することです。仕組みを見てみましょう。クラスター ブロックをページに挿入すると、すぐにプレースホルダーが表示されます。 「ここにさらにブロックを挿入してください」。 それをクリックすると、使用可能なすべてのブロックのリストが表示されます。リスト上部の検索バーを使用して、要求されたブロックを検索することもできます。

すべてのネストされたブロックには、デフォルトのオプションと設定がすべて利用可能になります。たとえば、画像ブロックを挿入すると、画像をアップロードするか、メディア ライブラリから画像を選択するかのオプションが表示されます。

クラスター ブロックを使用すると、たとえば、Web サイト上に最近の作品を紹介する目を引くセクションを作成できます。ポートフォリオから画像を追加し、その下に背景画像を設定します。ポートフォリオへの素敵なリンクが作成されました。

クラスターブロックは商品の魅力的なプレゼンテーションにも活用できます。製品画像をセクションの背景として設定し、その色を選択できます。 サービスブロック Cluster ブロック内にネストすることもできます。

複数のブロックを 1 つのブロックにまとめたもの

複数のネストされたブロックをクラスターに追加する場合は、Columns ブロックを使用できます。 Column ブロックを使用すると、複数のブロックを並べて追加できます。各列には、画像、段落、リスト、ボタンなど、異なるコンテンツ タイプを含めることができます。

複数の列をクラスター ブロックと組み合わせた典型的な例は、1 ページの Web サイトです。

ツールバーの基本設定: コンテンツの配置オプション

デフォルトでは、クラスターのブロック幅はコンテンツ サイズに設定されます。この動作はツールバーで変更できます。次のオプションが利用可能です。

• コンテンツ サイズ – デフォルト オプション。クラスター ブロックはコンテンツと同じ幅になります。
• 広いサイズ – クラスター内のコンテンツはコンテンツの幅よりも広いです。
• 全幅サイズ - この場合、クラスター幅はブラウザ ウィンドウの左右の幅です。

この設定は、現在アクティブなテーマがクラスター コンテンツをサポートしている場合にのみクラスター コンテンツに影響することに注意することが重要です。すべてのネストされたブロックは、オプションの可用性に基づいて構成できます。

見出しとセパレータの色の設定

見出しの色の変更

WP 5.3 以降、見出しブロックを通じてヘッダーの色を切り替えることができます。これは非常に便利な機能です。特に暗いレイアウトと配色を使用している場合は、デフォルトのテキストの色 (黒) を明るい色に変更することをお勧めします。

新しいリリースまで見出しの色を変更することはできず、暗いベースでの視認性に問題が発生していました。そのため、見出しがWordPressの背景画像や追加した写真と混ざってしまうことがよくありました。適切な見出しの色を選択して、サイトを輝かせることができるようになりました。

ウェブサイトで使用されているセパレーターの新しい色

WP に背景画像やその他の種類のコンテンツを追加する場合、場合によっては、それを Web サイトの残りの部分から分離する必要があります。この目的のために、Separator と呼ばれる特別なブロックを使用できます。セパレータを挿入すると、次のことが可能になります。

• 特定のブロックを分離する
• テキスト全体を小さなセクションに分割する
• 重要な部分を強調表示する
• コンテンツの読みやすさを確保する
• ウェブサイト上のナビゲーションを簡素化する

さらに、更新されたWordPressでは区切り線の色を変更できるようになりました。 Colored Separator は、Web サイトの配色を完成させるのに最適です。

グループ化されたブロックの下に背景画像を追加する方法

クラスター ブロックの真の機能は、グループ化されたブロックの下に背景画像を追加し、背景色を設定できることです。すべてはWordPressインスペクター内で簡単に設定できます。やり方を見てみましょう。

1. 背景画像をクリックして、「背景画像を表示」機能を有効にします。
2. 「画像を選択」をクリックします。メディアライブラリが開きます。既存の画像を選択するか、新しい画像をライブラリにアップロードできます。
3. 背景画像を固定にすることもできます。つまり、ページをスクロールしても、背景はコンテンツとともに移動せず、その位置は固定されます。
4. 「Focal Point Picker」を使用して、背景画像のどの部分を表示するかを選択することもできます。パーセンテージを使用して画像の一部を選択することもできます。

背景オーバーレイ

クラスターの高度なオプションの 1 つは、背景画像オーバーレイです。デフォルトの色のいずれかを選択することも、カラーピッカーを使用してカスタムカラーを選択することもできます。色の不透明度を設定することも可能です。これらのクラスター ブロック設定は、非常に魅力的な Web サイトのプレゼンテーションを作成するのに役立ちます。

コアで新しいグループ ブロックが利用可能になりました

Group ブロックと AitThemes Cluster ブロックの違いは何ですか?

当社のカスタムメイドのクラスターブロックはグループブロックよりも早くリリースされ、より複雑なソリューションを提供します。グループ ブロックを使用して複数のブロックをグループ化できますが、それでも機能は限られています。たとえば、ブロック内でカラー オーバーレイを設定することはできません。選択できるのは、画像の上ではなく周囲の基本的な背景色のみです。

背景画像の編集は、クラスター ブロックでは簡単です。

WordPress の背景画像にアップロードし、その背景色と背景色のオーバーレイを設定できます (オーバーレイの不透明度もカスタマイズできます)。所要時間はわずか数分です。