WordPressカバーブロックの使用方法

WordPressカバーブロックは興味深いです。 画像、ビデオ、または単色を背景に配置し、コンテンツブロックを前景に追加できます。 これは、他のブロックの上にブロックを配置できることを意味します。 ほとんどのブロックよりも多くのオプションがあります。 カバーブロックの使い方を知っていると、ウェブサイトのデザインを大幅に向上させることができます。

この記事では、カバーブロックの機能と、その設定とオプションについて説明します。 また、使用方法のベストプラクティスと、よくある質問についても説明します。

投稿またはページにカバーブロックを追加する方法

カバーブロックをページと投稿に追加するには、コンテンツ内またはページの左上隅にあるブロックアイコンを選択し、ブロックの名前を入力して選択します。

/ coverと入力して、Enterキーを押すか、ブロックを選択することもできます。

次に、コンテンツにカバーブロックがあり、画像やビデオなどのメディアを追加したり、背景に色を使用したり、前景にテキストを配置したりできます。 メディアフォルダまたは色からコンテンツを選択すると、テキストオプションが前面に表示されます。

メディアライブラリから画像を追加し、画像の上にキャプションを追加しました。 キャプションは段落ブロックです。 他の種類のブロックに変更したり、ビデオを埋め込んだりすることができます。

Enterキーを押して、複数のブロックを追加することもできます。 通常どおりブロックから選択します。

背景に事前に選択された色の1つから選択することもできます。

色は、画像のオーバーレイとして使用できます。

カバーブロックの設定とオプション

カバーブロックには、設定とオプションのある2つの領域があります。 1つ目はカバーツールバーです。 2つ目は、右側のサイドバーのカバーブロックオプションです。

カバーブロックツールバー

カバーブロックの任意の場所をクリックすると、ツールバーが開きます。

カバーブロックのタイプまたはスタイルを変更する

最初の設定では、列の数を変更し、グループ化して画像に変更し、デフォルトまたは境界線からスタイルを選択できます。 ホバーするとプレビューが表示されます。 画像にカーソルを合わせています。 画像は、オーバーレイにあるコンテンツブロックを削除します。

ドラッグまたは移動

ドラッグツール（6ドット）をつかんで、ブロックを任意の場所にドラッグします。 移動ツールを使用すると、矢印をクリックして、コンテンツ内のブロックまたはテキストを上に移動できます。

配置

配置オプションには、左、中央、右、幅広、全幅があります。 左右は、その下の段落でブロックをラップします。

これが全幅の画像です。 これは、タイトルの作成、セクションの分割などに使用できます。

コンテンツの位置を変更する

これにより、コンテンツの場所が選択されます。 ドットのある3×3グリッドを開きます。 ドットを選択すると、コンテンツが画像内のその場所に移動します。

フルハイトを切り替えます

これにより、画像のサイズが変更されるのではなく、画像が完全な高さに設定されます。

デュオトーンフィルターを適用する

事前に選択したオプションからデュオトーンを選択します。 1つはシャドウに適用され、もう1つはハイライトに適用されます。

スライダーで色を選択して調整します。

スライダーの下の色を選択して、事前に選択した色を選択します。

交換

これによりメディアオプションが開き、ライブラリから別の画像をアップロードまたは選択できます。

オプション

カバーブロックオプションには次のものがあります。

[その他の設定を非表示] –右側のサイドバーを非表示にします。

コピー–カバーブロックをコピーして、ページまたは投稿内の任意の場所に貼り付けることができます。

複製–カバーブロックの複製を作成し、元のブロックの下に配置します。

前に挿入–別のブロック用にカバーブロックの上にスペースを追加します。

後に挿入–カバーブロックの下に別のブロック用のスペースを追加します。

[移動先] –矢印キーを使用して青い線を上下に移動することにより、ブロックを移動できます。 Enterキーを押すと、ブロックが青い線の位置に移動します。

再利用可能なブロックに追加–ブロックを再利用可能なブロックに追加して、任意のページまたは投稿で使用できるようにします。

グループ–ブロックをグループに追加して、単一のユニットとして調整できるようにします。

ブロックの削除–ブロックを削除します。

カバーブロックコンテンツ

コンテンツを選択すると、そのコンテンツ専用の別のツールセットが開きます。 デフォルトは段落ブロックで、ツールバーとサイドバーの両方の設定のすべての標準オプションが含まれています。 あなたはそれを変換するか、任意のブロックを追加することができます。 これにより、コンテンツに多くのオプションが提供されます。

カバーを選択

これにより、コンテンツツールバーが閉じ、カバーブロックツールバーが開きます。

カバーブロックのサイズ変更

画像の下部にある円をドラッグして、画像のサイズを変更します。

カバーブロック設定

カバーブロックの設定は、右側のサイドバーに配置されます。 ブロックまたは歯車をクリックして、サイドバーを表示します。 ブロックのコンテンツ内でブロックを選択すると、そのサイドバー設定が表示されます。

スタイル

境界線の有無にかかわらずブロックを表示します。 境界線を表示するようにデフォルトを設定することもできます。 プレビューが含まれているため、選択する前にどのように表示されるかを確認できます。

間隔

すべての側面または特定の側面にスペースを追加します。 それぞれの側を個別に選択するか、それらをリンクして一度に調整します。

メディア設定

ブロック内に表示される画像の部分を選択します。 固定背景（視差）を選択して、その領域に対して背景が小さすぎる場合に背景を繰り返し、円を移動するか、左右の位置を指定して焦点を指定できます。 ここからメディアをクリアすることもできます。 ビデオで使用できるのは、フォーカルポイントピッカーのみです。

この例は、固定背景を示しています。 テキストがスクロールしても画像は所定の位置に留まり、視差効果を生み出します。

これは繰り返し背景です。 小さな画像で面白いパターンを作成するのに適しています。

寸法

フィールドに入力して、高さをピクセル単位で指定します。 これは、画像の下部にあるドラッグツールと同じように機能します。

かぶせる

カバーブロックには、オーバーレイ用の多くのオプションがあります。 既成の色を選択し、その不透明度を選択します。 単色またはグラデーションから選択します。 変化はリアルタイムで確認できます。 画像ではなく色を表示することを選択した場合は、ここで色を変更できます。 この例は単色を示しています。

カスタムカラーを選択することもできます。 これにより、ウィンドウ内の色を使用したり、スライダーでカラースケールを選択したり、16進数、RGB、またはHSLコードを入力したりできるカラーピッカーが開きます。

グラデーションオプションを使用すると、表示する2つの色を選択できます。 線形または放射状から選択します。 色の不透明度を設定することもできます。 この例では放射状を選択しました。

高度

Advancedには2つのフィールドがあります。 1つ目は、HTMLアンカーのオプションです。 これにより、カバーブロック専用の特別なWebアドレスが提供されます。 2つ目は、CSSクラスを追加するためのフィールドです。 これにより、カスタムCSSを作成してブロックのスタイルを設定できます。 選択したスタイルもこのフィールドに表示されます。

カバーブロックを効果的に使用するためのヒントとベストプラクティス

画像の場合は、サイドバーのメディア設定を使用して、表示する画像の部分を表示します。

全幅オプションで大きな画像を使用して、セクションタイトルを作成します。

前景の複数の列に変更し、画像、テキスト、ボタンを追加して、召喚状を作成します。

背景画像や色の上に読みやすいオーバーレイとテキストの色を使用します。

境界線の色を制御する場合は、ブロックをグループに変換します。

配置オプションを使用して、カバーブロックをコンテンツに設定するか、コンテンツと区別します。

コンテンツの配置設定を設定して、興味深いビジュアルを作成し、読者の注意を引き付けます。

固定背景を使用して視差効果を作成します。

繰り返し背景のある小さな画像を使用して、興味深い背景パターンを作成します。

カバーブロックに関するよくある質問

カバーブロックとは何ですか？

これは、メディアまたは色を背景に追加し、他のブロックを前景に追加できるブロックです。

他のブロックと何が違うのですか？

他のブロックを含めることができます。 フォアグラウンドに他のブロックを追加できます。 視差やパターンなどを作成します。

他のブロックに変換できますか？

はい。 画像ブロックに変換できます。 コンテンツ領域に追加した他のブロックはすべて削除されます。

何に使えますか？

カバーブロックを使用して、召喚状のある背景を作成したり、セクションの上にタイトルを作成したり、ポスター、ヒーローセクション、または背景に画像や動画を配置したいものを作成したりできます。

結論

これがカバーブロックの見方です。 このブロックにはいくつかの最も興味深い機能があり、見出し、タイトル、CTA、視差の背景などを作成するのに最適です。 それは使いやすく、あなたのウェブサイトをほとんどのブロックよりも目立たせることができます。 面白いビジュアルを作成するその能力は、それを私のお気に入りのWordPressブロックの1つにします。

我々はあなたから聞きたい。 カバーブロックを使用していますか？ コメントであなたの経験について教えてください。

fourSage /shutterstock.com経由の注目の画像