ご購入からテーマ導入までの流れ

動画も使える!カバーブロックでビジュアル作成

カバーブロックの使い方いろいろ

WordPressのブロックエディタ(Gutenberg)の「カバー」ブロックを使用すれば、画像や動画の上に見出しや文章を表示できます。

画像だけではなく動画も簡単に挿入できて、ページ作成で活用すればコンテンツが引き立ちますので、ぜひ使い方を覚えておきしましょう。

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

まずは【ブロックの追加 > カバー】を選択して、カバーブロックを設置します。

アップロードボタン(またはメディアライブラリ)から、カバーの背景として表示するメディア(画像や動画)を選択します。

動画については今のところ使用できるのは「.mp4」や「.mov」形式などのファイルのみで、YouTubeなどの埋め込み動画は対応していません。

「タイトルを入力...」の部分にテキストを入力すれば、ひとまず完成です。

デザインの調整

ブロック設定パネルで、背景の位置やカバーのサイズ、オーバーレイ(背景に被せる色)の設定も、直接画面を見ながら調整することができます。

サイズ(最小の高さ)の調整

ブロック設定パネル(スタイル )の「サイズ」セクションで最小の高さを調節できます。

また、サイズの単位も選択できるので、高さの固定、可変などの仕様も設定できます。

px単位で指定して固定する他、em単位(親要素のフォントサイズに相対的)、vwやvhといったビューポート単位(ウィンドウの幅や高さに相対的)での指定もできます。

例えば、50vhとした場合は、表示されている画面の高さの50%の高さになります。

カバーの中に要素を追加する

カバーブロックの中には、見出しや段落など、他のブロックを配置することができます。

例えば「見出し」と「段落」を配置して、メインテキスト+サブテキストのような組み合わせで表現することもできます。

テーマ機能:カバー全体にリンクを設定できる

STORK19/SEであれば、カバーブロック全体にリンクを設定することもできます。

COVER BLOCK

STORK19/SEのエディタならカバー全体にリンクも設定できる

例えばこんな使い方ができます

メインビジュアルとして使う

カバーブロックの配置を「幅広」や「全幅」にしてページのトップに設置すれば、サイトのキービジュアルとして強い印象を与えることができます。

動画も表示できるので、ファーストビューでユーザーの目を引く効果が期待できます。

CTAとして使う

カバー内にボタンを配置すれば、CTA(Call To Action)として使うこともできます。

また、カラムブロックを設置すれば、カバーの中で2カラムレイアウトを組むこともできます。


ブロックエディタでは、こういうコンテンツも簡単な操作だけで作成できるようになりました。

また、STORK19/SEのアニメーション設定と組み合わせることで、より引き立たせることもできますので、ぜひ活用してみてください。