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

この記事の説明の中で出てくる「ツイッターウィジェット」は近々、なくなるそうです。その代わりに「Twitter タイムライン」というウィジェットができました。設置方法については以下の記事にまとめました(2013年5月2日追記)。
WordPress.com に Twitter 公式のウィジェットを貼り付ける方法(改)
ツイッターウィジェットにアイコンをつける方法についての覚書です。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

投稿者: comemo

mac & iPad で情報をインテグレートする

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

%d人のブロガーが「いいね」をつけました。