WordPressのカバーブロックとパララックスの設定方法

8月 7, 2019

WordPressのブロックエディター(Gutenberg)には、画像の上にボタンを置いたり、パララックス(parallax:視差効果)を手軽に導入できるカバーブロックがあります。


そのおかげで下のような画像効果を簡単に設定できます。

おじさん
焼き肉が2倍美味しそうに見えますね
これを見るとクラシックエディターはオワコンって気がしますね
うさぎ

今回は、WordPressのカバーブロックとパララックスの設定方法について解説します!

注意

パララックスはパソコンでのみ効果を確認できます。

カバーブロックの基本的な使い方

まずは、カバーブロックの基本的な使い方を見ていきましょう。

おじさん
ブロックエディターを使っていることが前提になります


画像の配置とタイトル

カバーブロックは一般ブロックにあります。

まずはクリックしてお好きな画像を記事に挿入してください。

パララックスを使用するのであれば、大きな画像(横幅1000px以上)がオススメです。

画像に重なって、タイトルを入れるブロックが表示されます。

お好みのタイトルを入れてください。

文字の色や大きさは画面右で選べるようになっていますが、画像の色を変えると思うので、文字の色は後回しのほうが良いでしょう。

最初、画像は暗めに加工されています
うさぎ

ちなみにドロップキャップ(先頭文字を大きくする)の設定もできますが、イマイチ使えません。

おじさん
バランス!

画像の加工

次に、画像の空いている場所をクリックして、画像の加工をおこないます。

カバー設定

右の設定欄の「カバー設定」が、パララックスのOn/Offボタンです。

クリックすると分かりますが、画像が拡大されます。

パララックスは、画面いっぱいの背景画像をくり抜いた穴から覗いているような仕組みなのです。


そのため貼り付けた画像が小さいと、拡大されたパララックスの画像は粗くなります。

おじさん
画像を引き立たせるには、ワンカラムが良いのでしょうね
焦点ピッカー

焦点ピッカーは、画像の中心にしたい部分を指定できます。

たとえば横長の画像は、スマホで見るときに自動で画像が切り抜かれてしまいます。

そのような時に中心となる場所を指定することで、顔が半分で切れたりしないようにします。

オーバーレイ

画像に色を重ねます。

今回は文字の色を黒にしたいので、白のオーバーレイにしました。

背景の透過率

透過率を0に近づけると、オーバーレイの色が薄くなります。

画像を見ながら調整してください。

画像の大きさ

画像の横幅を大きくするときは、下の画像のアイコンをクリックしてください。

幅広と全幅が選べますが、2カラムでは効果が分かりませんでした。

横幅を狭くすることはできませんが、カラムブロックでカラム数を増やせば狭くなります。

高さが変わらないので、どんどん縦長になっていきます
うさぎ

逆に縦幅を広げるときは、段落ブロックを置いて改行すれば、縦に伸びていきます。

ボタンの設置

カバー画像には、ボタンの設置もできます。

ボタンブロックを追加して、好きな色のボタンを置くことができます。

ボタンの位置は、文章と同じように中央や右寄せができます。

ボタンの下にアンダーラインが表示される場合があります。

このアンダーラインは、以下のコードを子テーマのスタイルシートに貼り付ければ消えます。

.wp-block-button__link{
  text-decoration-line:none !important;
}

ボタンのカスタマイズ

ボタンを設置できるのは良いのですが、デザインを変えたいときもあります。

ところが、HTMLモードにしてボタンのコードをそのままねじ込むとエラーが発生します。

おじさん
というか、HTMLモードにしてそのまま戻すだけでもエラーになることもあります
この辺りは、今後の改良を待ちましょう
うさぎ

そこでエラーを回避するために、ボタンをショートコード化して使います。

段落ブロックをHTMLにせず、そのままショートコードを入力すればOKです。

ついでにタイトル部分もショートコードにして貼り付けます。

ショートコードがよく分からない方は、下の記事を参考にしてみてください。

完成したのが下の画像です。

文字の部分は画像なんですね
うさぎ
おじさん
重ねる画像は、png形式の透明な背景の画像を用意してください

png画像については、こちらの記事を参考にしてください

パララックスでサイトの表示速度は落ちない?

記事を書いた後、このページの速度を計測してみたところモバイルで97でした。

パララックスを含むカバー画像は 速度に大きな影響は無さそうです。

ただし、画像のファイルサイズが大きすぎると、確実に重くなるので注意してください。

今回使用した焼き肉の画像は1000px✕560pxですが、ファイルサイズは44KBに圧縮しています。

圧縮しても、あんまり粗くならないですね
うさぎ

まとめ

今回はブロックエディターのカバーブロックの使い方を紹介しました。

この機能は、まだ未完成という感じで、画像の大きさを変更できなかったり、エラーが出たりします。


しかし、WordPressの標準機能でこれだけのことが出来るのはスゴイと思います。

おじさん
ゴイスー


クラシックエディターを使い続けている人は、早めにブロックエディターに変更してほしいと心から思います。


テックアカデミー

ド素人の40歳のおじさんが
2ヶ月間WordPressを学んで
自在にカスタマイズできるようになり、
在宅収入を得られるようになった
オンラインスクール