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