WordPressサイドバー見出しデザインはCSSコピペでカスタマイズ

私たちは人気のあるWordpressのテーマSimplicity(小テーマ)を使用中です。前回、投稿の見出しデザインはCSSコピペでカスタマイズのタイトルで投稿しました。今回はその続きとしてサイドバーの見出しデザインを変える方法をご紹介します。

WordPressの見出しを変えたい(続編)

前回では投稿中の見出しh2からh4までのCSSコピペによってデザインが変えられるということをご紹介しましたが、次はサイドバーの見出しも同じように簡単に変えられます。

サイドバー見出しをコピペで簡単にカスタマイズ

私の場合、ちょっぴり寂しいと感じたサイドバーを投稿の見出しh2と同じ花模様のデザインへ変更して統一感を出しました。前回の投稿でご紹介したおすすめサイトから応用しただけです。Wordpressのカスタマイズにあるテーマの編集『スタイルシート(style.css)』へ貼り付けをしてファイル更新します。

サイドバー花模様入りの見出しCSS

参照投稿の見出しデザインはCSSコピペでカスタマイズの目次『1.3.1　h2 花模様入り見出しCSS』をサイドバーの部分で加工したものです。

/* サイドバー花模様入りの見出し */
#sidebar h3 {
	padding: 10px 10px 10px 60px;
	color: #D04255;
	position: relative;
}
#sidebar h3:before{
	content: '＊*';
	color: #FFF;
	text-shadow: 0 0 5px #EAA8BF, 0 0 0.5px #EAA8BF;
	font-size: 30px;
	font-weight: bold;
	margin-right: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	display: inline-block;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
}
#sidebar h3:after{
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	border-bottom: 2px dotted #EAA8BF;
}

完成したサイドバー花模様入りの見出し

上記のCSSによってサイドバーも花模様付きの見出しとなりました。淡い花模様なので、もしかしたらスマホからみている方にとってはぼんやりと見づらいかもしれません。(ごめんなさい)

sidebar 花模様入り見出し(拡大)

あとがき

ここでは花模様付きの見出しデザインの例をご紹介しましたが、サイドバー見出しのデザインも基本は他のコピペ出来るサイトからお気に入りのデザインを選択します。これをWordpressのスタイルシートに貼り付け、さらにサイドバー(sidebar)に見出し(h3くらいが適度)の大きさを調整するなど自ら自由に加工が出来ます。ぜひ、色々と研究して試してみて下さい。

ブログを見て下さりありがとうございました。
ライフスタイルブログ ポジティブな暮らし