Facebook
RSS Feed
Jul 2, 2014

レスポンシブテーマでTwitter埋め込みウィジェットの高さを指定する方法

Twitterレスポンシブ化

Twitterの埋め込みウィジェットをレスポンシブテーマで使おうと思うと、
高さが指定したサイズにならない!とお困りの方はいらっしゃいますでしょうか。

Twitterに限らず、YouTubeの動画プレーヤー、Google Map、Facebookのライクボックス等、
各サービスで発行される埋め込みコードをブログなんかに貼って使うことが多いですが、
この辺の主要サービスのコードはレスポンシブwebデザインに対応していなかったりするので、
ただ貼付けるだけだとうまくいきません。

レスポンシブテーマのサイトを制作する時はレスポンシブ対応に一手間加える必要があります。
(レスポンシブじゃない通常テーマの人は何にも考えずにそのまま貼ればOKですよ)

レスポンシブテーマでTwitter埋め込みウィジェットの高さを指定する方法

スタイルシート(ダッシュボード>外観>テーマの編集)を開いて、
最後の方のレスポンシブの欄のところに下記のコードを追加します。

.twitter-timeline { width:100%; height: 300px; }

例えばパソコンで見た時に高さ300pxに指定したい場合は、
@media only screen and (min-width: 960px)
というエリアの色々書いてあるコードの最初の「{」と最後の「}」の間に追加します。

@media only screen and (min-width: 960px) {
iframe { width:100%; height:100%; max-width:960px; }
}

@media only screen and (min-width: 960px) {
iframe { width:100%; height:100%; max-width:960px; }
.twitter-timeline { width:100%; height: 300px; }
}

こんな感じで、途中に1行追加するだけでOKです。

タブレットやスマホも同じくお好みの高さを決めて、
それぞれタブレットの欄、スマホの欄に追加すればOKです。
簡単ですね。

WEBサービス「Embed Responsively」を使って超簡単にやる方法

embedresponsively.com

ちなみにこういう各種埋め込みコードを簡単にレスポンシブ対応コードに変換してくれる、
レスポンシブテーマを使う人の必需サービス「Embed Responsively」というのがあります。
(こちらもTwitterはまだ対応してないっぽいですが)
ひとまずこれ使えば、YouTubeとかGoogle MapとかInstagramとかは簡単にいけちゃいます。

あとは、魔法のCSSを使うというやり方もあります。
個人的にはいつもこっち使ってます。
iframeの埋め込みコード(Google Map・YouTubeなど)をレスポンシブテーマに対応させる方法 >

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!特にWordPress独自タグやHTML/CSSの記述方法は時代とともに変わるので最新情報を各自見直してください。あと作業する時はバックアップを忘れずに!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト