SWELLに「ループ(繰り返し)なし」のメインビジュアル動画を設定して、あなたのサイトをオシャレにする方法を解説します。
- SWELLのメインビジュアルにオリジナルの動画を設定したい
- メインビジュアル用のオリジナル動画を作りたい
- SWELLのメインビジュアル動画がループしてしまうのを直したい
ヒナキラこのような方にオススメの内容となっています。
なお、SWELLでは動画を設定すると「繰り返し（ループ）再生」されるようになっていて、わずらわしく感じる方もいるので、ループ再生されないようにする方法もあわせて解説していきます。
SWELLにオリジナル動画を設定して、オシャレなサイトにしたい方は、ぜひ見ていって下さいね。
＼ 一番おすすめのオシャレすぎるWordPressテーマ ／
SWELLのメインビジュアル動画の例
今回、参考にしたのはオシャレサイト「RUKI BOOKS」のメインビジュアル動画です。
ヒナキラめちゃくちゃオシャレですよね。
このような「シャレオツな動画を作りたい！」という切実な思いを持つ方のため、解説記事を作りました。
そして、今回紹介するのは「RUKI BOOKS」に少しだけ似た感じで作った、下記メインビジュアル動画の作り方になります。
オシャレなメインビジュアル動画の作り方【ループなし】
では、オシャレなメインビジュアル動画を作っていきましょう。
次に、作成した動画をダウンロードします。
①：「共有」→「ダウンロード」をクリック
②：「ダウンロード」をクリック
動画を作成できたので、あとは「メインビジュアル」で設定すればOKです。
①：「外観」→「カスタマイズ」
②：「トップページ」→「メインビジュアル」をクリック
③：「動画」をクリック
④：「動画の設定」から「動画を選択」をクリック
⑤：サイズなどの調整を行って「公開」をクリック
設定ができたので、動画設定したトップページを確認しましょう。何か気づくと思うので、良く見て下さい。
そう、このように動画が繰り返し再生される「ループ」状態になってしてしまうのです。
ヒナキラというわけで、ここからはループを解消していきましょう。
動画のループを解消する方法は下記です。
- 「外観」→「テーマファイルエディター」をクリック
- 「functions.php」をクリック
- コードを追加
なお、追加するコードは以下です。
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でオシャレな動画を設定することで、かなり印象に残るサイトにできます。
見た目が良いだけで、ファンになってくれる読者もいるでしょう。
ヒナキラ人間関係も同じように、第一印象は大切です。
そして今回のようなSWELLのメインビジュアル動画を作るには「Canva」がオススメ。
アイキャッチ作成など様々な用途にも使えるので、Canvaを使っていない方は、ぜひこの機会に使っていきましょう。
＼ 一番おすすめのオシャレすぎるWordPressテーマ ／
当サイト使用テーマ。最高です。
- とってもオシャレなサイトが誰でも作れる
- 高速化に強くてスピードが爆速になる
- 時短になって効率化＝生産性があがる
- 初心者でもカスタマイズしやすい
- 買い切り、複数サイトに使える
- アプデが多くて進化がスゴイ
- SEO関係の機能もバッチリ
- 価格が高い
- 個人開発の不安がある
- 人気すぎてデザインが被る
＼ 時短になって生産性が爆上がりするテーマ ／
※おしゃれで書きやすくてブログが楽しくなる
コメント