WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法
WordPressでブログ記事を作成しているとYoutubeの動画やGoogleMapをブログ記事に埋め込むことがあると思います。
しかし、Youtubeの動画やGoogleMapはただそのまま埋め込みをしてしまうと、PCから見た時は正常でもスマホから見ると大きく横にはみ出してしまったりして非常に見栄えが悪いです。
そこで今回はこうしたYoutubeの動画やGoogleMapをWordPressブログ記事に埋め込んだ時にキレイに、しかも超簡単にレスポンシブ対応にする方法について紹介をしてみました。
今の時代、ほとんどの方がスマホからアクセスをしてきてくれているはずですので、そうした方たちのためにもしっかりと対応をしていきましょう!
WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法
WordPressでYoutubeの動画やGoogleMapをレスポンシブで埋め込むための順序は以下の通りです。
- 追加CSSにYoutubeとGoogleMapのレスポンシブコードを入れる
- プラグインの”AddQuicktag”でショートコードを登録
- 記事投稿画面で”AddQuicktag”のショートコードを呼び出して使う
プラグインの”AddQuicktag”をインストールして有効化しておく必要があるので、まだの方は以下の記事を見てインストールをして下さい。
⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録
それではここからはYoutubeとGoogleMapで方法を分けて解説をしてきます。(どっちもやりたい方は同時並行で設定しちゃって下さい)
WordPressでYoutubeをレスポンシブで埋め込む方法
追加CSSにYoutubeのレスポンシブコードを入れる
まずはWordPressの「外観」⇒「CSS編集」⇒「追加CSS」を押します。
追加CSSの部分に以下のコードをコピペして貼り付けましょう。
.youtube-responsive{ position:relative; width:100%; padding-top:56.25%; } .youtube-responsive iframe{ position:absolute; top:0; right:0; width:100%; height:100%; }
こんな感じで貼ればOKです。
貼り終わったら「保存して公開」を押します。
プラグインのAddQuicktagでショートコードを登録
それができたら今度はWordPressメニューの「設定」⇒「AddQuicktag」から今追加CSSに追加したコードを記事投稿画面で使えるようにしていきます。
まだ、AddQuicktagをインストールしていない場合は以下の記事を参考にしてみて下さい。
⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録
そして、ショートコードを追加していきます。
画像の中で赤枠で囲ってある部分に以下の情報を入れてあげて下さい。
- ボタン名:Youtubeレスポンシブ
- 開始タグ:<div class=”youtube-responsive”>
- 終了タグ:</div>
右側のチェックボックスは全てチェックを入れましょう。(一番右のチェックを押せば全てチェックされます)
「最後に変更を保存」を押します。
これで準備完了です。
記事投稿画面でAddQuicktagのショートコードを呼び出して使う
それではここからはYoutubeの動画をブログ記事に埋め込んでいきます。
まず埋め込みたいYoutubeの動画のページにいって動画説明欄の上にある「共有」から「埋め込みコード」を選んでそれを全てコピーしましょう。
記事投稿で動画を埋め込む時は、埋め込みコードを
- <div class=”youtube-responsive”> ~ </div>
で括ってあげます。
テキストモードにすると先程AddQuicktagで登録したショートコードがあるので、動画を埋め込みたい場所でそれを押しましょう。
すると先程登録したショートコードが出てくるので今度はその次に、Youtubeの埋め込みコードを入れてあげます。
そして、最後にもう一回ショートコードのボタンを押して終了タグで囲めば完成です。
この最後の「終了タグ」を忘れがちですが、これを入れてしっかりとコードを閉じてあげないとダメなので忘れずに入れてあげましょう。
うまくできるとスマホから見た時にこんな感じになります。
WordPressでGoogleMapをレスポンシブで埋め込む方法
追加CSSにGoogleMapのレスポンシブコードを入れる
GoogleMapでもYoutubeと同じようにまず追加CSSにコードを入れていきます。
以下のコードをコピペしましょう。
.ggmap-responsive { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .ggmap-responsive iframe, .ggmap-responsive object, .ggmap-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
プラグインのAddQuicktagでショートコードを登録
それができたら今度も同じようにWordPressメニューの「設定」⇒「AddQuicktag」から今追加CSSに追加したコードを記事投稿画面で使えるようにしていきます。
まだ、AddQuicktagをインストールしていない場合は以下の記事を参考にしてみて下さい。
⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録
そして、ショートコードを追加していきます。
画像の中で赤枠で囲ってある部分に以下の情報を入れてあげて下さい。
- ボタン名:GoogleMapレスポンシブ
- 開始タグ:<div class=”ggmap-responsive”>
- 終了タグ:</div>
右側のチェックボックスは全てチェックを入れましょう。(一番右のチェックを押せば全てチェックされます)
「最後に変更を保存」を押します。
これで準備完了です。
記事投稿画面でAddQuicktagのショートコードを呼び出して使う
GoogleMapの場合は左側のメニューを開いて、そこから「地図を共有または埋め込む」を選びましょう。
すると埋め込みコードが出て来るのでこれをコピーしておきます。
あとはYoutubeの時と同じように記事投稿で地図を埋め込む時に、埋め込みコードを
- <div class=”ggmap-responsive”> ~ </div>
で括ってあげます。
うまくできるとスマホから見た時にこんな感じになります。
まとめ:レスポンシブにしたほうが絶対にオススメ!
ということで今回はYoutubeの動画とGoogleMapをレスポンシブでWordPressに埋め込む方法について解説をしました。
今の時代、インターネット上にあるほとんどのサイトで訪問ユーザーは圧倒的にスマホからが多くなっているはずです。
であれば、やはりスマホで見た時に自分のサイトがしっかりキレイに見れるかどうかも意識すべきでしょう。
そして、そんな時は上のような方法でショートコード登録をして使うと大変便利です。
実は僕は以前まではYoutubeの動画を自分のブログに埋め込むために、このようなYoutube動画をレスポンシブサイズにできるサイトを使ってやっていました。
しかし、上の方法でショートコード登録をすればその手間もかからなくなったのでWordPressを使っている方には大変オススメな方法です。