WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法

Google Map Youtube レスポンシブ

WordPressでブログ記事を作成しているとYoutubeの動画やGoogleMapをブログ記事に埋め込むことがあると思います。

しかし、Youtubeの動画やGoogleMapはただそのまま埋め込みをしてしまうと、PCから見た時は正常でもスマホから見ると大きく横にはみ出してしまったりして非常に見栄えが悪いです。

そこで今回はこうしたYoutubeの動画やGoogleMapをWordPressブログ記事に埋め込んだ時にキレイに、しかも超簡単にレスポンシブ対応にする方法について紹介をしてみました。

今の時代、ほとんどの方がスマホからアクセスをしてきてくれているはずですので、そうした方たちのためにもしっかりと対応をしていきましょう!

 

WordPressにYoutubeやGoogleMapをレスポンシブで埋め込む方法

WordPressでYoutubeの動画やGoogleMapをレスポンシブで埋め込むための順序は以下の通りです。

  1. 追加CSSにYoutubeとGoogleMapのレスポンシブコードを入れる
  2. プラグインの”AddQuicktag”でショートコードを登録
  3. 記事投稿画面で”AddQuicktag”のショートコードを呼び出して使う

プラグインの”AddQuicktag”をインストールして有効化しておく必要があるので、まだの方は以下の記事を見てインストールをして下さい。

⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録

それではここからはYoutubeとGoogleMapで方法を分けて解説をしてきます。(どっちもやりたい方は同時並行で設定しちゃって下さい)

 

WordPressでYoutubeをレスポンシブで埋め込む方法

追加CSSにYoutubeのレスポンシブコードを入れる

まずはWordPressの「外観」⇒「CSS編集」⇒「追加CSS」を押します。

WordPress CSS編集

WordPress 追加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です。

WordPress 追加CSS youtube

貼り終わったら「保存して公開」を押します。

 

プラグインのAddQuicktagでショートコードを登録

それができたら今度はWordPressメニューの「設定」⇒「AddQuicktag」から今追加CSSに追加したコードを記事投稿画面で使えるようにしていきます。

addquicktag 設定方法

まだ、AddQuicktagをインストールしていない場合は以下の記事を参考にしてみて下さい。

⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録

 

そして、ショートコードを追加していきます。

AddQuicktag

画像の中で赤枠で囲ってある部分に以下の情報を入れてあげて下さい。

  • ボタン名:Youtubeレスポンシブ
  • 開始タグ:<div class=”youtube-responsive”>
  • 終了タグ:</div>

右側のチェックボックスは全てチェックを入れましょう。(一番右のチェックを押せば全てチェックされます)

最後に変更を保存」を押します。

これで準備完了です。

 

記事投稿画面でAddQuicktagのショートコードを呼び出して使う

それではここからはYoutubeの動画をブログ記事に埋め込んでいきます。

まず埋め込みたいYoutubeの動画のページにいって動画説明欄の上にある「共有」から「埋め込みコード」を選んでそれを全てコピーしましょう。

Youtube レスポンシブ WordPress

 

記事投稿で動画を埋め込む時は、埋め込みコードを

  • <div class=”youtube-responsive”> ~ </div>

で括ってあげます。

 

テキストモードにすると先程AddQuicktagで登録したショートコードがあるので、動画を埋め込みたい場所でそれを押しましょう。

Youtube レスポンシブ WordPress

すると先程登録したショートコードが出てくるので今度はその次に、Youtubeの埋め込みコードを入れてあげます。

Youtube レスポンシブ WordPress

そして、最後にもう一回ショートコードのボタンを押して終了タグで囲めば完成です。

Youtube レスポンシブ WordPress

この最後の「終了タグ」を忘れがちですが、これを入れてしっかりとコードを閉じてあげないとダメなので忘れずに入れてあげましょう。

Youtube レスポンシブ WordPress

 

うまくできるとスマホから見た時にこんな感じになります。

Youtube レスポンシブ WordPress

 

WordPressでGoogleMapをレスポンシブで埋め込む方法

追加CSSにGoogleMapのレスポンシブコードを入れる

GoogleMapでもYoutubeと同じようにまず追加CSSにコードを入れていきます。

WordPress 追加CSS GoogleMap

 

以下のコードをコピペしましょう。

.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をインストールしていない場合は以下の記事を参考にしてみて下さい。

⇒ AddQuicktagの設定方法と使い方|ショートコードを簡単登録

 

そして、ショートコードを追加していきます。

GoogleMap レスポンシブ WordPress

画像の中で赤枠で囲ってある部分に以下の情報を入れてあげて下さい。

  • ボタン名:GoogleMapレスポンシブ
  • 開始タグ:<div class=”ggmap-responsive”>
  • 終了タグ:</div>

右側のチェックボックスは全てチェックを入れましょう。(一番右のチェックを押せば全てチェックされます)

最後に変更を保存」を押します。

これで準備完了です。

 

記事投稿画面でAddQuicktagのショートコードを呼び出して使う

GoogleMapの場合は左側のメニューを開いて、そこから「地図を共有または埋め込む」を選びましょう。

GoogleMap レスポンシブ WordPress

GoogleMap レスポンシブ WordPress

 

すると埋め込みコードが出て来るのでこれをコピーしておきます。

GoogleMap レスポンシブ WordPress

 

あとはYoutubeの時と同じように記事投稿で地図を埋め込む時に、埋め込みコードを

  • <div class=”ggmap-responsive”> ~ </div>

で括ってあげます。

GoogleMap レスポンシブ WordPress

 

うまくできるとスマホから見た時にこんな感じになります。

GoogleMap レスポンシブ WordPress

 

まとめ:レスポンシブにしたほうが絶対にオススメ!

ということで今回はYoutubeの動画とGoogleMapをレスポンシブでWordPressに埋め込む方法について解説をしました。

今の時代、インターネット上にあるほとんどのサイトで訪問ユーザーは圧倒的にスマホからが多くなっているはずです。

であれば、やはりスマホで見た時に自分のサイトがしっかりキレイに見れるかどうかも意識すべきでしょう。

そして、そんな時は上のような方法でショートコード登録をして使うと大変便利です。

実は僕は以前まではYoutubeの動画を自分のブログに埋め込むために、このようなYoutube動画をレスポンシブサイズにできるサイトを使ってやっていました。

しかし、上の方法でショートコード登録をすればその手間もかからなくなったのでWordPressを使っている方には大変オススメな方法です。

2017年06月11日 | Posted in WordPress

Related Posts