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対策をしやすい
- 高速化のプロを顧問！ページスピードが速い
- 時短機能も充実！記事執筆を効率化できる
- ブロックエディター対応度ナンバーワン
- ブログ運営が楽しくなる
- 初心者でもカスタマイズしやすい
- 買い切り、複数サイトに使える
- アプデが頻繁で進化が止まらない
- 値段が安くない（17,600円）
- AMP非対応
- 個人開発
SWELLは美しいデザインで、何もしなくても細かいところまでオシャレです。
そして、とても使いやすく、書きやすく、時短に繋がる生産性高いWordPressテーマ。
まさに時間を生み出してくれるテーマといえるでしょう。
時間＝お金です。つまり、SWELLはタイパが良くて収益力の高いテーマということ。
テーマ選びで後悔したくない方は、ぜひSWELLで優越の旅へ。
＼ 綺麗なデザインで他を魅了 ／
※ブログを効率化でき、収益力がUPします！
コメント