るうのたわごと。

[£]Stinger2をカスタマイズする -サイドバー見出しのスタイルを変更する-

 

年長さんの姪っ子と全力で遊んでちょっと腰に来ているるう(@Lugh_)です。
…今日は簡単なカスタマイズメモで終わりそうです。

今日の作業は、style.cssで行います。

1.サイドバーの項目見出しのアイコンを準備し、見出しの左端・文字色を変える。
stinger2_sideh4

アイコンを「ca3.png」という名前で作成します。(30×30程度のサイズが良いそうです…小さいですけどね、うちのは)
ca3

作業前:485行目くらい

/*サイドの各タイトル見出し*/

.menu_underh2 {
	font-size: 16px;
	margin-bottom: 20px;
	border-left-color: #666666;
	color: #333333;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: left center;
}

作業後

/*サイドの各タイトル見出し*/

.menu_underh2 {
	font-size: 16px;
	margin-bottom: 20px;
	border-left-color: #029EBC; /* 左のバーの色 */
	color: #653d29; /* サイド見出しの文字色 */
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: 10px 0.5em; /* リストマーク位置合わせ */
}

この時点で、リストマークの位置の変更・文字色・左端の色が変更されています。
stinger2_sideh4_2

2.見出しの背景色を変更する。
作業前:309行目あたり

h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f3f3f3;
	line-height: 28px;
}

作業後:都合上「.post h4(本文用見出し)」と「h4(サイド用見出し)」に分けています。

.post h4 {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#029EBC;
	border-style:solid;
	background:#fff;
	color:#017589;
	line-height:140%;
	font-weight:bold;
	text-align:left;
}

h4 {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color:#f79708;
	border-style:solid;
	background:#EBF7FA;
	color:#653d29;
	line-height:140%;
	font-weight:bold;
}

サイドバーと(ついでに)本文中のh4見出しが完成します。
stinger2_posth4
stinger2_sideh4_3

※本来であれば、「smart.css」にも同じ作業が必要です。
※腰を据えてかかれば1時間程度で終わる作業が、画像切りだしやっていくとおそろしく時間がかかると嘆く私がここにいます。

明日はh3タグ変えて終わりにしてもいいですか?(笑)
以上、「るうのたわごと。」的カスタマイズその2でした。

 - ぶろぐ, めも , ,

admax300-2

admax300-2

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

wpid-rps20131112_201803.jpg
[£]ニベアでスキンケア再開しました

ニベアはチューブ派のるう (@Lugh_)です。 ニベアってなんかすごいと聞いて …

wpid-rps20131208_103047.jpg
[£]QUOカードの残高はあるのに使えない!なので、再発行してみた!

よく使うコンビニはLAWSONなるう(Lugh_)です。 頂き物のQUOカードが …

no image
[£]Xperia SX(Android) でモブログ環境を作ってみた!(試行錯誤中)

最近、Wordpress公式アプリでブログ更新をしているるう(@Lugh_)です …

no image
[£]Googleカレンダーの重複をOutlook2007を使って整理してみた

画像の準備をしはじめたらそれだけでお腹いっぱいになったるう(@Lugh_)です。 …

unnamed
[£]頭痛の予測に、「頭痛~る」を導入してみた

春先が一番片頭痛を起こしていたところ、親知らずを抜歯したら偏頭痛頻度が上がったよ …

no image
[£]とりあえずPC版!SNSボタンの形をそれとなく揃えてみたよ!

やろうやろうと思っていたことをようやくやりました。 るう(@Lugh_)です。 …

wp1
[£]Android端末でモブログ環境を整えてみたかった…

基本的に手元でできるものは手元でやりたいるう(@Lugh_)です。 以前は絵日記 …

名刺2
[£]ぶろがーめいしなるものをたのんでみた

ぶろがーめいしなるものに興味津津のるう(@Lugh_)です。 なにやらおふ会なる …

no image
[£]ウェブマスターツールがエラー(hentry)まみれだったので修正してみた:その2

先日施したエラーの結果が思わしくなかったので、少し方法を変えてみました。 先日の …

no image
[£]UP by Jawbone、表面割れで問い合わせてみた

最近、動いてない気がするるう (@Lugh_)です。 Jawboneの表面割れで …