読者です 読者をやめる 読者になる 読者になる

DIY家族と英語家族

diyと英語を楽しんでいる家族のまとめ

サイトのトップページにyoutubeやスライドショーを簡単に設置。

スポンサーリンク

f:id:buchibuchi4647:20170317054251g:plain

(備忘録)自分のサイトやブログのトップページyoutubeの動画やスライドショーを埋め込みたいと思いませんか。youtubeの動画をトップページに埋め込むと訪問者にyoutubeチャンネルを知らせることも可能であり、またスライドショーを埋め込むことによってオシャレなトップページに見えると思いいます。今回はトップページにyoutubeを設置する簡単方法を備忘録としてまとめました。

 

 

トップページにスライド画像やyoutubeを埋め込むためには2つのプラグインがここでは必要です。

page builder by siteorigin

master slider

page builder by siteoriginはトップページを自由にレイアウト出来るプラグインです。これを使ってトップにスライドやyoutubeを埋め込みます。

しかし、トップではなくサイドバーなどのウジェットを使う方はpage builder by siteoriginをインストールする必要はありません。ここでは詳しい解説は省きます。以下にまとめてますのでトップページに埋め込むこと考えている方はコチラを先に読んでください。

 

 

 

diy-english.hatenablog.com

 

 

master sliderの使い方

今回はmaster sliderの解説をしていきます。これは画像を簡単にスライドさせることの出来るプラグインで、youtubeも設定が簡単です。もちろんレスポンシブ対応です。

f:id:buchibuchi4647:20170317054411p:plain

 

インストールし有効化後メニューバーにMaster Sliderのボタンがでてきます。settingsはそのままで上のMaster sliderをクリックします。下側の青いボタンCreate New Sliderをクリックしてください。

 

f:id:buchibuchi4647:20170317054427p:plain

サンプルのスライダーがでてきます。サムネイルが横や縦または説明がついているスライダーなど。もちろん自分で作ることも可能です。気に入ったスライダーを選択してCreateボタンをクリックします。

f:id:buchibuchi4647:20170317054448p:plain

 

既存のサンプル画像がありますが、自分が使用する画像に変更します。ゴミ箱のマークで捨てる。+のマークで画像の追加。

f:id:buchibuchi4647:20170317054523p:plain

 

僕のブログで使用しているyoutube動画のサムネイル画像です。こちらをアップロードしてドラッグして先頭にもっていきました。この流れで、他にもアップロードした動画追加していきます。追加出来ましたら、video and link をクリック。

 

f:id:buchibuchi4647:20170317054543p:plain

 

1.Video embed srcへ //www.youtube.com/embed/あなたのyoutubeの動画idを入力

これでスライドショーでは画像だけ読み込み、クリックしてから動画を読み込むためサイトへの負荷が軽減されます。

2.また上の部分にURLはスライドショーで使用します。ここを入力するとクリックしたときに指定したURLに飛ばしてくれます。以上で設定は完了です。

上手く再生されない

スライドやyoutubeを埋め込んでうまく再生しない、または動かないことがあります。実は木もそうでした。調べてみるとjQueryが関係しているらしい。ここでわかる人は修正してください。もしもわからない人は以下に簡単に解決できる方法をまとめているので参考にしてください。

 

 

diy-english.hatenablog.com

 

 

トップページに設置する

最後に完成したスライドをトップページに設置します。pagebuilder by siteoriginで設置したい場所にテキストを用意しておきます。スライドが完成するとショートコードが割り振られます。これをコピーしてテキストに貼付けたら完成です。お疲れ様でした。