このページでは文字や各要素のデザイン（スタイル）を変更したい場合の手順について説明しています。
本テーマや親テーマのCocoonとは別に独自のスタイルを適用したい場合はこのページの説明を参考にしながらやってみてください。
CSSとは
CSSとは【Cascading Style Sheets （カスケーディングスタイルシート）】 の頭文字をとったものであり、一般的には「スタイルシート」と呼ばれています。
CSSに関する基本的な情報はネット上にアホほどあるのでココでは割愛しますが、基礎知識として以下の記事が参考になると思いますので「そもそもCSSってなに？」という初心者さんは、まずこちらの記事で基礎知識を身に着けておいてください。
スタイルの編集はデベロッパーツールを使うべし
スタイルの編集はブラウザに標準装備されてる「デベロッパーツール」を使ってやっていくのが一番手っ取り早い方法になります。まだ使ったことがないという方に向けてデベロッパーツールの特徴や基本的な使い方について以下の動画で説明していますので一度目を通しておいてください。
スタイルを変更する一連の流れ
CSSは「セレクタ」やら「プロパティ」やら横文字ばかりなので少々とっつきにくい感がありますが、スタイルを適用する一連の流れとしてはとってもシンプルです。
- デベロッパーツールで変更したい箇所（class名）を見つける
- デベロッパーツール上で適用したいスタイルを書く
- WordPressのCSSにコピペする
以下の動画で一連の流れを順に説明していますので、スタイルを編集する時の参考にしてみてください。
海外製なので全て英語なのが難点ですが、以下のプラグインだとCSSだけでなくJavaScriptやPHPも使えるので個人的にはこちらのプラグインがオススメです。
コードを追加する場所
コードは配置する場所によって適用される範囲が異なりますので状況に応じて使い分けましょう。
- 現在編集しているページのみスタイル適用したい場合・・・ページ内のカスタムCSSに追加
- 全てのページにスタイルを適用したい場合・・・「Simple Custom CSS」に追加
よく使うCSSコードのプロパティ
普段よく使うCSSコードのプロパティをまとめてみました。CSSのプロパティはアホほどあるので全てを覚えるのはとっても大変ですが、ちょっとしたデザイン変更であればとりあえずこれだけ知っておけば充分だと思います。
| 区分 | プロパティ | 内容 | 例 | 意味 |
|---|---|---|---|---|
| 文字 | color | 色 | color: #fff; | 文字色 |
| 文字 | font-weight | 太さ | font-weight: bold; | 文字を太くする |
| 文字 | text-align | 配置 | text-align: center; | 文字の配置を中央寄せにする |
| 文字 | line-height | 行高さ | line-height:22px; | 行高さを22pxにする |
| 文字 | font-family | 種類 | font-family: ‘Meiryo’; | フォントの種類をメイリオにする |
| 背景 | background-color | 背景色 | background-color: #000; | 背景色を黒色にする |
| 幅 | width | 幅 | width: 100%; | 幅を100％にする |
| 高さ | height | 高さ | height: 200px; | 高さを200pxにする |
| 余白 | margin | 外側の余白 | margin: 0; | 外側の余白を0にする |
| 余白 | padding | 内側の余白 | padding: 10px; | 内側の余白を10pxにする |
| 枠線 | border | 枠線 | border: 1px solid #000; | 1pxで黒色の枠線を付ける |
| 表示 | display | 表示 | display: none; | 要素を非表示にする |
Webデザインを学ぶ時のおすすめサイト
WEBデザインの知識を学ぶならとりあえず「サルワカ」だけ見ておけばOKです。
このサイトは「とにかく分かりやすい」の一言に尽きますし、大抵のことはこのサイトを見れば解決できると思いますので、WEBデザインで分からないことがとりあえずこのサイトで調べるようにしましょう。
このページの説明は以上です。
