るうのたわごと。

[£]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_)です。 昨夜は …

wpid-wp-1416407810016.jpeg
[£]だららんっと過ごせる気がしない!ミスドのスケジュールン2015を貰ってきたよ!

キイロイトリ派のるう(@Lugh_)です。 ミスタードーナツでポイントを集めても …

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

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

名刺2
[£] Stingerにテーマを変更してみた

WordPress、上書きインストールからの生還劇(ロリポップ!)を書いていた理 …

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

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

no image
[£]Androidユーザーに贈る?iOS端末のカーソル移動法

Xperia SXとiPad mini使いのるう(@Lugh_)です。 なぜか、 …

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

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

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

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

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

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

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

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