WordPressやアメブロなどのカスタマイズで良く使うCSSをザックリまとめてみました。
CSS関連の情報がまとまっているブログやWebサイトは既にたくさんあると思いますが、その多くが同じ技術屋さん向けの内容だったり、かなりボリュームもあって「え、これ全部覚えなきゃいけないの・・？orz」状態になってしまう方もいるんじゃないかと感じたので、ブログカスタマイズで良く使うものだけ厳選してみました。
「いつもコピペで貼り付けてるCSS、これってホントはどういう意味？」「コピペだけじゃなく、もう少し応用できるようになりたい！」という方は是非参考にしてみてください。
※ 実際にCSSを適用したデザインも、合わせて表示しています。また、使用頻度の少なそうなものは省いてありますのでご了承ください。
目次
文字装飾編
font-size（文字の大きさ）
文字の大きさを指定します。pxが大きさの単位なので、「12px」「18px」「36px」など数値で大きさを指定できます。（他にもemやremといった単位がありますが、扱いがやや難しいので割愛）
（例）
| font-size: 12px; | こんな大きさ |
| font-size: 18px; | こんな大きさ |
| font-size: 36px; | こんな大きさ |
font-weight（文字の太さ）
文字の太さを指定します。標準では「font-weight: normal;」です。 bold を指定すると、文字が太くなります。
使用しているテンプレやテーマでbold指定になっている所を通常文字にしたい時だけ、normal指定を。
（例）
| font-weight: normal;<br/ >（指定なし） | こんな感じ |
| font-weight: bold; | こんな感じ |
text-decoration（文字に下線など）
文字に簡単な装飾を施します。標準では「text-decoration: none;」です。underline を指定すると、文字に下線が付きます。（ただし文字フォントが下線に対応している場合のみ）
（例）
| text-decoration: none; （指定なし） |
こんな感じ？ |
| text-decoration: underline; | こんな感じ？ |
color（文字の色）
文字に色を付けます。右の値にはRGB値を指定します。
※ RGB値とは？・・色を６桁の数値で表したものです。先頭から２桁ずつ「赤（Red）」「緑（Green）」「青（Blue）」の要素がどのくらいあるか？になります。具体的には、以下のようになります。（RGB値の先頭には#を付けます）
（例）
| color: #000000; （黒） |
黒のサンプル文章 |
| color: #ffffff; （白） |
白のサンプル文章 |
| color: #ff0000; （赤） |
赤のサンプル文章 |
| color: #00ff00; （緑） |
緑のサンプル文章 |
| color: #0000ff; （青） |
青のサンプル文章 |
・・といっても、自分が欲しい色のコードを１つ１つ数値を変えながら探すのは面倒です（笑）
ネットで「色コード」で検索すると色サンプルをまとめたサイトがたくさんあるので、イメージに合う色のコードを探してみて下さい。
http://www.colordic.org/
http://flatuicolors.com/
text-align（文字寄せ）
文字の「左寄せ」「中央寄せ」「右寄せ」を設定します。ExcelやWordでもおなじみですね。標準では left。
CSSの場合、「どこを基準に文字寄せするか？」はCSSが適用される場所によって変わってきます。以下は枠線で囲っている範囲にCSSを適用しているので、その枠内で左/中央/右寄せになっています。
（例）
| text-align: left; | 左寄せ |
| text-align: center; | 中央寄せ |
| text-align: right; | 右寄せ |
letter-spacing（文字間）
文字と文字の間（横方向）を広げます。数値が大きい程、文字間が広がります。
文字間を空けたい時に「スペース」で調整している方を見かけますが、CSSをいじれるなら絶対こちらで調整した方が良いです。
（例）
| letter-spacing: 0px;<br/ >（指定なし） | letter-spacingを適用したサンプル文章 |
| letter-spacing: 2px; | letter-spacingを適用したサンプル文章 |
| letter-spacing: 4px; | letter-spacingを適用したサンプル文章 |
line-height（行間）
行間を広げます。文章が２行になった時に、１行目と２行目がくっつきすぎている場合にお使い下さい。「line-height: 1.0;」が標準設定になっており、1.1、1,2、・・と小数付きで指定する事が多いです。「line-height: 2.0;」で１行分空きます。
行間を改行で調整している方もいると思いますが、あれ実はSEO的によくなかったりします。HTMLの文法上改行が続くのはNGとされるので・・こちらで指定した方が後から調整できますし、何かと便利。
（例）
| line-height: 1; （指定なし） |
While { Creative ! } ブログ |
| line-height: 1.3; | While { Creative ! } ブログ |
| line-height: 1.6; | While { Creative ! } ブログ |
エリア内調整編
background
背景色を指定します。指定方法は、colorと同じくRGB値です。
また、色だけでなく画像も設定できます。
（例）
| background: #000000; （黒） |
黒の背景サンプル |
| background: #ffffff; （白） |
白の背景サンプル |
| background: #ff0000; （赤） |
赤の背景サンプル |
| background: #00ff00; （緑） |
緑の背景サンプル |
| background: #0000ff; （青） |
青の背景サンプル |
| background: url(●ここに画像URL●) center center no-repeat; | 画像の背景サンプル |
（画像の指定方法はたくさんのパラメータがありすぎるので、また別記事にて・・）
border
指定エリアに枠線を付けられます。以下の３つを設定可能。
- 枠線の太さ
- 枠線の種類（通常線、点線など）
- 枠線の色
| border: none;<br/ >（指定なし） | |
| border: 1px solid #000000; |
太さ1pxの黒い枠線
|
| border: 3px solid #ff0000; |
太さ3pxの赤い枠線
|
| border: 1px dashed #0000ff; |
太さ1pxの青い点線
|
padding
HTMLエリア内の余白を表します。記事やサイドバーなどで枠線内に文章が表示されているエリアで、もう少し周囲の枠線と文章の間に余白を入れて読みやすくしたいなーと感じる事はありませんか？そんな時に活躍する、CSSです。
いくつか書き方がありますが、とりあえず以下の５種類を覚えておきましょう。背景色の白い部分が、paddingを適用しているエリアです。それぞれ上下左右に余白が自動設定されています。
| padding: 10px; |
上下左右に10pxの余白上下左右に10pxの余白上下左右に10pxの余白上下左右に10pxの余白
|
| padding-top: 20px; |
上部に20pxの余白上部に20pxの余白上部に20pxの余白上部に20pxの余白上部に20pxの余白上部に20pxの余白
|
| padding-left: 20px; |
左部に20pxの余白左部に20pxの余白左部に20pxの余白左部に20pxの余白左部に20pxの余白左部に20pxの余白
|
| padding-bottom: 20px; |
下部に20pxの余白下部に20pxの余白下部に20pxの余白下部に20pxの余白下部に20pxの余白下部に20pxの余白
|
| padding-right: 20px; |
右部に20pxの余白右部に20pxの余白右部に20pxの余白右部に20pxの余白右部に20pxの余白右部に20pxの余白
|
margin
HTMLエリア外の余白を表します。上のpaddingと似ているので、最初は違いが分かり辛いかもしれませんが・・paddingが指定エリアの内側、marginが指定エリアの外側、という違いです。
エリアが並んでいる場合に効果を発揮します。-top や -left などの書き方はpaddingと全く同じです。以下、margin-topを適用した例です。枠線部の間に余白が生まれます。
| margin-top: 0px; 指定なし） |
1
2
3
|
| margin-top: 10px; |
1
2
3
|
その他
display: none;（非表示設定）
読んだままですが、その要素を非表示にするCSSです。
既に文字装飾などがされていようが、問答無用で非表示に。
（例）
| display: block; （指定なし） |
表示されてますよね？ |
| display: none; （指定なし） |
まとめ
以上、WordPressやアメブロのカスタマイズ時によく出てくる、CSSまとめでした。
他にも便利なCSSはたくさんありますが、ここに書いてある基本的なものを知っているだけでも、ちょっとしたブログデザインの調整は自分で出来るようになります。
普段コピペして使っているCSSも、じっくり見てみると一体何をしてくれるCSSなのか？分かってきて楽しいですし、応用も利くようになりますよー。
ではでは。