新着記事

2016.04.26 Tuesday

【JUGEMブログ】画像やYoutubeの動画埋め込みをレスポンシブに対応させる方法


  1. HOME
  2. webデザイン・SEO(JUGEMブログ)
  3. 【JUGEMブログ】画像やYoutubeの動画埋め込みをレスポンシブに対応させる方法

全てのカスタマイズ記事をまとめています。記事の投稿と一緒に更新します。↓
JUGEMスマホテンプレート徹底カスタマイズ講座まとめ


スマホの方の画像表示に関しては横幅が280px最大になるよう指定されているため関係ない話なのですが、PC版のJUGEMブログでの画像アップロードって地味にめんどくさくないですか。
一括画像アップロードを使うとサムネの設定ができなかったり、そもそも一枚ずつの投稿でもサムネ設定を忘れてしまってコンテンツエリアからはみだしてしまったり。

サムネの表示サイズも限定されているため、デザインにこだわっている方にとってはなんだかなあ…って仕様ですよね。

そんなわずらわしさから開放される魔法のCSSがあります。



PC版のCSSエリアに以下を入れるだけ。
.entryBody img{
max-width: 100%;
height: auto;
}


このまま記述すると、本文エリアの横幅を最大とした画像サイズで自動で表示してくれます。
本文エリアの横幅以下のサイズのものは当然そのまま表示。

max-width: 100%;

の部分の100%のところを任意のサイズ(px指定でも%指定でも)にすると、表示する際の最大サイズを指定したもので表示することができます。

ついでにYoutubeの埋め込み動画もレスポンシブに表示サイズが変わるようにしちゃいましょう。こっちはスマホも対応です。

本文のYoutubeを埋め込みたい部分にこれを。
<div class="youtube">
Youtubeの埋め込みコード
</div>


PC版のCSSエリアと、スマホ版のフリースペース1エリアにこれを
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

以上を記入するだけでレスポンシブ対応に。

CSSを理解している方にとっては基本中の基本ですが、覚えていると便利な技です。


シェアする


こちらの記事も読まれています。
ブログランキング・にほんブログ村へ
コメント

コメントする