デザインやカスタマイズを依頼するなら ココナラ

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

アイキャッチ/カスタマイズの手順 カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

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

具体的には、CSSを使ってブログデザインをカスタマイズする手順について解説します。

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

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と組み合わせて使います。

当サイトのカスタマイズで主に使用するのはこのCSSです。

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

スポンサーリンク

CSSの書き方/基本

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

コードの書き方

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

  • コード部分はすべて半角英数字で記述します
  • メモ書きを入れるときは /* */ 内に記述します(コメントアウトと言います)

セレクタ

  • セレクタはCSSをどのHTML部分に適用させるか紐づけるところで、クラス名、ID名、HTMLタグ等を指定できます
  • セレクタにクラスを指定するときは先頭に.(半角ドット)をつけます
  • セレクタにidを指定するときは先頭に#(半角シャープ)をつける等の決まりがあります
セレクタの種類
  • *(すべての要素)
  • #id(ID)
  • .class(クラス)
  • A > B(子セレクタ)
  • A B(子孫セレクタ)
  • A + B(隣接セレクタ)
  • A ~ B(同じ階層のセレクタ)
  • A , B(複数のセレクタ)

プロパティ

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

  • 値は各プロパティに対応する単位の数字、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: 要素の内側の余白を設定します。
  • widthheight: 要素の幅と高さを指定します。

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-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を使ったカスタマイズができる

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

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

セレクタ + プロパティを調べれば
誰でもCSSカスタマイズはできる

ということです。

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

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

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

この記事は以上です。

Comment

タイトルとURLをコピーしました