CSSの基礎を押さえてブログデザインを自在にカスタマイズ!

こんにちは、NEOです。記事をご覧いただきましてありがとうございます。

 

ユーザーに満足してもらえるブログを作るためには、質の高い記事を書くことはもちろん、居心地の良い環境を提供することも大切です。

 

ここで言う居心地の良い環境とは、ブログデザインの綺麗さ、オリジナリティ、世界観のことです。

 

ブログを訪問してくれたユーザーに、

 

「デザインや色使いが素敵だな」

「他のブログとは違うな」

「ブログからにじみ出る雰囲気が好き」

 

と思ってもらえるようなデザインにするということです。

 

こうしてユーザーに満足してもらうことができれば、満足度の高さが滞在時間の長さといった部分に表れるので、Googleからも高く評価してもらうことができます。

 

ですので、今回は、ブログデザインを自在にカスタマイズするために押さえるべきCSSの基礎についてお話しします。

 

※こちらの記事では、HTMLとCSSの概要についてお話ししているので、まだご覧になっていないあなたは、こちらからご覧ください。

 

HTMLとCSSの概要について。構造とデザインを担当。

 

Sponsored Link

 

CSSとは

CSS(シーエスエス)とは、Cascading Style Sheetsの略であり、HTMLと組み合わせてホームページのスタイルを指定するための言語です。

 

HTMLがホームページの文書構造を定義するのに対して、CSSではそれらをどのようにデザインするかを指定します。

 

  • HTML・・文書構造を定義する
  • CSS・・デザインを指定する

 

例えば、ブログを車のイラストに例えると、HTMLのみの場合は、まさに車の構造だけを定義した状態で、

 

HTMLのみ

CSSの基礎を押さえてブログデザインを自在にカスタマイズ!

HTML+CSSの場合は、部品の大きさ、形、色といったスタイルを指定した状態です。

 

HTML+CSS

CSSの基礎を押さえてブログデザインを自在にカスタマイズ!

CSSの記述方法

スタイルの指定は、HTMLタグに対してプロパティと値のセットで行います。

 

プロパティ: 値;
color: blue;

 

例えば、h1タグに対して「文字色(プロパティ)を青色(値)に」と指定する方法(要素型セレクタ)は、以下の通りです。

 

HTMLタグ{
 プロパティ: 値;
 プロパティ: 値;
 ・・・・
}
h1{
 color: blue;
}

 

※1つのHTMLタグに対して、複数のスタイルを指定することができます。

 

とてもシンプルですよね。基本はこれだけです。

 

それに、WordPressでは、一からCSSファイルを作るのではなく、テーマ(テンプレート)のCSSを変更していくので、基礎を押さえておけば大丈夫です。

 

Sponsored Link

 

押さえておきたいプロパティ

続けて、具体的に押さえておきたいプロパティをご紹介します。

 

値の指定方法は複数あるので、一例として捉えてください。

 

font-size

フォントのサイズを指定する

 font-size: 12px;

 

font-weight

フォントの太さを指定する

 font-weight: bold;

 

color

文字の色を指定する

 color: blue;

 

text-decoration

テキストの下線・上線・打ち消し線・点滅を指定する

 text-decoration: underline;

 

background-color

背景色を指定する

 background-color: blue;

 

border

ボーダーのスタイル、太さ、色を指定する

 border: solid 5px blue;

 

width/height

幅(高さ)を指定する

 width: 100px;
 height: 100px;

 

top/bottom/left/right

上(下、左、右)からの配置位置を指定する

 top: 10px;
 left: 10px;

 

margin/padding

マージン(パディング)に関する指定をまとめて行う

 

※マージン・・外側の余白、パディング・・内側の余白

 margin: 10px 20px 30px 40px;
 padding: 10px 20px 30px 40px;

 

まとめ

今回は、ブログデザインを自在にカスタマイズするために押さえるべきCSSの基礎について見てきました。

 

CSSファイルを一から作るのは大変ですが、WordPressでは、テーマのCSSを変更していくので、基礎を押さえておけばOKです。

 

CSSのclassセレクタ(クラスセレクタ)とは

CSSのidセレクタとは。classセレクタとの違いは?

 

 

この記事が少しでもあなたのお役に立てれば幸いです。

 

ご不明な点などございましたら、いつでもお問い合わせくださいね。

あなたにおすすめの記事

Sponsored Link

 

コメントを残す

ページトップへ