- WordPress初心者
- デザインを変えたいが何から始めたら良いかわからない
- CSSってなに？
初心者の自分が初めに検索・勉強した知識を掲載します。
CSSとは
WebページにHTMLで置いたものを「装飾する」という認識がわかりやすいと思います。
HTMLでも文字色を変えるなど「装飾」の役割をもちますが、
HTMLではその都度プログラムの入力が必要であるのに対して、
CSSではデザインのパターンを作り、別々の記事に対して同じデザインを表現し
統一することができます。
編集場所
外観 → テーマファイルエディター → Cocoon Child → スタイルシート
矢印の箇所にCSSコードを追加していきます。
書き方・用語
「セレクタ」「プロパティ」「値」「宣言」
| 呼び名 | 意味 | 説明 |
|---|---|---|
| セレクタ | どこの | 編集したい場所（要素） |
| プロパティ | なにを | 編集したいこと、大きさ・色・種類など |
| 値 | どうする | 数字であったり、種類名など |
| 宣言（宣言ブロック） | {（プロパティ）:（値）; } | { } の中身は；で区切って複数入力可能 |
CSSの書き方
考え方 → どこの { なにを：どうする；}
書き方 → セレクタ { プロパティ：値；}
書き方の例
.article h2 {
color : #fff;
font-size : 24px;
background : #58b;
}| 分類 | コード | 説明 |
|---|---|---|
| セレクタ | .article h2 | 「見出しH2」のカスタマイズをする |
| プロパティ | color fontsize background | 「文字色」を編集する 「文字サイズ」を編集する 「背景ベース」を編集する |
| 値 | #fff 24px #58b | 白色 24px（ピクセル） 薄青色 |
・カスタマイズ前（デフォルト）
・カスタマイズ後（文字白色、文字サイズ少し拡大、ベース薄い青色）
検証ツール（デベロッパーツール）
検証ツールで「セレクタ」を取得できる。
検証ツールとは開いているWebページのHTMLやCSSの構成をブラウザ上で確認できるツールです。
検証ツールの使い方
Webページのカスタマイズしたい箇所で右クリック、「検証」を選択します。
例：「タイトル」部分をカスタマイズしたい場合
下画像、右側に検証ツール（赤四角囲み）が表示されます。
左側のWebページのカスタマイズしたい箇所（今回はタイトル）に青帯が表示されます。
（青帯上下に橙帯）
右側の検証ツール内HTMLの青帯（赤矢印）が左側のカスタマイズしたい箇所に対応した
HTMLコードです。
左側Webページのカスタマイズしたい箇所の青帯が現れない時、または青帯が
自分が指定したい箇所と違う時は、右側HTML内の青帯に近い部分（上画像の赤矢印付近）を
いくつかクリックしてみると見当たると思います。
「セレクタ」の見つけ方 3つ
- 「HTML」青帯の「class」にある”entry-title”
- 「Styles」タグのCSSに記述されている「.entry-title」
- 「Computed」タグのプリパティの三角（青枠プロパティ）を開くと、
「値」（ピンク矢印）と「セレクタ」（緑矢印）が出現する。
自分でCSSデザイン
例①：記事のタイトル（冒頭見出し）に青いベース（背景）、白文字
冒頭見出しのセレクタを「検証ツール」で検索します。
セレクタ：「.entry-title」
「背景ベース色変え」のプロパティをネットなどで検索します。
プロパティ：「background」または「background-color」
CSSでの色「青」の値を調べます。
値：「#00f」または「#0000ff」
CSSの「書き方」にあてはめると
.entry-title {
background: #0000ff;
}WordPressのスタイルシートにCSSコードを入力します。
カスタマイズ結果
CSSに文字色「白」のコードを追加します。
.entry-title {
background: #0000ff;
color: #fff;
}WordPressのスタイルシートにCSSコードを入力します。
カスタマイズ結果
タイトルを「黒文字→白文字」、「ベースなし→青ベース」に
カスタマイズできました。（左上赤四角）
右側、検証ツールに入力したCSSコードが追加されます。（右下赤丸）
例②；サイドバーの見出しを中央寄せ、黄色ベース
サイドバー見出しのセレクタを「検証ツール」で検索します。
青矢印「サイドバーの見出し」
赤丸囲み「サイドバー見出しのCSS編集」
・background（背景の色）やpadding（余白）の編集をしていることがわかるので、このセレクタを使えばサイドバー見出しの編集ができることがわかります。
緑矢印：サイドバー見出しのセレクタ「.sidebar h3」
「文章、中央寄せ」のプロパティをネットなどで検索します。
プロパティ：「text-align」
値：「center」
「値」はほかにも「start」「end」「left」「right」「justify」などの種類があります。
「黄色ベース」のプロパティは、例①で使用した「background」
値は「#ffff00」が黄色になります。
「セレクタ」「プロパティ」「値」が揃ったのでCSSコードの書き方にあてはめます。
.sidebar h3 {
text-align: center;
background: #ffff00;
}WordPressのスタイルシートにCSSコードを入力します。
カスタマイズ結果
サイドバー見出しを「見出し文言：左寄せ→中央寄せ」、
「ベース色：薄い灰色→黄色」にできました。（青矢印）
右側、検証ツールに入力したCSSコードが追加されています。（赤丸）
大事なのは「試してみる」ことだと思いますので、色々と試して、覚えて、オリジナルのデザインを作ってみてください。
コメント