簡単にSWELL風の動画をアピールエリアに表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

SWELL風のメインビジュアル動画をアピールエリアに表示します。
簡単なステップで、視覚的に魅力的な動画をサイトの主要な部分に実現できます。
この記事では、この方法について説明します。

メインビジュアルの設定方法 | WordPressテーマ SWELL

このページではSWELLの「メインビジュアル」機能の設定方法を解説していきます。ちなみに「メインビジュアル」とは、トップページを開いた時に最初に目に飛んでくるエリアのことです。画像を1枚だけ画面いっぱいに表示させたり、画像スライダーを設

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で作成します。
1. 管理メニュー→パターン一覧→新規パターンを追加をクリックします。
2. Gutenbergエディターの「カバー」ブロックを配置します。
3. メディアを追加→メディアライブラリを開く→動画を選択します。
4. 公開をクリックし、パターンを保存します。
「カバー」ブロックを活用すれば、簡単に動画を設定できます。

ラベル

Cocoon設定

表1に示す項目を設定をします。

Cocoon設定

設定	大項目	項目	設定値
アピールエリア	アピールエリアの表示
	テキストエリア表示	テキストメッセージエリアを表示する	オン
	タイトル		未入力
	メッセージ		`pattern`ショートコードを入力

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.appeal-in,
.appeal-content {
  max-width: unset;
  padding: 0;
  width: 100%;
}

.appeal-message {
  margin: 0;
}

.appeal-message .wp-block-cover {
  margin: 0;
  min-height: 80svh;              /* 動画の高さ */
}

さいごに

今回紹介した方法を使えば、SWELL風のメインビジュアル動画をアピールエリアに表示させることができます。
Gutenbergエディターを活用して動画をパターンとして登録し、ショートコードを使用することで、簡単に導入できます。