![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
文章の背景に画像があるサイトを見つけたんだけど、あれってなに?
画像ブロックではないよね…?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
あれは「カバーブロック」を使っているんですよ!
こんな感じですよね?
![カバーブロックのイメージ](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_16h04_09-1024x410.png)
![カバーブロックのイメージ](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_16h04_09-1024x410.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
そうそう!それ!
ブロックを使ってこんなにおしゃれになるんだね!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
そうなんです!
プラグインを入れなくても簡単におしゃれにできます。
カバーブロックとは、その名の通りブロック全体を覆うように背景を設定できるブロックです。
背景に画像などを設定するだけでサイトの見栄えが良くなります。
カバーブロックについて
カバーブロックを使用すると、背景に画像や動画、背景色を設定することができます。
さらに、設定した画像などの上に「見出しブロック」「段落ブロック」などの他のブロックを入れられることが大きな特徴です。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
ブロックの中にブロックが入るという点は、カラムブロックと似ています。
画像ブロックの上にテキストを入れることもできますが、自動的に画像ブロックからカバーブロックに変換されるため、初めからカバーブロックを選択する方が便利です。
ワードプレスの画面では、カバーブロックは以下のような説明になっています。
![カバー:テキストオーバーレイ付きの画像や動画を追加します。](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_15h11_11.png)
![カバー:テキストオーバーレイ付きの画像や動画を追加します。](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_15h11_11.png)
背景に画像などが設定できて見た目も華やかになるため、「アイキャッチ画像」や「お問い合わせ・お申し込み画像(ボタン)」に使われることも多いです。
▼アイキャッチ画像の使用例
![アイキャッチ画像の使用例](https://techkoya.com/wp/wp-content/uploads/2023/10/2023-10-06_14h34_02-1024x419.png)
![アイキャッチ画像の使用例](https://techkoya.com/wp/wp-content/uploads/2023/10/2023-10-06_14h34_02-1024x419.png)
▼お問い合わせ・お申し込みの使用例
ボタンを挿入してリンクを貼り付けることもできます
![](https://techkoya.com/wp/wp-content/uploads/2023/09/pexels-ana-morais-4123972-scaled.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2023/09/pexels-ana-morais-4123972-scaled.jpg)
もふもふに癒されるというプチご褒美
カバーブロックの使い方
カバーブロックで「背景色」と「画像・動画」を追加する方法について説明します。
カバーブロックの追加方法
![カバーブロックは
①左上の十字
②入力欄
③右側の十字
から追加できる](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_15h44_31-1024x521.png)
![カバーブロックは
①左上の十字
②入力欄
③右側の十字
から追加できる](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_15h44_31-1024x521.png)
カバーブロックの追加方法は3種類あります。
どこから追加しても同じブロックが表示されますので、1番使いやすい方法で追加してください。
詳しい方法については、こちらをご覧ください。
※「見出し」を「カバー」に置き換えてください。
背景色の設定方法
![カバーブロックを追加](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h01_23.png)
![カバーブロックを追加](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h01_23.png)
カバーブロックを追加すると、上記のような画面が表示されます。
「アップロード」などの下にあるカラフルな円形の中から背景色を選択します。
※お使いのテーマによって表示される色は異なります。
![黄緑色の背景が設定された](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h07_29.png)
![黄緑色の背景が設定された](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h07_29.png)
背景色が設定されると、その上から他のブロックを追加できます。
▼他のブロックの使い方についてはこちらをご覧ください!
背景画像・動画の設定方法
画像・動画のアップロード方法は、通常の画像ブロックと同じです。
・新規の画像・動画なら→アップロード
・アップロードしたことがある画像・動画なら→メディアライブラリ
いずれかの方法でアップロードをします。
今回は、画像を選択した例をご紹介します。
![アップロードかメディアライブラリ、適した方法で画像や動画を追加する](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h18_00.png)
![アップロードかメディアライブラリ、適した方法で画像や動画を追加する](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h18_00.png)
すると、下記の上にある画像のように全体的に上から黒色がかけられて、中心に段落ブロックが表れます。
黒色がかかっている理由は、元々背景として使われることを想定しているので、画像が目立ちすぎないようにするためです。
![カバーブロックと画像ブロック、それぞれ同じ画像をアップロードして違いを探る](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h20_54.png)
![カバーブロックと画像ブロック、それぞれ同じ画像をアップロードして違いを探る](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h20_54.png)
タイトルを入力して、テキストカラーやフォントサイズを調整します。
![ワードプレスの編集画面からタイトルを入力して調整を行う](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h52_27-1024x483.png)
![ワードプレスの編集画面からタイトルを入力して調整を行う](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_16h52_27-1024x483.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
これだと普通の画像とそんなに変わりない気がする…
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
「幅」を変えるとガラッと変わりますよー!
全幅にする
ブロックの上部にあるブロックツールバーから、幅の調整をすることができます。
そこから「全幅」を選択します。
![ブロックツールバーから「全幅」を選択](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h05_07.png)
![ブロックツールバーから「全幅」を選択](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h05_07.png)
![幅が2倍ほどになった](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h10_11-1024x505.png)
![幅が2倍ほどになった](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h10_11-1024x505.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
すごーい!横幅いっぱいに画像が広がった!
「全幅」を選択することで横幅は広くなりましたが、縦の長さが短くなってしまいました。
もっと縦の長さも伸ばしたい場合は、画像の下部にある○印をドラッグすると変更できます。
![画像の縦幅の調整方法](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h19_42-1024x286.png)
![画像の縦幅の調整方法](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h19_42-1024x286.png)
また、画像の位置をずらしたい時は「焦点ピッカー」を使います。
右側のパネルを開き
「ブロック」→「メディア設定」→「焦点ピッカー」
にある白い○が画像の中心位置になっています。
これをドラッグで移動することで、中心位置をずらすことができます。
![右側のパネルの「ブロック」の「焦点ピッカー」から画像の中心を調整](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h42_49-1024x420.png)
![右側のパネルの「ブロック」の「焦点ピッカー」から画像の中心を調整](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h42_49-1024x420.png)
中心を画像の一番上に移動させたことで、表示される部分も変わりました。
![中心を一番上にすることで、画像の上半分が表示された](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h49_29-1024x366.png)
![中心を一番上にすることで、画像の上半分が表示された](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-28_17h49_29-1024x366.png)
オーバーレイの調整
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
そもそもオーバーレイってなに?
オーバーザレインボー?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
オーバーレイとは、英語で「上から重ねる」という意味です。
カバーブロックでは、画像の上から色を重ねることを指しています。
オーバーレイの設定は、右側のパネルの「ブロック」からできます。
ブロックの右側にある白と黒の円を選択すると、「オーバーレイ」が出てきます。
![オーバーレイの設定は右側のパネルからできる](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_11h46_47-1024x634.png)
![オーバーレイの設定は右側のパネルからできる](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_11h46_47-1024x634.png)
オーバーレイでは
①色
②不透明度
が設定できます。
①色の設定
デフォルトの設定では、オーバーレイの色は黒になっています。
しかし、上の画像の①からお好きな色を選んで変更することができます。
![オーバーレイを白にしたカバーブロック](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_12h02_41.png)
![オーバーレイを白にしたカバーブロック](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_12h02_41.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
オーバーレイの色を白、文字を黒にしてみました!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
黒よりも画像が見やすくなったね!
イメージも少し明るくなった気がする。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
色を変えることで画像のイメージも大きく変わるので、色々試しながら調整してみましょう!
不透明度の設定
不透明度とは、文字通り「透明ではない度合い」のことです。
不透明度が高いほど、その下にあるものが見えなくなります。
不透明度0%だと画像の上に重ねられている黒色が透明になるので、画像のみが表示されているように見えます。
逆に不透明度100%だと黒色の透明度が0になるので画像が見えなくなってしまいます。
![](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_12h20_48-1024x285.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/09/2023-09-29_12h20_48-1024x285.png)
不透明度を0や100にしてしまうとオーバーレイの意味がなくなってしまうので、ちょうど良い不透明度を探しながら調整していきます。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
編集画面だけでなく、プレビューから確認するのもおすすめです。
固定背景と繰り返し背景
カバーブロックで設定した背景は
①設定なし ②固定背景 ③繰り返し背景
の3つの設定が可能です。
①設定なし
通常の画像のように全体が表示されます。
![](https://techkoya.com/wp/wp-content/uploads/2023/09/pexels-ana-morais-4123972-scaled.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2023/09/pexels-ana-morais-4123972-scaled.jpg)
うさぎと一緒にくらす
②固定背景
背景がその場に固定されるため、窓から中をのぞくような立体感のある背景になります。
うさぎと一緒にくらす
③繰り返し背景
同じ画像を繰り返し表示させることで、パターンを作ることができます。
これは、サイズの大きな画像だとあまり変化がないので、小さな画像で使用するのがおすすめです。
カバーブロック
まとめ
カバーブロックはブロックの後ろに画像や動画を設定する、便利な機能のブロックでしたね。
今回は画像を使って説明してきましたが、動画を設定すると全く違う印象になります。
また、オーバーレイや文字の入れ方によっても見た目の印象が変わるので、ぜひ色々試してみてください。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
使い方を覚えてたくさん活躍させたいな!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
カバーブロックを活用しておしゃれな投稿にしちゃいましょう!
質問などあれば気軽に書き込んでくださいね♪