こんにちは。ぐぐ助です。
近頃はブログなどのスマホ対応は当たり前の認識になってきていまして
デザインもレスポンシブ対応だったり、スマホアクセス用のデザインを用意したりするのが普通ですが
意外と記事そのものの内容まで気が配られていないケースを目にします。
サイトデザインはしっかりスマホの画面サイズに合わせて設定されているのに
肝心の記事内に挿入された画像や埋め込みの動画プレーヤーがはみ出していたり、とか。
ぐぐ助のサイトはすべて対策済みなので再現できないのですが
借り物の画像で説明しますと、こういう感じですね。
横スクロールしたり、端末を横にしたりしないと見ることが出来ないという。
これ、実は非常にカンタンに解決することが出来ます。
検索ワード：スマホ 画像 動画プレーヤー はみ出し
まずは、画像のはみ出し対策。
下のタグをスタイルシートの最下部にでも挿入してあげてください。
img {
max-width: 100%;
height: auto;
}
これでＯＫ。
驚くほど簡単ですね。ぐぐ助もふと思い立ってこれをググった時、あまりの簡単さにビックリしました。
続いて、埋め込み動画。
まさに上の画像のようなケースですね。
こちらも嫌になるほど簡単です。
iframe {
max-width: 100%;
}
スタイルシートにこれを書くだけ。
これで、スマホ、タブレット、ＰＣでも、埋め込み動画プレーヤーを枠内ピッタリに収めてくれます。
それぞれデザインが違う場合は、全てのスタイルシートに書かないとダメですよ。
ただ、このケースで、サイトによっては他のものに影響が及んでしまう可能性があります。
というのは、これは「動画プレーヤー」というより、「インラインフレーム」を使ったものすべてに対する設定なのですね。
なので、この設定で何か不具合が出た場合は、次の方法が良いと思います。
まず、スタイルシートに以下のタグを書きます。
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
続いて、記事に埋め込む動画プレーヤーのタグを
<div class=”video-container”>
（埋め込み動画プレーヤーのタグ）
</div>
このような感じで挟みます。
こうすることで、任意の動画プレーヤーのみに対しての幅最適化設定が出来ます。
過去記事すべてに対して設定となると面倒ですが、これも非常に簡単ですね。
