2013年に変更があったTwitterの新しいタイムラインウィジェットは、UI上でのカスタマイズ項目が限られていて、CSSでもカスタマイズができません。
背景や区切り線を透明にしたり、ヘッダやフッタを非表示にすることができず、自分のブログのデザインのトーンに合わせづらく感じてました。新Twitterウィジェットのカスタマイズ方法は、UIで指定されるHTMLのa要素にdata-chrome属性を追加することで、デザインを変更することができます。
data-chrome属性の値は下記4つが用意されており、複数を同時に指定する場合は半角スペースで区切ります。
transparent
ウィジェットの背景を透明にします。TwitterのUI上だと、白もしくは薄墨色の背景色しか選べないので、背景を透明にするだけで自分のブログのデザインにグっと近づけることができます。
noborders
区切り線を非表示にします。各ツイートを区切る境界線とウィジェットの周りの境界線が非表示になります。
noheader
ヘッダを非表示にします。
nofooter
フッタを非表示にします。
<a class="twitter-timeline" data-chrome="nofooter noborders transparent" href="https://twitter.com/marley_live" data-widget-id="********">@marley_live からのツイート</a>"
UIやCSSではカスタマイズできないTwitterのタイムラインウィジェットはコードのa要素に条件を追記するだけで、自分のWebサイトにあったデザインに近づけることができます。ぜひお試しください。
コメント - comments -