Twitterウィジェットカスタム 公式ウィジェットをCSSで表示調整する方法

Twitter サイト制作 2012 年 5 月 25 日 google+0 はてなブックマーク1 Evernote

Twitterの公式ブログパーツをサイドメニュー等に表示したいけど、少しデザインを変えたいな。
という事があり。
じゃあ、CSSを追加すればいいのではないかという結論に。

1.公式ブログパーツ画面である程度設定

まず公式ブログパーツ画面で文字色や背景色などを選択します。
Twitterの公式ブログパーツ:Twitter / ウィジェット

2.追加したい部分のスタイルシートを見つける

以下のサイトが参考になります。
サイトにtwitterウィジェットを表示、カスタマイズする
Twitter ウィジェットをカスタマイズする。 ‐ dakkie blog

デフォルトで読み込まれているCSSはwidget.cssです。

3.ウェジェットにCSSを記載。

1で作成したウェジェット呼び出しの下に

<style type="text/css">
<!--
CSS指定
-->
</style>

と追記してしまうのが一番簡単かも。
(全体のCSSにまとめて書いてもいいですが。)

変更例)
枠を任意の角丸に(例:30px)

.twtr-doc{
-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;
}

参考で紹介しているページにも書かれていますが、ウィジェット全体のフォントなどを変える場合は

.twtr-widget

にフォント指定すればOKです。

公式のものでもWordPress等のサイドバーに入れるとそれなりにはいいのですが。
カスタマイズしてデザインを統一するとちょっとカッコいいかも。

【ご連絡】WordPress、サイト制作関係の新しい記事は、こちらのサイトに書いてます

広告

CPI 激安ドメイン ロリポップ!レンタルサーバー @Next Style お名前.com お名前.com


人気ブログランキング にほんブログ村 blogram

関連記事

    コメントフォーム
    メールアドレスは必須ですが公開はされません

    トラックバックURL
    広告
    ブックマーク
    はてぶ人気記事
    過去ログ