るうのたわごと。

[£]Stinger2をカスタマイズする -個別記事ページ各種見出しのスタイルを変更する-

 

日中もマニュアルを作っていた気がするるう(@Lugh_)です。
いろいろ大変です、AndroidだのFacebookだのWordpressだの直接担当じゃないのに、斜めに学んでいってるせいで首を突っ込まざるを得なくなってます。
いやぁ…一石二鳥だね?( ゚д゚๑)

さて、今日は本文関連の見出しを2つ編集します。
今日の作業も、style.cssです。
※作業前と書いているのはDLしてきたままの状態のCSSのことです。

1.本文内のh3タグを編集する。
h3
h4を上下のラインで挟み込むデザインにしたので、h3は違うデザインにしようと思います。

作業前:281行目あたりから

/*小見出し*/

.post h3 {
	font-size: 18px;
	margin-bottom: 20px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 20px;
	color: #333;
	line-height: 30px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #333;
	
}

h3 a {
  color: #333;
  text-decoration: none;
}

h3 a:hover {
  color: #C03;
}

今日はもう適当です(笑)
16~23行目については「.post h4」にも適応させておきました。

/*小見出し*/

.post h3 {
	font-size: 18px;
	margin:0 0 20px 0;
	padding:2px 8px;
	border-width:0 0 0 15px;
	border-color:#017589;
	border-style:solid;
	background:#EBF7FA;
	color:#017589;
	line-height:150%;
	font-weight:bold;
}

h3 a {
  color: #653d29;
  text-decoration: none;
}

h3 a:hover {
  color: #029EBC;
}

リンクなし(←)/リンクあり(→)です。
h3_after
h3、h4でリンクを貼る機会があるかは…あるのかなぁ…?
※ 今、軽く探してみたらindexページのタイトルがh3でした。indexページは大人しく後日にします!

2.個別記事ページタイトル見出しのスタイルを変更する。
順番、気にしましょう…というところですが。
h1_kobetsu

作業前:214行目あたりから

/*記事タイトル*/

.entry-title {
	font-size: 30px;
	line-height: 35px;
	color: #333;
	margin-bottom: 20px;
}
.entry .entry-content .entry-title a:hover {
  text-decoration: underline;
}
.entry-title a {
  color: #333;
  text-decoration: none;
}

ほぼ適当に総書き換えです。

/*記事タイトル*/

.entry-title {
	font-size: 25px;
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0 ;
	border-color:#f79708;
	border-style:solid;
	background:#fff;
	color:#653d29;
	line-height:140%;
	font-weight:bold;
}
.entry .entry-content .entry-title a:hover {
  text-decoration: none;
}
.entry-title a {
  color: #653d29;
  text-decoration: none;
}

ここは、アイキャッチ的な色でオレンジが残したいなと思ったので今使っているものを残そうと思っています。
文字を茶色にしておくとオレンジってしっくりくる気がするのです…。

さて、誤爆までかまして記事公開してしまいましたので、このまま公開ボタンを押しておきます!
るう(@Lugh_)でした。

 - ぶろぐ, めも , ,

admax300-2

admax300-2

Message

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

CAPTCHA


  関連記事

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

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

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

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

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

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

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

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

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

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

やきど。
[£]改めまして、「るうのたわごと。」です。

改めまして、「るうのたわごと。」著者のるう(@Lugh_)です。 大まかなところ …

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

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

ジェットストリーム 3色ボールペン
[£]ジェットストリーム 3色ボールペン 0.5mmの替え芯をようやく買ってきたよ。

ジェットストリーム 3色ボールペン 0.5mm愛用中のるう(@Lugh_)です。 …

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

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

UP by JAWBONE
[£]UP by JAWBONEが返ってきた!

UP by JAWBONEといいXperia SXといい今年はバッテリー関連に悩 …