Twitterの公式ブログパーツをサイドメニュー等に表示したいけど、少しデザインを変えたいな。
という事があり。
じゃあ、CSSを追加すればいいのではないかという結論に。
１．公式ブログパーツ画面である程度設定
まず公式ブログパーツ画面で文字色や背景色などを選択します。
Twitterの公式ブログパーツ：Twitter / ウィジェット
２．追加したい部分のスタイルシートを見つける
以下のサイトが参考になります。
サイトにtwitterウィジェットを表示、カスタマイズする
Twitter ウィジェットをカスタマイズする。 ‐ dakkie blog
デフォルトで読み込まれているCSSはwidget.cssです。
３．ウェジェットにCSSを記載。
１で作成したウェジェット呼び出しの下に
<style type="text/css">
<!--
CSS指定
-->
</style>
<!--
CSS指定
-->
</style>
と追記してしまうのが一番簡単かも。
（全体のCSSにまとめて書いてもいいですが。）
変更例）
枠を任意の角丸に（例：30px）
.twtr-doc{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
アイコンや名前があるヘッダとフッダを非表示に
.twtr-doc{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.twtr-hd{
display:none;
}
.twtr-ft{
display:none;
}
.twtr-timeline{
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.twtr-hd{
display:none;
}
.twtr-ft{
display:none;
}
.twtr-timeline{
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
参考で紹介しているページにも書かれていますが、ウィジェット全体のフォントなどを変える場合は
.twtr-widget
にフォント指定すればOKです。
公式のものでもWordPress等のサイドバーに入れるとそれなりにはいいのですが。
カスタマイズしてデザインを統一するとちょっとカッコいいかも。
トラックバックURL