ツイッターウィジェットにアイコンをつける

ツイッターウィジェットにアイコンをつける方法についての覚書です。

tweet12

アイコンには、OpenClipArt のものを利用することにします。

tweet04

※Twitterの公式アイコンがあるようですので、以下のページよりダウンロードされて使用する方がいいかと思います。(2011.09.21追記)twitter-logo01
Twitter – ロゴとアイコン

「tweet」等のキーワードで画像を検索し、適当なものを選んでリンクをクリック。

tweet05

「PNG」ボタンをクリックして、

tweet06

画像をダウンロードします。

tweet07

Inkscape 等で適当に編集し、

tweet08

画像をWordPress.comのメディアへアップロードし、

tweet14

以下のCSSを追加すると(テーマ「Twenty Eleven」用)、

.widget_twitter li {
background-image:url('http://asazuki508.files.wordpress.com/2011/06/tweet11.png');
background-position:left top;
background-repeat:no-repeat;
padding-left:25px;
margin-left:-20px;
list-style-type:none;
}

ツイッターウィジェットにアイコンがつきます。

tweet13

arrow02

tweet12

なお、上記の場合、不特定多数の方がCSSをそのまま使えるように著作権フリーの画像を使いましたが、特定のウェブサイトやご自分のブログだけで使われるのでしたら、以下のサイトからアイコンを探されることをおすすめします。良質のアイコンをたくさん見つけることができるでしょう。

FindIcons

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中