ブログに埋め込んだYoutubeやGoogleマップをスマホではみ出さないようにする方法

   

WordPressなどで構築したブログの記事内にYouTubeやGoogleマップなどの外部コンテンツを埋め込んだときに、スマートフォンで見てもはみ出してしまわないように、簡単にレスポンシブ対応させる方法をご紹介します。

スポンサーリンク

ブログを書いていると、YouTubeやVimeo、Vineなどの面白い動画を記事内に埋め込んで紹介したり、おすすめスポットの場所をGoogleマップを埋め込んで紹介することってありますよね。

その埋め込み自体は、各サービスから取得してきた埋め込みコードを記事内に貼り付けるだけの簡単な作業で済んじゃいますが、そのままの埋め込みコードだと、スマートフォンで記事を見た時に、表示が収まりきらないということがあります。

embed-responsive-02

これではちょっと不格好。不格好だけならまだしも、せっかくの埋め込みが不完全なものになってしまいます。PCで見てもスマートフォンで見ても、自動的に幅を合わせる「レスポンシブ」対応にしたいですよね。

「レスポンシブ対応かぁ。なんだか難しそうだなぁ…。」と思うかもしれませんが、そんなことはありません。HTMLタグとCSSの設定をチョロっと追加するだけで、簡単にレスポンシブ対応させることができますよ!

埋め込みコンテンツをレスポンシブ対応させる方法

HTML側の設定

まずは記事のHTML側の設定から。レスポンシブ対応させたい埋め込みコードを、class指定したdivタグで囲むようにしましょう。ちなみにclass名は何でも構いません。今回は一応、「embed」というclass名を定義しておきます。

ちなみにサンプルとして、以下のYouTube動画とGoogleマップの埋め込みをレスポンシブ対応にする場合は、以下のようなコードになります。

CSS側の設定

つぎにCSS側の設定です。以下のコードをそのまま、CSSに追記してください。

はい、たったこれだけです。簡単でしょ?!

埋め込みコード用のdivタグをすぐに呼び出せるようにしておこう

ただ、記事に埋め込みコードを入れる度に、今回のdivタグを手入力するのは面倒ですよね。class名を忘れてしまう事も考えられます。

そんな時には、文字入力補助ソフトの「TextExpander」にスニペット登録しておくと、とっても便利ですよ。「TextExpander」を持っていないという方も、Evernoteなどに今回のdivタグを登録しておいて、いつでも呼び出せるようにしておくといいと思います。

embed-responsive-03

TextExpanderは、「スニペット」と呼ばれる省略文字列を入力することにより、あらかじめ設定しておいた文字列を自動入力してくれます。上の画像の設定では、「,emb」と入力するだけで、今回のdivタグが自動入力されるようになります。

このソフトは、一度使ったらもう手放せなくなるくらいに便利ですよ!

TextExpander: Mac Typing Shortcut Utility Saves You Time TextExpander: Mac Typing Shortcut Utility Saves You Time

TextExpander 3 + custom keyboard
カテゴリ: ユーティリティ, 仕事効率化

さいごに

わたしは結構頻繁に、ブログ記事に埋め込みコンテンツを入れるので、備忘録的に書き残しておきます。あと、スマートフォンで見ていると、埋め込みコンテンツがはみ出しちゃってるブログをまだまだ見かけることがあります。

「え?!わたしのブログ、そのまま埋め込みコードを入れちゃってるよ!」という方は是非とも、今回ご紹介した方法を取り入れてみてくださいね!

 - ブログ論/運営

スポンサーリンク

  関連記事

ブログって何を書けばいい?ブログを書く上で大事にしたい9つの視点

photo credit: pennstatenews via photopin cc ブログって何 …

有馬富士公園のコスモス
わたしがブログ用の写真を上手に撮影するために気をつけている7つのこと

ブログ用の写真を上手に撮影するために、わたしが気をつけている7つのことをご紹介します。ブログ記事にと …

WordPressテーマ「Gorgeous (TCD013)」
ブログのデザインをTCDの「Gorgeous」に変更した3つの理由

2014年12月より、当ブログのデザインをTCDの「Gorgeous」(ゴージャス)というテーマをベ …

ブログ更新が続けられない!初心者ブロガーに刺さるありがたいお言葉

昨年の11月末から始めたこのブログですが、正直悩んでます。それは初心者ブロガーが必ず陥るであろう悩み …

有名ブロガーたちが実践している名物コーナーをまとめてみた

最近になって当ブログは平均1日1記事のペースで投稿していますが、できればもう少し投稿のペースを上げた …

そのブログ記事、あなたなら読みますか?

自分のブログ記事をより多くの人に読んでもらうために、大切にしたいことを整理してみました。それはズバリ …

体裁を気にしていたらブログなんて続けられない

初投稿には似つかわしくないタイトルですが、何を隠そうブログを始めたのが今回で3回目(いや4回目かな? …

ブログテーマをSTINGER5に変更した理由と初期カスタマイズまとめ

当ブログのテーマを、TCDの「Gorgeous」から「STINGER5」に変更しました。テーマを変更 …

直帰率を下げたい!サイトの周遊性をアップするために行なうべき改善策

ブログやWEBサイトの「直帰率」を下げて、周遊性をアップさせるために行なうべき改善策をご紹介します。 …

ブログ歴4ヶ月のわたしが考える、ブログを書く上で本当に大切なこと

ブログ歴4ヶ月の駆け出しブロガーなわたしですが、ブログを書くということはどういうことなのか、少しずつ …