サイドバーのタイトルに画像背景

サイドバーのタイトル部分の背景に画像を使います。

変更前	変更後

ところで、別ブログ「さっちゃんとマー君」を久しぶりに更新しました。
検事が大活躍するドラマ「H-ERO」(エッチエロ)を紹介しています。

今日の内容は数回に分けて書きます。

メニュー
１回目サイドバーのタイトルをくまにする（今見ている記事）
２回目サイドバーの本体をカスタマイズ
３回目サイドバーのタイトルを変更する
４回目全部「同じくま」でなく、ブロックごとに違う背景にする

参考記事：
で、スタイルシートはどこに書くのか？
ファンブログでアップロードした画像の場所
ブログのヘッダの背景を変える
プロフィール画像のサイズ変更

スタイルシートを書きかえる

スタイルシートを開いて、今回探すのは.side_titleというところです。
これは１箇所ではなく複数箇所あります。

私のスキンには、３箇所ありました。

body#multi .side_title {
	background: #eee;
	padding: 4px;
	margin-bottom:5px;
	color: #555;
	font-weight: normal;
	text-align: center;
}

（中略）

body#doubleL .side_title {
	background: #eee;
	padding: 4px;
	color: #555;
	font-weight: normal;
	text-align: center;
}

（中略）

body#doubleR .side_title {
	background: #eee;
	padding: 4px;
	color: #555;
	font-weight: normal;
	text-align: center;
}

しかし、よく見ると３つともほとんど同じです。
body#doubleL .side_title とbody#doubleR .side_title は全く同じ。
body#multi .side_titleも、１行margin-bottom:5px;という行が多いだけで後は同じです。

そこで、この３つはまとめて書くことにします。
３つともまるごとコメントアウトしてください。

/*body#multi .side_title {
	background: #eee;
	padding: 4px;
	margin-bottom:5px;
	color: #555;
	font-weight: normal;
	text-align: center;
}*/

これ以外の２つも同じようにコメントアウトします

参考記事：
ブログのヘッダの背景を変える（コメントアウトの方法が２つ書いてあります）

body#multi .side_titleの１行だけが違うので別に書いておきます。

body#multi .side_title{
	margin-bottom:5px;
}

そして残りをまとめて、次のようにスタイルシートに書きます。

body#multi .side_title,body#doubleL .side_title,body#doubleR .side_title{
	background:url('画像のURL') left top no-repeat;
	height:45px;
	line-height:37px;
	padding:8px 0 0 20px;
	color:#fff
}

これから１行目の赤い部分のみ説明します。

それ以外は、画像のURL指定と、画像に合わせた微調整です。
今回のくまの画像はhttps://fanblogs.jp/ayzfqir5/file/173/Y2F0ZWdvcmllcy1iZyHH.gifに置いてあります。

スタイルシートで複数要素の同時指定

今回のように別の要素に同じ内容のスタイルを適用する時は、まとめて書くことが出来ます。
要素と要素の間は,（カンマ）で区切ります。

div,pのように,(カンマ)で区切る時は、並列に作用します。
つまり、divもpもという意味。

それを下のように半角スペースで区切ると、divの中にあるpは、という意味になります。

div p{
    color:#00f;
}

このスタイルを適用するとdivの中にあるpは文字色が青くなりますが、divの中にないpは青くなりません。

つまり、body#multi .side_title,body#doubleL .side_title,body#doubleR .side_titleは、
body#multi .side_titleと
body#doubleL .side_titleと
body#doubleR .side_titleの３つには

{
	background:url('画像のURL') left top no-repeat;
	height:45px;
	line-height:37px;
	padding:8px 0 0 20px;
	color:#fff
}

を適用しなさい。ということです。

また、body#multi .side_titleのように、同じ要素を複数箇所に分けて書くことも可能です。

今回使った、くまの画像は
Word Press用のCute Thingsというテンプレートのものです。

３回に分けて、このCute Thingsのサイドバーを移植する方法を書くつもりでいます。

Cute Thingsは誰でも自由に使えるフリーのテンプレートです

Cute Things

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

サイドバーのタイトルに画像背景

スタイルシートを書きかえる

スタイルシートで複数要素の同時指定

HTML、CSS、JavaScript、スパムと悪徳商材の対策