WordPressのレスポンシブテーマでTwitter埋め込みウィジェットの高さを指定する方法
Twitterの埋め込みウィジェットをレスポンシブWordPressテーマで使おうと思うと、
高さが指定したサイズにならない!とお困りの方はいらっしゃいますでしょうか。
Twitterに限らず、YouTube、Google Map、Facebookのライクボックス等、
各サービスで発行される埋め込みコードをブログに貼って使うことが多いですが、
この辺の主要サービスのコードはレスポンシブに対応していなかったりするので、
ただ貼付けるだけだとうまくいきません。
レスポンシブ対応に一手間加える必要があります。
WordPressのレスポンシブテーマでTwitter埋め込みウィジェットの高さを指定する方法
スタイルシート(ダッシュボード>外観>テーマエディター)から、
最後の方のレスポンシブの欄のところに下記のコードを追加します。
.twitter-timeline { width:100%; height: 300px; }
例えばパソコンで見た時に高さ300pxに指定したい場合は、
@media only screen and (min-width: 960px)
というエリアの色々書いてあるコードの最初の「{」と最後の「}」の間に追加します。
@media only screen and (min-width: 960px) {
.twitter-timeline { width:100%; height: 300px; }
}
こんな感じで、途中に1行追加するだけでOKです。
タブレットやスマホも同じくお好みの高さを決めて、
それぞれタブレットの欄、スマホの欄に追加すればOKです。
簡単ですね。
WEBサービス「Embed Responsively」を使って超簡単にやる方法
各種埋め込みコードを簡単にレスポンシブ対応コードに変換してくれる、
便利サービス「Embed Responsively」というのがあります。
これを使うと簡単にレスポンシブ対応コードに変換してくれるので、
コピペしてそのまま使えばOK。
あとは、魔法のCSSを使うというやり方もあります。
個人的にはいつもこっち使ってます。
iframeの埋め込みコード(Google Map・YouTubeなど)をレスポンシブテーマに対応させる方法 >
★