【実録】トップページに動画を設定！その舞台裏も。

本日(8/8)はトップページを少し装飾しました。
具体的には メインビジュアル（トップページ上部）にサイトコンセプトを伝える動画を入れました。

WordPressテーマ「SWELL」では 静止画のほか、動画も簡単に入れられます。

今回の作業内容は、ざっくり次のとおり。

Canvaで動画作成・DL

ここでは詳細の解説は割愛しますが、Canvaなら簡単な動画作成も直感的に作業ができます。

作業風景はこんな感じ

当サイトは「Z家の裏側」というサイト名を付けたので、メインサイト（お得情報・ポイ活情報など）のイメージと連動性を持たせる感じにしてみました。

作成した動画はコチラ

なかなか一発では思い通りにはならないので、アイディアがわかないときは、息抜きも大事かと思います  

WordPressダッシュボードから動画を設定

動画が完成したら mp4形式でダウンロードして、WordPress側に設定していきます。

外観→カスタマイズ→トップページ→メインビジュアル

をたどれば、あとは直感的に操作ができるかと思います。
動画にフィルターをかけたり 外したり、表示サイズを調整したりもできます。

ここで１つ 注意点。
メインビジュアルに動画を適用する場合、デフォルトでは「ループ再生」されてしまいます。

個人的には 多くのケースでループ再生は微妙かと思うので、ループ再生をさせないようにします。

「動画の自動ループ」をCSSで消す

CSS (Cascading Style Sheets)はWebサイトのデザインやレイアウトを定義するための言語。
サイトの見栄えを整えるための言語と思っておけばOKです。

今回は「動画のループ」はCSSの追加でとめます。

今回、最も声を大にしたいのがコチラ

CSSとか 一見 難しく見えますが「ブログで稼ぐ」だけなら覚えなくていいと思います。
（検索すれば 出てきます。コピペでOK。）
（時間は有限。目的達成(=ブログで稼ぐ)に時間を割くべき）

個人的には、一見「難しそうに見える」ということが、「（ブログ副業などに）一歩踏み出せない」ということに繋がってしまう気がします。

CSSが初めての方でも、不安がる必要は一切ないかなと思います 

で、今回の作業内容はこちら

外観→テーマファイルエディター→ (SWELL CHILDを選択) →メインビジュアル → テーマのための関数(functions.php)を選択

以下を適当に26行目くらいにコピペするだけ。
（別に27行目でも28行目でもOK）

/* メインビジュアルの動画のループを停止 */

add_action( 'wp_footer', function () {
if (is_home() || is_front_page()) { ?>
<script type="text/javascript">
element = document.querySelector('.p-mainVisual__video');
element.removeAttribute('loop');
</script>
<?php } } );

SWELLはユーザーが多く ググれば様々な情報がすぐ出てきます。
その点も使いやすい 

結構、いろんなカスタイマイズが直感的にできますよ。

Before / After

最後にBefore / Afterを置いて、今回はおしまいにします。

---

といったところで、今回はこのあたりで。