YouTubeやGoogleマップを記事からはみ出さないようにする方法(PC・スマホ両対応) - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

YouTubeやGoogleマップを記事からはみ出さないようにする方法(PC・スマホ両対応)

YouTubeやGoogleマップを記事からはみ出さないようにする方法(PC・スマホ両対応)

./image/entry/QBlog/20140913-1-00.png

アメブロの記事にYouTubeやGoogleマップを貼り付けた時に横幅が足りずに記事からはみ出してしまった経験はありませんか?

もちろん、きちんと横幅をはみ出さないサイズに設定したタグを作成してから貼り付ければいいのですが、それも面倒ですよね。

しかも、パソコンで見た時とスマホで見た時では横幅が違いますので、両方に対応する横幅で貼り付けるとなるとなおさら面倒です。

でも、そうしないと↓こんな風にはみ出してしまいます・・・
./image/entry/QBlog/20140913-1-01.png

「何とか良い方法はないものか・・・」と考えてみたんですが・・・、

↓こんな表示にする簡単な方法がありました。
./image/entry/QBlog/20140913-1-02.png

高さは自動で変わりませんのでYouTubeの動画の上下に黒い帯がついてしまいますが、横幅ははみ出さずに表示させることができます。

というわけで、その方法をご紹介しますね。

YouTubeやGoogleマップを記事からはみ出さないようにする方法(PC・スマホ両対応)

やり方は簡単で、記事内に以下のタグを書くだけです。

<style>iframe{max-width:100%}</style>

これだけです。

タグを書く位置は、特にここでなければいけないというのはありません。

ですが、変な位置に挿入してしまわないよう最後に書くのがいいと思います。

なお、アメブロの仕様上の問題で、残念ながらこの方法は新エディタで記事を作成する場合は使えません

新エディタで記事を作成すると、記事内に<style>タグを書いても投稿するまでに消されてしまうからです。

なので、標準エディタでHTMLタグを表示して記述するか、もしくはタグ編集エディタを使う必要があります。

また、過去に書いた記事も、上記タグを書き加えればスマホで表示した際にGoogleマップやYouTubeがはみ出さないようにできますが、新規作成の場合と同じ理由で、このタグを記述する(或いはした)記事を新エディタで修正することはできません

なお、新エディタやタグ編集エディタで作成した記事を標準エディタで開くことは不可能ですが、タグ編集用エディタで開くことは、例えばアメブロの記事修正・再編集を劇的に楽にするブックマークレットを使うと簡単にできますのでよかったら使ってみてください。

あと、今回ご紹介したタグは、GoogleマップやYouTubeで利用される<iframe>というタグに対するスタイルを記事内に設定したものですが、当然ページ内の他の<iframe>にも影響します。

場合によってはページ表示に不具合が出る可能性もありますのでご注意下さい。

以上、YouTubeやGoogleマップを記事からはみ出さないようにする方法をご紹介しました。

よかったらお試し下さい。

    最新の更新 RSS