当ブログはWordPressで運営しておりまして、色々わかったTipsを紹介しています。
前回の記事でWordPressのパーマリンク設定について書きました。
WordPressの情報はweb上に溢れかえってますが、全て正解というわけでもないです。プラグインの組み合わせやら色々条件が個人で違うからです。
そこで色んなパターンを含め、WordPress運営者がぶつかった壁みたいなものを解決できる記事を書いていこうと思い立ちました。
正直な話、WordPress初心者から研究に研究を重ね、記事を書くということもおろそかになるぐらい研究しました。(記事は書けよ。)
そんな僕が自信を持ってお伝えする、この『定評WordPress塾』シリーズ第二弾です。
略して【WP塾】デス。
今回はどちらかというとHTMLとCSSのことですが大体WordPressでブログやってると困る点なので頭に入れておくといいでしょう。
スポンサーリンク
iframeとは
インラインフレームと読み、一般的にYoutubeやGoogleMapなどの埋め込みタグとして使われております。
枠の中に「別のファイルを表示」でき、その枠はページ内のどこにでも、大きさ、位置、ともに自由に設定できます。
レスポンシブの罠
レスポンシブまたはモバイルテーマでスマホ対応させている方がほとんどだと思います。しかしながらPC表示のサイズに合わせることが基本となりますので、そのままだとスマホの横幅からはみ出てしまいます。
そこで、そのやっかいな問題を解決する魔法のコードがこちら。
.aso-kumiko {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 20px;
margin-bottom: 20px;
}
.aso-kumiko iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
※ここではCSSクラスをふざけてaso-kumikoにしておりますが、かぶらなければ基本的にはなんでも大丈夫です。【toihyoubox】でも【itsuyaruno-imadesho】でもなんでも。
外観＞テーマ編集＞style.css
などに直接記述するか、テーマに拡張機能があればそこに記述してもいいでしょう。
埋め込みタグにCSSクラスを指定する
ここではせっかくなので麻生久美子さんの定評のあったCMでお送りします。
<div class="aso-kumiko"> <iframe src="//www.youtube.com/embed/9OPWPtYLg4g" height="360" width="480" allowfullscreen="" frameborder="" </iframe> </div>
Point
divタグで囲い、CSSクラスを指定します。
divとはただの箱で、要はこの箱の中だけは縮まって下さいね！！という命令を記述するということです。
すべてに対応できる
この指定をしていればすべてのiframeタグをレスポンシブ対応させることができます。
中にはテーマで対応しているものや、メディアクエリで対応している方も多いと思いますが、メディアクエリはテーマによっては上手くいかないこともあるのでこの指定が一番正確な方法だと思います。
その他GoogleMapなども、divタグでクラス指定してあげればOKです。
スポンサーリンク
