【プラグインElementor】トップページに動画を全幅で貼り付ける方法

トップページに動画が使ってあると、なんかちょっとかっこいい!という感じがします。テーマによっては動画がトップに貼り付けられるような仕組みになっているものもあるのですが、無料のテーマではまだ数が少ないです。Elementorという多機能なブロック型編集プラグインを使ってトップページに動画を貼り付けられるということがわかったので、その方法について書きます。

Elementorとは?インストール方法

Elementorとは、ブロック型編集のためのプラグインです。機能がとても豊富なので、今回は「動画をトップページに貼り付ける」という機能に絞って使い方を説明します。おいおい、他の方法についても書いていきたいと思っています。

Elementorをインストールします。

ダッシュボード プラグイン>新規追加 をクリック

Elementorと入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

トップページを固定ページにしておく

トップページに動画を入れるためにはトップページを固定ページにしておきます。

トップページ用の固定ページを作成する

ダッシュボード 固定ページ>新規追加 をクリック

タイトルに トップページ と入力します(名前はトップページ用とわかれば何でもいいです)

Elementorで使うために、

固定ページの属性>テンプレート で Elementor全幅 を選びます。

公開をクリック

トップページを固定ページに指定する

ダッシュボード 設定>表示設定をクリック

表示設定固定ページにチェックをして、リストから先ほど作ったトップページを選択

ページの下の方で、

変更を保存をクリック

トップページに動画を全幅で貼り付ける方法

トップページに動画を全幅で貼り付けます。

ダッシュボード 固定ページ>固定ページ一覧をクリック

トップページ をクリック

Elementorで編集ボタンをクリック

このようにElementorの編集画面が表示されます。

左の エレメント>ベーシック にある 動画をドラッグして、

右にあるこの枠にドロップします。

すると、このようにサンプルの動画が入った状態で貼り付けられます。

動画は

Facebookの公開グループ「webクリエイターのための情報交換所」は有用な情報が流れるので、いつも参考にさせてもらっています。先日も...

でご紹介した PIXELS VIDEOSでダウンロードしてきて、メディアにアップしてあるのでこれを使いたいと思います。

画面左の取得方法で、独自アップロードを選択

URLにある + をクリックして、

アップロードした動画を選択します。

動画オプションで 自動再生を はい、ミュートを はい、ループを はい それ以外を 非表示にします。

画面下の更新をクリック

この状態で、トップページを見てみると、

このように動画が貼り付けられました。

動画の周りの余白をなくす方法

このままだと、動画の周りに余白が残っています。この余白をなくしたいと思います。

動画を編集詳細をクリックして

マージン、パディングの値をすべて 0 にします。

更新をクリック

次に、動画の上で右クリックします。

メニューが表示されるのでNavigatorをクリック

セクションをクリック

セクションを編集>レイアウトで、コンテンツの幅全幅に、カラムのすき間を****すき間なし**にします

更新をクリック

できあがったトップページ

ということで、全幅の動画を貼り付けたトップページの動画はこちらになります。

動画だけだとさみしかったので、Elementorの機能で少しブロックを足してみました。Elementorを使うと、とても簡単に色々なコンテンツが入れられます。

また、動画にはボケなどのエフェクトをかけたり、文字などを入れた画像をオーバーレイすることもできます。多機能ですので、実際に色々触ってみるともっといろいろなこともできますので、是非お試し下さい!

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

コメント

  1. CW より:

    Elementorってこちらで初めて知りました。詳しい説明ありがとうございます。
    ちなみに動画のみ全幅で、画像などの他のコンテンツは通常(750pxや80%など)というレイアウトは可能なんでしょうか。

    • 兎本美佳 兎本美佳 より:

      CWさん、こんにちは!このブログで説明↓方法は各ブロックごとの指定なので、この通りやっても「動画」は全幅ですが他のブロックはデフォルトの状態のままである程度の余白があります。ということで動画のみ全幅で他のブロックの幅を好きなようにできると思います。

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。