【初心者向け】CSSを使って自由にブログデザインをカスタマイズする手順を解説

ブログデザインをもっと自分らしくカスタマイズしたいと感じたことはありませんか？

自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要です。Webデザインの基本であるHTMLとCSSを理解し、少しの工夫であなたのブログに個性をプラスできます。

本記事では、CSSの基本から具体的なカスタマイズ方法まで解説します。初心者の方でも安心して始められる手順をご紹介しているので、ぜひ参考にしてみてください。

この記事の内容を理解すると、今までただコピペしていただけの方でもCSSの意味が分かり、自分でコードを書くきっかけになるはずです。ちょっと読んでみようかな、と思ったら脱・初心者。

HTMLとCSSの違いについて

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

HTML／骨組みを造る

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

役割：「Webページの骨組み」を作る

家で例えるなら基礎、柱、梁の部分。

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

CSS／装飾等のスタイルを設定

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

役割：「WebページのHTMLを装飾し、見た目を整える」

色塗りといった装飾の位置づけですが、アニメーションで動きを加えたりCSSでできることは多岐にわたります。CSSだけではWebページを作ることはできずHTMLと組み合わせて使います。

HTMLに沿ってCSSでスタイルを作っていきます。

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

CSSの書き方／基本

ブログのテーマフォルダ内にあるCSSファイルを編集します。一般的なファイル名はstyle.cssでスタイルシートと呼ばれます。

コードの書き方

CSSは、セレクタ、プロパティ、値の3つの要素で構成されています。

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

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

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

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

セレクタ

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

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

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

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

プロパティ

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

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

値

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

• 各プロパティに対応する単位の数字、px、％等を使い指定します

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

CSSを使ってブログデザインをカスタマイズする手順

次に、CSSを使ってブログデザインをカスタマイズする手順を紹介します。

以下は私が実際におこなっている方法です。

1. セレクタを調べる
   • カスタマイズしたい箇所を特定するために、ブラウザのデベロッパーツールを使ってHTML構造とセレクタを確認します。
2. CSSプロパティを調べる
   • 自分がイメージするデザインに必要なCSSプロパティを調べます。
3. シミュレーション
   • CSSの変更をリアルタイムで確認。
     • この手順は省略してもOKですが覚えておくと便利です。
4. スタイルシートにCSSを入力する
5. 確認

例えば目次のデザインを変えたいなという場合。

セレクタを調べる

デザインをカスタマイズする際、特定の要素にどのCSSセレクタが適用されているかを調べることはとても大事。Chromeデベロッパーツールを使用するとこの情報を簡単に調べられます。

Chromeデベロッパーツールを使ってセレクタを調べる方法については、特に大切なため記事を分けて記載しました。こちらの記事をご覧ください。

CSSプロパティを調べる

プロパティは適用するスタイルの種類でたくさんありますが、簡単なカスタマイズで使うのは定番の項目だけでも十分。すべて覚えなくても今の時代、ネットで検索すればたくさん情報があるので大丈夫です。

よく使うCSSプロパティ

デザインのカスタマイズでよく使われるCSSプロパティはいくつかあります。以下に、よく使われるものをピックアップして紹介します。

1. レイアウト関連

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

2. フォントとテキスト

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

3. 背景

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

4. ボーダー（境界線）

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

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

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

6.アニメーション

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

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

7. その他

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

positionを使うと要素を任意の場所に配置できたり、flexは要素の並び方を柔軟に指定できたり、animationでは要素を動かすことができます。CSSでできることはたくさん！

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

CSSの変更をリアルタイムで確認／シミュレーション

直接スタイルシートに記述しても良いのですが、本番環境なのでコード記述ミスがあった場合にレイアウトが崩れてしまっては困ります。そんなときにデベロッパーツールが活躍。

「Styles（スタイル）」パネルでスタイルを変更すると、ページのデザインがリアルタイムで反映されます。これにより、どのスタイルがどのように影響するかを即座に確認できます。

ここでやってみたいカスマイズを試してみるととても便利ですよ。プロパティは何文字か入力すると表示されるドロップダウンメニューの中から選択できます。

スタイルシートにCSSコードを入力する

適用させる場合はCSSをスタイルシートに入力して確定します。

こちらの記事にまとめましたのでご覧ください。

CSSを使って目次をSWELL風デザインにカスタマイズ例

ちなみに当ページの目次は、有料テーマSWELL風のデザインにしています。

薄いストライプ背景の、このデザインのボックスを使用

1. ボックスデザインの記事からデザインサンプルを選ぶ
2. CSSをコピペして、”box-no”から目次のクラス”toc”にセレクタを変更することで簡単に応用できます。

/*****SWELL目次風*****/
.toc{
       border:none;/*目次枠線リセット*/
}

.toc{
	--border-color-1:#fafafa; /*ストライプの色*/
	--border-color-2:#ddd;/*上下枠線の色*/
	margin: 2em auto;
	padding:2em;/*内側余白*/
	background:linear-gradient(-45deg,transparent 25%,var(--border-color-1) 25%,var(--border-color-1) 50%,transparent 50%,transparent 75%,var(--border-color-1) 75%,var(--border-color-1));
	background-size: 4px 4px;
	border-bottom: 4px double var(--border-color-2);
	border-top: 4px double var(--border-color-2);
	background-clip: padding-box;
}

ネット上で公開されているコピペカスタマイズも、自分のサイトに合わせたセレクタに変更するだけでこのように応用できるものがたくさんあります。

まとめ／誰でもCSSを使ったカスタマイズができる

以上についてまとめました。

今回の記事で一番お伝えしたいのは、

ということです。

1. デベロッパーツールを活用することで、サイトの特定要素に適用されているCSSセレクタを簡単に調べることができます。
2. 要素を選択し、スタイルを確認・変更することで、デザインをリアルタイムでカスタマイズできます。
3. プロパティについては基本的な書き方（半角を使うことや {} や ; を忘れない、単位など）を守れば、その都度調べていくだけでCSSは完成します。

特に私は①「デベロッパーツールでのセレクタ（クラスやID）の調べ方」を知ったときにカスタマイズの幅が広がったので、オシャレな有料テーマを買わなくてよさそうとまで思えるように。

皆様にもお伝えできればいいなと思い記事にまとめました。お役に立てると幸いです。

この記事は以上です。