ここ数週間でレンサバの仲間が急激に増えました。

私は一足先に無料ブログからレンサバへ移行したので、運営のノウハウがそこそこ貯まっており、そのノウハウを総動員して友人たちのサイト構築のお手伝いをしております（笑）

レンサバへ移行して最初にやるのは WordPress (WP) を使ったブログの構築ですが、拘りが無ければインストールして即運営できます。
がしかし、色を変えたりフォントを調整したりと、外観は自分好みにしたいですよね。
ということで、#1に続き、知っていると便利な事を書いてみようと思います。
しばらくは主に CSS関係になると思いますが、最低限これを知っていれば「？？？」となる事は無いという基本部分を記事にするつもりです。

まずは軽く例をば（笑）

たとえば CSSを修正する際、オリジナルを書き換えてしまうと元に戻そうにも数値を覚えていないというハメになったりします。
そんな事にならないような方法を2つばかり書いてみます。

以下の部分は当サイトの当記事「サイトのカスタマイズ」の装飾部分です。

1
2
3
4
5
6
7

.entry-title {
	font-size: 30px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	color: #f16233;
}

オリジナルはフォントサイズが大きく不格好でしたので、修正をしました。
更には英字が全て大文字になる uppercase が設定されていたので、それも修正。
その際にやった試行錯誤が以下の方法です。

1
2
3
4
5
6
7
8
9

.entry-title {
	font-size: 30px;
	font-size: 22px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	text-transform: none;
	color: #f16233;
}

オリジナルのプロパティのすぐ下に同じプロパティを書く方法で、これだとオリジナルを消さずに納得いくまで試行錯誤できます。
同じクラス（.entry-title）の同じプロパティ（font-size）が複数有る場合、後に書いたものが採用されるという性質を利用すると言うことですね。
※プロパティが上書きされる

値が決まればオリジナルを消すも良し、/* */ で囲ってコメントアウトしても良しです。
もちろんそのままにしておいても全く問題はありません。

もう1つの方法は同じクラス名を追記し、必要な部分だけ抜き出して修正する方法。
以下がその例です。

1
2
3
4
5
6
7
8
9
10
11
12

.entry-title {
	font-size: 30px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	color: #f16233;
}
 
.entry-title {
	font-size: 22px;
	text-transform: none;
}

これも同様に後に書いた方ものが採用されるので、結果は同じになります。
どちらかというとこちらの方法がスマートだし、どこを修正したのかが分かりやすいですね。
更には追記した .entry-title 部分を別ファイルにし、オリジナルのファイルには全く手をつけないという方法もあります。
これが WPで言うところの子テーマというヤツですね。

この様な CSSの性質が分かっているとサイト構築の試行錯誤が楽になりますし、値を変えてもサイトに反映しないなどのミスも無くなります。