自身のつぶやき(ツイート)やフォローしているユーザーのつぶやき(ツイート)などを本文やウィジェットなどに挿入することができる「埋め込みタイムライン」。サイトの情報を充実させる意味でも非常に便利な機能ですよね?
でもこの埋め込みタイムラインは基本的に「白」か「黒」の背景しか選択できません。仕方ないか・・・でそのまま使ってもいいのですが、サイトの背景色を設定している場合などは不自然な感じになりますよね?
今回はTwitterの「埋め込みタイムライン」に背景色などの装飾を行う方法を紹介します。手順通りにやれば簡単にできますので是非チャレンジしてください。
WordPressのこととして紹介していますが、ブログやその他のサイトでも方法は同じですので参考になれば幸いです。
ウィジェットなどに挿入したTwitterの埋め込みタイムラインを独自デザインにする方法
大きく分けて2つの手順で設定します
1.埋め込みタイムラインの背景色を透明にする
Twitterの埋め込みタイムラインのコードは
<a class="twitter-timeline" data-height="400" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
こんな感じですね。ここに魔法のコードを追加して、透明化します。やり方はかんたん
コードの中のhrefという文字列の手前あたりに(厳密には文字列の手前ならどこでも可)
「data-chrome=”transparent”」という魔法のコードを入れるんです。
これで埋め込み部分の背景が透明になり、サイトの背景色がそのまま表示されます。
ちなみに上のコードに魔法のコードを入れたものがこちら
<a class="twitter-timeline" data-height="400" data-chrome="transparent" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
ここまでで第一段階クリアです。
2.タイムラインにデザイン要素を追加する
第一段階で透明化できましたので、埋め込みコードにclass要素を与えて背景色や囲み線などのデザインを施していきます。
今回class名を「tw-ume」としましたが、自身で変更して頂いてOKです。
まずは透明化した埋め込みコードをdiv要素で囲みます。「tw-ume」というclassであれば
<div class="tw-ume"><a class="twitter-timeline" data-height="400" data-chrome="transparent" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div>
という感じにします(要するに<div class=”tw-ume”>と<div>の間に埋め込みコードを入れるんです)。
※ここで<div id=”〇〇”>と指定することもできますが、id要素は1ページに1か所というきまりがありますから複数の埋め込みを行う場合1か所にしか適用されない場合がありますからclassで指定します(余談でした・・・)。
そしてテーマのCSSに以下のようなコードを追加します
/************** Twitterタイムラインの本体デザイン ***************/
/* Twitterタイムラインのコードに「data-chrome="transparent"」を追加すること */
.tw-ume {
background-color: #fffacd;
border: 2px solid #cc9900;
border-radius: 8px;
}
今回は背景色と囲み線、囲み線を丸めるというデザインを適用しています。
実際に埋め込んだウィジェットは当サイト内の卓球関連の記事にのみ表示している「国際卓球連盟」のツイートを埋め込む部分に使いました。
デザインが適用されないときは
中には「書いてある通りにやったのにできないじゃん!!」となる方もいるかもしれませんね。そんなときはキャッシュを削除してみましょう(これCSS編集の基本ですから覚えておくといいです)。
Google Chromeブラウザの場合ならページを表示した状態で「F12」をクリックしてデベロッパーツールを開きます。そしてページの再読み込みをするためのアイコンの上で右クリックし、「キャッシュを消去してハード再読み込み」をクリックします。
すると・・・ページを速く表示するための記憶(キャッシュ)がクリアされ、最新のCSSが適用されたページが表示されます。
それでもうまくいかないときはclass名が被っているなど他に原因がありますから検証してみてくださいね。
また透明化するための要素が「data-chrome=”transparent”」となっているのでGoogle Chrome限定の設定なのかもしれません(私はChromeを使っているのでその他のブラウザでは試していません)。

おまけ 条件に応じてウィジェットを切り替える方法
おまけ情報ですが、特定の記事や投稿タイプにだけ限定してウィジェットを作れるプラグインがあります
普通なら全ページ共通のウィジェットとなってしまうWordPressサイトの自由度が各段にアップするプラグインですから導入を検討してみてくださいね。