るうのたわごと。

[£]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


  関連記事

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

TLが騒がしかったので、確認してみたら見事にエラーまみれだったるう(@Lugh_ …

炭酸水出し紅茶
[£]好みの味にするのは難しい?簡単ティーソーダの作り方

職場で水出し紅茶を良く作っているるう(@Lugh_)です。 去年の夏、炭酸水には …

だららんペンギン
[£]ロリポップで運営しているWordPressの乗っ取り対策?

ロリポップユーザーのるう(@Lugh_)です。 かなり多くのユーザーのWordp …

ロリポップユーザー画面1
[£]WordPressのログイン画面にエラー発生した時の対処方法(ロリポップ)

地道なPHPソース書き込みの毎日を過ごしているるう(@Lugh_)です。 昨夜は …

no image
[£]スーパーマリオがもらえるキャンペーンは2014.1.20まで!ニンテンドーネットワークIDを登録してみた

ネットワークIDは実は私にとっては不要なんじゃないか…と思ってしまったるう(@L …

UP by JAWBONE
[£]UP by JAWBONEをリセットする

ちょっと運動不足気味なるう(@Lugh_)です。 今月18日からUP by JA …

no image
[£]Stinger2をカスタマイズする -「続きを見る」のスタイルを変更する-

カスタマイズで検索に来て下さる方もちらほら居てくださるのが励みになっているるう( …

アイスティの作り方。
[£]簡単、アイスティの作り方

コーヒーより紅茶派のるう(@Lugh_)です。 暑い季節になってきたので、職場で …

だららんペンギン
[£]WordPress、上書きインストールからの生還劇(ロリポップ!)

仕事柄「バックアップはしっかり取ってください」とよく言っているるう(@Lugh_ …

feedly-follow-logo-green_2x
[£]Feedlyの配信がうまくできてなかった件

SelfBANが多いなと感じているるう(@Lugh_)です。 最近、ここのFee …