【Stinger5 forLadys】ブログカードを使ってみたら、下に大きなマージンが入っちゃうから直しました。

 

ブログカードというのを使ってみてます。↓こういうのです。

紺さんの記事で紹介されてるブックマークレットを使ってます。

このブックマークレットが作ってくれるコードを、記事に貼り付けるだけでよいのです。けど、「Stinger5 for Ladys」でやってみたら、ブログカードの下に巨大なマージンができてしまって… 対策方法を書いときます。
 

こんなふうになっちゃってました

こんな感じで、大きなマージンが入ります。

Stinger5 for Ladysのブログカード表示NG例

原因は「youtube-container」

ブログカードは<iframe>~</iframe>を使ってるのですけど、
「Stinger5 for Ladys」は、<iframe>~</iframe>をもれなく
<div class=”youtube-container”>~</div>で囲み、クラス定義しています。

そして、youtube-containerにpadding-bottom:56.25%が設定されていて、これが巨大なマージンの原因でした。

修正方法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動画を載せることなんてないって人は、こっちのやり方でいいと思います。

まとめ

Gush2では、なんの問題もなく使えたブログカードだったので、「Stinger5 for Ladys」でも気軽に使ってみたら、謎のマージンと格闘することになってしまいました。ブログカードはみんな使ってるみたいだし、Stinger5も使ってる人いっぱいいると思うけど、みんな個別に対策してるのかな? ForLadysだけで起きてるのかな?

私は、function.phpを変更するやり方をしてます。youtube動画を載せることはないな~って思っているのに、なんでそっちの方法を選んだのか… 例のごとく、コード変更してから記事を書くまで時間が経っちゃったので、忘れてしまいました。(-.-)

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。