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

さいごに

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

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

 - ブログ論/運営

スポンサーリンク

  関連記事

ブログを衰退させない!永久保存版にしたいブログ記事に3つも出会えたというお話

ブログのPVを伸ばすためのポイント、そして記事を更新し続けることの大切さ。ブログ運営について悩んだと …

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

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

寝込んじゃったとしてもブロガーとしてやれる7つの行動

体調不良などの理由でもしブログが書けなくなったら、あなたはどうしますか?そんな死活問題な状況下で、ブ …

ブログ運営に「画像最適化ツール」を活用すべきか検証してみた

これまで当ブログでは、記事に利用する画像のファイルサイズなどは特に気にしていませんでした。でもやっぱ …

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

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

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

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

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

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

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

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

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

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

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

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