【WordPress】CSSの編集箇所について

今回はWordPressでのCSSの編集方法について解説します。

1.CSSとは？

CSS（カスケーディング・スタイル・シート）は、ウェブページのデザインやレイアウトを指定するための言語です。
HTMLがウェブページの構造を定義するのに対し、CSSはその構造にスタイルを適用します。

2.HTMLとCSSの関係

• HTML（HyperText Markup Language）:
  　ウェブページの骨組みや内容を記述します。見出しや段落、画像、リンクなどを定義します。
  
• CSS（Cascading Style Sheets）:
  　HTMLで定義された要素にスタイルを適用します。
  　色、フォント、配置、サイズなどを指定します。

この2つを組み合わせることで、見た目も機能も充実したウェブページを作成できます。

3.CSSの基本構造

CSSはセレクタとプロパティから構成されています。基本的な構文は以下の通りです。

• セレクタ: スタイルを適用するHTML要素を指定します。
• プロパティ: 変更したいスタイルの種類を指定します。
• 値: プロパティに設定する具体的な値を指定します。

セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}

＜具体例＞

/* 段落（p）の文字色を青、フォントサイズを16pxに変更 */
p {
    color: blue;
    font-size: 16px;
}

4.よく使われるCSSセレクタ

セレクタは、どのHTML要素にスタイルを適用するかを指定します。以下は基本的なセレクタの例です。

要素セレクタ

特定のHTML要素全体にスタイルを適用します。

▼CSSのコーディング例

h1 {
 color: red; 
}

クラスセレクタ

特定のクラスが付与された要素にスタイルを適用します。
クラスは任意の名前を付けることができます。

例）
HTMLで”highlight”と指定されたクラスに対して、CSSでデザインの指定をします。

▼HTMLのコーディング例

<p class="highlight">この段落は黄色の背景になります。</p>

▼CSSのコーディング例

.highlight {
    background-color: yellow;
}

IDセレクタ

特定のIDが付与された要素にスタイルを適用します。
IDはページ内で一意でなければなりません。

例）
HTMLで見出しh1に対し”main-title”というIDを定義します。
CSSでは”main-title”に対しデザインの指定をします。

これにより、”main-title”と指定された見出しh1のみデザインが反映され、そのほかの見出しh1にはデザインが反映されません。

▼HTMLのコーディング例

<h1 id="main-title">メインタイトル</h1>

▼CSSのコーディング例

#main-title {
    font-size: 24px;
    text-align: center;
}

子セレクタ

親要素の直下にある子要素にスタイルを適用します。

例）
箇条書きリストの”・”を”四角”に変更します。

ul > li {
    list-style-type: square;
}

5.（ご参考）主なCSSプロパティ

CSSには多数のプロパティがあり、ウェブページの様々な部分をカスタマイズできます。
ここでは、よく使われる基本的なプロパティを紹介します。

プロパティの種類	プロパティ名	説明
色に関するプロパティ	color	文字の色を指定します。
	background-color	背景色を指定します。
テキストに関するプロパティ	font-size	フォントサイズを指定します。
	font-family	フォントの種類を指定します。
	text-align	テキストの位置を指定します。（例：left, center, right）
レイアウトに関するプロパティ	margin	要素の外側の余白を指定します。
	padding	要素の内側の余白を指定します。
	width	要素の幅を指定します。
	height	要素の高さを指定します。
ボーダーに関するプロパティ	border	ボーダーのスタイル、幅、色を一括で指定します。
	border-radius	ボーダーの角を丸くします。
表示に関するプロパティ	display	要素の表示方法を指定します。（例：block, inline, flex）
	position	要素の配置方法を指定します。（例：static, relative, absolute, fixed）

6.CSSの編集方法

WordPressでCSS編集する方法はいくつかあります。
編集する場所によって、CSSが反映される範囲が異なりますので、それぞれ説明します。

1.サイト全体にCSSデザインを反映したい

サイト全体にCSSデザインを反映する方法は２つあります。

1.WordPressの外観＞カスタマイズ＞追加CSSで編集
2.style.cssファイルを直接編集

それぞれの編集の仕方について見ていきましょう。

＜おすすめ＞ WordPressカスタマイザーの「追加CSS」

手軽にCSSを編集できる方法です。
WordPressの管理画面から直接カスタマイズできます。

エディターの幅が狭く少し見づらいので、CSSを大量に追加する場合などは次の方法がおすすめです。

Style.cssシートを直接編集する

管理画面からも直接CSSのファイルを編集できますが、ファイルの直接編集はファイル破損等のリスクがあります。

こちらの方法でCSSを追加する場合は、必ずファイルの内容をメモ機能等を使ってバックアップして、慎重に操作しましょう。

2.特定のページのみCSSデザインを反映したい

以下の方法で、特定のページのみのCSSデザイン変更ができます。

7.CSSの優先順位

今まで説明した通り、CSSを追加できる箇所はいくつかあります。
また、テーマやスキンに元々含まれているCSSもあります。

CocoonのCSSが反映される優先順位は下記の通りです。（優先度が高い順に並んでいます。）

⑤親テーマ・子テーマのスキンや⑥親テーマのCSSは、優先度も低いので特に触らない方が無難です。

まとめ

WordPressでのCSS編集方法について解説しました。

編集箇所によって反映される範囲が異なるので、その違いも色々試してみると面白いかもしれません。

ボタンや見出しなど、ネットで調べるとCSSコードを公開されているサイトもあるので、まずは手を動かしながら試してみるといいと思います。

一緒に素敵なWebサイトを作っていきましょう！

↓このブログはConoHa WINGを利用しています↓