CSSの書き方とカスタマイズ方法｜ブログデザインを自分で変更する基本手順【初心者向け】

ブログを書いていると、こんな悩みが出てきます。

• デザインがなんとなく素人っぽい
• 見出しやボタンをもう少しおしゃれにしたい
• でも、どこを触ればいいのか分からない

そこで必要になるのが「CSS」です。

難しそうに見えますが、仕組みはシンプルです。

• どこを変えるか（セレクタ）
• どう変えるか（プロパティ）

この2つが分かれば、色を変える・余白を広げる・枠線をつけるといったカスタマイズは今日からできます。

この記事では、

までを、初心者向けに分かりやすく解説します。

順番に読めば、CSSの全体像も自然と理解できる構成にしています。「なんとなくコピペ」から自分の手でデザインを変えられるようになります。

CSSでブログデザインを変更する基本手順

まず、実際にCSSでデザインを変更する流れを見ていきます。

手順はこの5ステップ。

1. セレクタを調べる（どこを変えるか決める）
2. プロパティを決める（どう変えるか決める）
3. デベロッパーツールで試す（仮確認）
4. スタイルシートに反映する（本番保存）
5. 表示確認（最終チェック）

一度この流れを覚えれば、どんなカスタマイズにも応用できます。

セレクタを調べる

まずは対象を特定することが最優先です。

Chromeでページを開き、右クリック → 「検証」 をクリックするとデベロッパーツールが開きます。

変更したい部分を選択すると、その要素のクラス名やHTML構造が確認できます。

例：記事内の見出し

.article h2

このような形で「どの要素に適用するか」を特定します。

セレクタの特定がうまくいかないとCSSは反映されません。

詳しくはこちらの手順をご覧ください。

使いたいCSSプロパティを確認する

次に「どう変えるか」を決めます。

• color（文字色）
• background-color（背景色）
• padding（内側余白）
• margin（外側余白）
• border / outline（枠線）

「CSS 枠線」などで検索すると、使い方がすぐ見つかります。

デベロッパーツールでリアルタイム確認

いきなり本番のスタイルシートに書くのは少し不安ですよね。

デベロッパーツールの「Styles」パネルでCSSを書き足すと、ページにリアルタイムで反映されます。ここで自由に試してみましょう。

• プロパティは何文字か入力すると表示されるドロップダウンメニューの中から選択できます。
• 再読み込みすると元に戻るので安心です。
• 適用させる場合はスタイルシートに入力して確定しましょう。

スタイルシートに反映する

デザインが決まったら、テーマのカスタマイズ画面や追加CSS欄にコードを入力して保存します。

これで正式に反映されます。

実例｜CSSで見出しをカスタマイズする方法

例えば、見出し（h2）を少しおしゃれにしたい場合。

以下のようにCSSを追加します。

※セレクタ（h2）はテーマに合わせます（Cocoonでは.article h2）

h2 {
  padding: .8em 1em; /* 内側余白 */
  background-color: #a5c9c1; /* 背景色 */
  color: #fff; /* 文字色 */
  outline: 1px dashed currentColor; /* 文字色と同色の点線アウトライン */
  outline-offset: -5px; /* アウトラインを内側に5pxずらす */
}

背景色 + ステッチ風の見出し

これだけで、

• 背景色がつき
• 文字色が変わり
• ステッチ風の枠線が付きます

見出しデザインについては下記ページに掲載しているので参考にしてください。

特定のブロックだけデザインを変えたい場合は、WordPressの「追加CSSクラス」を使うと便利です。追加CSSクラスの使い方はこちらの記事で解説しています。

CSSは「少し足すだけ」で印象が大きく変わります。

では、なぜこの数行のコードで見た目が変わるのでしょうか？

ここからは、「なんとなく書く」から一歩進んで仕組みを理解してみましょう。

HTMLとCSSの違いを理解しよう

まず基本となるHTMLとCSSの違いについて。HTMLとCSSは共にWebページ作成の基本となる言語ですが役割の違いがあります。

HTML｜骨組みを作る

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的な言語です。（マークアップ言語と呼ばれます）

HTMLは、見出しや段落、リスト、画像、リンクなど、ページ内の要素を配置してブラウザに正しく表示させるための言語で、基本的な要素はタグと呼ばれます。タグで囲んで使用し、まとまりを表す<div>や見出しに使う<h2>など、ブログを書いている人ならお馴染みのタグもすべてHTMLを使っています。

CSS｜デザインや装飾を設定する

CSS（Cascading Style Sheets）は、HTMLで作成した骨組みにスタイルや色、配置などを加えて「見た目」を設定する言語です。

色塗りといった装飾の位置づけですが、アニメーションで動きを加えたり、ちょっとした分岐ができたり、CSSでできることはとても多くあります。

CSSは「見た目担当」。HTMLという土台がないと働けません。

他に、JavaScript（ジャバ スクリプト）といったWebページに機能や動きを追加できるプログラミング言語があります。

CSSの基本ルールを学ぶ

まずは、CSSの基本構造を理解しておきましょう。

ここを理解するだけで、

• コードの意味が分かる
• カスタマイズ時に迷わなくなる
• コピペ依存から抜け出せる

ようになります。

コードの基本構成（セレクタ・プロパティ・値）

CSSは、セレクタ、プロパティ、値の３つの要素で構成されています。先ほど実践で使ったコードもこの3つでできています。

以下のような基本構文で記述します。

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

p {
  color:red; /* 文字色は赤 */
}

• コード部分はすべて半角英数字で記述します
• 複数のプロパティは;（半角セミコロン）で区切ります
• メモ書きを入れるときは /* */ 内に記述します（コメントアウトと言います）
• 一般的に、見やすいように改行を入れてインデント（整列）して記述します

セレクタ

セレクタは、どのHTML要素にスタイルを適用するかを指定する部分です。例えば、pセレクタはすべての<p>要素にスタイルを適用します。

• HTMLタグ、クラス名、ID名等が使われます。

• タグセレクタ：セレクタにHTMLタグを指定するときは、タグをそのまま記述します
• クラスセレクタ：セレクタにクラスを指定するときは先頭に.（半角ピリオド）をつけます
• IDセレクタ：セレクタにidを指定するときは先頭に#（半角シャープ）をつけます

セレクタは一般的に.class（クラス）が多く使われます。

同じ要素に複数のCSSが当たった場合は、ID > class > タグ の順で優先されます。

プロパティ

プロパティは、色やサイズ、配置などの具体的なスタイルを指定する部分です。例えば、colorプロパティは文字色を設定します。

• プロパティはスタイルの種類で数多くあります
• プロパティを複数続けて記述するときは;（半角セミコロン）で区切ります

値

値は、プロパティに対して指定する具体的な内容です。例えば、color: red;の場合、値はredです。

• 各プロパティに対応する単位の数字、px、％等を使い指定します（pxは固定サイズ、%は親要素基準）

カスタマイズする際の基礎知識としてHTMLとCSSの役割の違いをざっくりと、基本的な書き方は正確に覚えるようにしましょう。（コーディングは一文字でも違うと反映されないため、正確さが必要となります）

よく使うCSSプロパティ一覧

デザインのカスタマイズでよく使われるCSSプロパティはいくつかあります。すべて覚える必要はなく、やりたいデザインを検索しながら覚えていけば大丈夫です。

以下に、役割ごとにピックアップして紹介します。

レイアウト関連

• display: 要素の表示方法を指定します。例：block, inline, flex, gridなど。
• position: 要素の配置方法を指定します。例：static, relative, absolute, fixed, sticky。
• margin: 要素の外側の余白を設定します。
• padding: 要素の内側の余白を設定します。
• widthとheight: 要素の幅と高さを指定します。

フォントとテキスト

• font-size: フォントサイズを設定します。
• font-family: フォントファミリーを指定します。
• font-weight: フォントの太さを指定します。例：normal, bold, bolder, lighter、数値指定（100-900）
• color: テキストの色を指定します。
• text-align: テキストの揃え方を指定します。例：left, right, center, justify。

背景

• background-color: 要素の背景色を指定します。
• background-image: 背景画像を指定します。
• background-size: 背景画像のサイズを指定します。例：cover, contain、具体的なサイズ。

ボーダー（境界線）

• border: 要素の境界線を設定します。
  • border-color：枠線の色を指定する
  • border-style：枠線の種類を指定する
  • border-width：枠線の太さを指定する
• border-radius: 要素の角を丸くします。

ボックスシャドウとテキストシャドウ

• box-shadow: 要素に影をつけます。
• text-shadow: テキストに影をつけます。

アニメーション

• animation: ボールを動かす等のような柔軟なアニメーション効果を加えます。
• transition: プロパティの変化にシンプルなアニメーション効果を加えます。

CSSアニメーションについてはこちらの記事で使い方を紹介しています。

その他

• opacity: 要素の透明度を設定します。
• transform: 要素の変形を設定します。例：scale, rotate, translate。

positionを使うと要素を任意の場所に配置できたり、flexは要素の並び方を柔軟に指定できたり、animationでは要素を動かせます。

これらのプロパティを使いこなすことで、ウェブページのデザインを細かくカスタマイズし自由なデザインを作れます。

ここまでの内容

• HTML → 構造を作る
• CSS → 見た目を整える
• セレクタ → どこを装飾するか指定
• プロパティ → 何を変えるか指定
• 値 → どれくらい変えるか指定

この3点構造を理解できれば、CSSは一気に分かりやすくなります。

CSSが反映されないときのチェックポイント

「書いたのに変わらない…」という場合は、次の4つを確認してみましょう。

• セレクタが正しいか（クラス名・階層・スペル）
• 優先順位に負けていないか（ID > class > タグ）
• キャッシュが残っていないか（スーパーリロードなど）
• . や # を書き忘れていないか

特に多いのが「思い込みのセレクタ指定」です。必ずデベロッパーツールで確認しましょう。

それでも解決しない場合は、原因と対処法をまとめたこちらの記事で手順を詳しく解説しています。

まとめ｜初心者でもCSSカスタマイズはできる

今回お伝えしたいのは、たったこれだけです。

セレクタ + プロパティ

この組み合わせを理解すれば、誰でもブログデザインを変えられます。

「なんとなくコピペ」から、「意味を理解して使えるCSS」へ。

今日、1か所だけでもいいのでブログを自分の手で変えてみてください。

それがカスタマイズの第一歩です。

CSSを書く量が増えてきたら、「CSS変数（カスタムプロパティ）」を使うと管理が楽になります。色やサイズを一括管理できる便利な仕組みです。

CSS変数の使い方はこちらの記事で解説しています。