ブログに埋め込んだ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
カテゴリ: ユーティリティ, 仕事効率化

さいごに

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

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

 - ブログ論/運営

スポンサーリンク

  関連記事

ブログを書くという敷居を極限まで下げるために実践したい7つの方法

credit: Mike Bailey-Gates via FindCC 苦もなくブログを書く。そし …

写真が先か、テキストが先か、それが問題だ。

ブログ記事の2大要素であろう「写真とテキスト」。その位置関係が与える効果について、わたしなりに深く掘 …

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

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

Google Analyticsのトラッキングコードが急に表示されなくなった件

ついさきほど、なんとなく当ブログのソースをボケ〜っと確認していたのですが、自分の目を疑うような出来事 …

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

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

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

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

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

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

下書き記事をチェックしている風の女性
WordPressで下書き記事を一部の人だけに限定公開できるプラグイン

WordPressで下書き記事を一部の人だけに限定公開できるプラグイン「Public Post Pr …

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

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

iPhoneとキーボード
ブログ記事の校正やチェックには絶対にスマートフォンを使ったほうがいい

ブログに記事を書いて公開したあとは、絶対にスマートフォンでも表示をチェックしましょう。PCで記事を書 …