高さが変？Stinger3でTwitterの挿入のスマホ表示のバグの修正

ブログでのTweetの紹介はとっても便利

Twitter EmbedというWordpress用プラグインがあります。

WordPress › Twitter Embed « WordPress Plugins

Easily embed tweets in your posts and pages by posting the tweet URL on a line by itself or by using a shortcode provided by the Twitter ...

[code]
　https://twitter.com/fx_kirin/status/525195575986094080
[/code]

ちなみに、これでも大丈夫。

[[tweet https://twitter.com/fx_kirin/status/525195575986094080]]

TinyMCEとかが悪さしてちゃんと表示されないことがあるので、ショートコード使うほうが個人的にお勧め。

実際の表示

[tweet https://twitter.com/fx_kirin/status/525195575986094080]
今日はそのTwitter Embedを使っても起こってしまった表示バグの件です。

スマホ表示でのバグ

ver 20131023 のStinger3を使用していて、パソコンから使用している限りではまったく問題なく運用できています。しかし、Twitterの標準の埋め込み機能を使い、それが添付画像付きのものであった場合、高さが小さく設定されてしまい、ちゃんと表示されないというバグがありました。

本来の表示

スマホ上での表示

明らかに高さの設定がおかしいです。

height: auto;

Stinger3標準のsmart.cssのheightの設定が悪さをしていました。 smart.cssの54行目あたりのこの部分。

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi iframe, .kizi table {
    margin-bottom: 20px;
    height: auto;
    max-width: 100%!important;
}

この部分のheight: auto;を削除すれば、ちゃんと表示するようになります。

[追記]他との兼ね合いもあるので、iframeだけheight:autoを消すほうが良さそうです。

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi table {
    margin-bottom: 20px;
    height: auto;
    max-width: 100%!important;
}

.kizi iframe{
    margin-bottom: 20px;
    max-width: 100%!important;
}

このように変更しましょう。