before の content を使って、見出しの左側に画像を挿入する

記事「リストの左側に画像や文字を貼る方法」において、リストの左側に画像などを挿入する方法について検討しており、このなかで「before」を使った方法を取り上げていますが、今回は、この方法を使って、ウィジェットの見出しの左側に画像を挿入する方法について検討してみました。

adgsgsfg

CSS スタイルシートエディターの方に追加した CSS は以下のとおりです。

/* ウィジェットの見出しの左側に画像を挿入する */
aside[id=tag_cloud-3] h3.widget-title {
	text-align: left;
	padding-left: 5px;
}

aside[id=tag_cloud-3] h3.widget-title:before {
	content: url("http://comemo508forum.files.wordpress.com/2013/04/comemo-forum-wordpress-com-e381aee38387e383a2e794a8e381a7e38199e38082.jpg");
	margin: 3px 7px -3px 3px;
	display: inline-block;
	vertical-align: middle;
}

「content」のところに入れる画像の寸法を事前に調整するときには、私の場合は、画面キャプチャソフトの「Skitch 」で済ませてしまうことが多いのですが、

sfgsfgsgsfd

WordPress.com の方にある、画像を拡大縮小させる機能を使ったり、

dgsdgsfg

Windows を使われている方でしたら、PhotoScape の「リサイズ」機能を使ってもいいかもしれません。

adgasfadfads

投稿者: comemo

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

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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