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

この記事では、CSSを使ってブログデザインをカスタマイズする手順について解説します。

サイトのデザインを自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要です。

カスタマイズに興味はあるけどコーディングのハードルが高いと感じる方へ、少しお役に立てるといいなといった内容をご紹介します。

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

HTMLとCSSの違いについて

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

HTML／骨組みを造る

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

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

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

HTMLは、テキストや画像、リンクなどのコンテンツを構造化し、ブラウザに表示する方法を指定します。基本的な要素はタグと呼ばれます。タグで囲んで使用し、まとまりを表す<div>や見出しに使う<h2>など、ブログを書いている人ならお馴染みのタグもすべてHTMLを使っています。

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

CSS（Cascading Style Sheets）は、ウェブページの見た目やスタイルを定義するための言語です。HTMLがウェブページの骨組みであるのに対して、CSSはそのページのデザインやレイアウトを指定します。

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

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

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

CSSの書き方／基本

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

コードの書き方

body{
   font-size:15px; /*文字サイズは15px*/
   color:black; /*文字色は黒*/
}

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

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

セレクタ

• セレクタはCSSをどのHTML部分に適用させるか紐づけるところで、クラス名、ID名、HTMLタグ等を指定できます
• セレクタにクラスを指定するときは先頭に.（半角ドット）をつけます
• セレクタにidを指定するときは先頭に#（半角シャープ）をつける等の決まりがあります

プロパティ

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

値

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

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

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

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

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

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

デベロッパーツールの活用／セレクタを調べる

デザインをカスタマイズする際、特定の要素にどの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の編集は子テーマを使用します。こちらの記事にまとめましたのでご覧ください。

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）の調べ方を知ったときにカスタマイズの幅が広がったので、オシャレな有料テーマを買わなくてよさそうとまで思えるように。

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

この記事は以上です。