【Stinger5 forLadys】ブログカードを使ってみたら、下に大きなマージンが入っちゃうから直しました。
ブログカードというのを使ってみてます。↓こういうのです。
紺さんの記事で紹介されてるブックマークレットを使ってます。
このブックマークレットが作ってくれるコードを、記事に貼り付けるだけでよいのです。けど、「Stinger5 for Ladys」でやってみたら、ブログカードの下に巨大なマージンができてしまって… 対策方法を書いときます。
目次
こんなふうになっちゃってました
こんな感じで、大きなマージンが入ります。

原因は「youtube-container」
ブログカードは<iframe>~</iframe>を使ってるのですけど、
「Stinger5 for Ladys」は、<iframe>~</iframe>をもれなく
<div class=”youtube-container”>~</div>で囲み、クラス定義しています。
177 178 179 180 181 182 183 184 185 |
//iframeのレスポンシブ対応 function wrap_iframe_in_div($the_content) { if ( is_singular() ) { $the_content = preg_replace('/< *?iframe/i', '<div class="youtube-container"><iframe', $the_content); $the_content = preg_replace('/<\/ *?iframe *?>/i', '</iframe></div>', $the_content); } return $the_content; } add_filter('the_content','wrap_iframe_in_div'); |
そして、youtube-containerにpadding-bottom:56.25%が設定されていて、これが巨大なマージンの原因でした。
100 101 102 103 104 105 106 107 |
/* iframeのレスポンシブ */ .youtube-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } |
修正方法2つ(どちらかお好きなやり方で)
iframeをすべてyoutube-containerで囲む理由も、そこに56.25%ものpaddingをつけている理由も、わからないです。youtube使ったことないし…
対策は、囲むのをやめるか、56.25%を小さくするか、どちらかです。
function.phpで、youtube-containerがつかないようにする
囲むのをやめる方法です。
上で紹介したfunction.phpの「iframeのレスポンシブ対応」部分を、まるっと削除します。
こちらの方法でやっておけば、youtube動画を載せたいときには、エディタで個別に<div class=”youtube-container”>~</div>で囲んで、youtube-containerのCSSを適用させることができます。
style.cssで、padding-bottomの値を小さくする
56.25%を小さくする方法です。
この修正をしちゃうと、youtube動画を載せるときにはpadding不足になるでしょう。たぶん、画像が切れたりすると思います。
ですけど、function.phpの修正でミスすると「ブログが真っ白に」なんてこともあるので、youtube動画を載せることなんてないって人は、こっちのやり方でいいと思います。
100 101 102 103 104 105 106 107 |
/* iframeのレスポンシブ */ .youtube-container { position: relative; padding-bottom: 20%; padding-top: 30px; height: 0; overflow: hidden; } |
まとめ
Gush2では、なんの問題もなく使えたブログカードだったので、「Stinger5 for Ladys」でも気軽に使ってみたら、謎のマージンと格闘することになってしまいました。ブログカードはみんな使ってるみたいだし、Stinger5も使ってる人いっぱいいると思うけど、みんな個別に対策してるのかな? ForLadysだけで起きてるのかな?
私は、function.phpを変更するやり方をしてます。youtube動画を載せることはないな~って思っているのに、なんでそっちの方法を選んだのか… 例のごとく、コード変更してから記事を書くまで時間が経っちゃったので、忘れてしまいました。(-.-)
この記事へのコメントはこちら