WordPress超初心者のためのHTMLとCSSの基礎知識

WordPressはHTMLやCSSの詳しい知識がなくともインストールさえしてしまえばブログが運営できてしまいます。しかし少しオリジナリティーを出したくなった時、HTMLとCSSの知識がなくてはカスタマイズはできません。

わたしはWordPressの初心者の方からカスタマイズの問い合わせをいただきますが、その方の多くはそもそもHTMLやCSSを理解されていない方が大半です。そんなHTMLやCSSが何が何だかわからない超超初心者向けにカスタマイズの記事を書いていきたいと思います。

今回はホントに初心者の方へHTMLとCSSの概要と記述方法をざっくりと説明していきます。

HTMLとCSS

WordPressを理解するにはまずHTMLとCSSが何たるかを知っている必要があります。HTML、CSSを理解することができればWordPressを理解するのが容易になるでしょう。

HTMLとは

ブラウザ上で右クリックし[ソースを表示（ブラウザによって異なる）]を開いてみてください。文字列が並びますがこれがHTMLのソースになります。HTMLはWEBサイトのページの文書構造、つまり段落や見出しなどを明確に分けて文書の意味を正確に分類したり整理したり記述します。

この記事の上の[HTMLとCSS]は見出しで今読んでいただいているこの文は文章・段落です。このように「ここは見出しですよ」「ここは文章・段落ですよ」と文書構造を記述してWebページを作成していくものがHTMLなのです。

CSSとは

cssは一般的にスタイルシートと呼ばれているHTMLの表示形式を記述していくものになります。表示形式とは、見た目の部分で文字の色や大きさ、背景色やレイアウトの位置など本文とは関係ないけれど見やすくするための装飾部分を制御するものになります。

WordPressとは

WordPress は、HTMLとCSS、PHP、JavaScriptなどで構成されたWebアプリケーションです。端折りすぎてちょっと違うかもしれませんがイメージ的にはこんな感じです。

WordPressを理解するのにHTMLやCSSを理解して、PHPを勉強して…。などと難しいことは考えなくても大丈夫です。それぞれのプログラム言語の記述のルールを憶える程度でも、グッとWordPressのカスタマイズの幅が広がります。

JavaScriptは動きのある画面を構成したり、計算や情報検索などをWeb上で行うプログラム言語のことで、PHPはサーバー側で動作します。

CSSの記述方法

CSSは以下のように記述します。

セレクタ（←スタイルを適用する対象）{
	プロパティ1（属性）: 値1;←セミコロン（；）は忘れずに
	プロパティ2（属性）: 値2;
	プロパティ3（属性）: 値3;
}

セレクタというのはスタイルを適用する対象を示し、属性というのは後述するidセレクタやclassセレクタがそれにあたります。

例えばh2タグのスタイルを指定するときは以下のように記述します。

h2 {
	font-size: 24px;
	color:#FF0000;
	margin-bottom: 20px;
}

またスタイルの内容が同じだったらいセレクタを,[コンマ]で複数設置することもできます。

h2, h3, h4 {
	font-size: 24px;
	color:#FF0000;
	margin-bottom: 20px;
}

コメントアウト

コメントアウトとはCSSファイル内で自分自身がわかりやすいようにちょっとしたメモを入力したりする際に使用します。以下でご紹介しているのはCSSのコメントアウトです。HTML、PHP等はまた別の書き方になりますのでご注意ください。

/* 
ここがコメントアウト
*/

スタイルシートの適用方法

cssの適用方法で最低限憶えておきたいものは以下の3つです。

• 外部CSSファイルとして記述する
• ＜head＞内に記述する
• HTMLのタグに直接スタイルを記述する

では、一つずつ説明していきます。

外部CSSファイルとして記述する

外部CSSファイルというのはWordPressのテーマではstyle.cssというファイルが用意されています。そのファイルにスタイルを書き込んでいきます。テーマにあるheader.phpの＜head＞内に外部CSSファイルを呼び出すコードが記述されているためstyle.cssをWordPressに適応させているんです。※テーマによっては若干異なる場合あり。

WordPressの既存のテーマをカスタマイズするような場合は特に自分で設置するようなことをしなくてもstyle.cssを修正していくといいでしょう。

＜head＞内に記述する

WordPressではheader.phpのhead内に以下の例のように記述するとスタイルを適応することができます。WordPressの場合前ページにこのように記述されてしまいますので特に必要性がなければstyle.cssに書き込む方法がいいでしょう。

<style type="text/css">
h2 {
font-size: 24px;
color:#FF0000;
margin-bottom: 20px;
}
</style>

style type=”text/css”は外部CSSに記述する場合は不要です。

HTMLのタグに直接スタイルを記述する

WordPressでは記事を書くときに使う場面が多いかもしれません。いつも黒にしているh2の見出しを一カ所だけ文字色を赤にしたいという場合などに使ったりします。

<h2 style="color:red">これはH2タイトル</h2>

セレクタの種類

セレクタとはスタイルを適用する対象のことを言います。セレクタの種類は多数存在しますが最低でも頭に入れておきたいものは以下になります。

• 基本セレクタ（タグ）
• idセレクタ
• classセレクタ

基本セレクタ（タグ）

セレクタとしてタグを指定しスタイルを適用させます。タグとはh2やh3、pやimgなどのHTMLで文書構造を作っているしるしの事です。タグは種類は多数存在しますが<●●>で始まり＜/●●＞で終わるものがほとんどです（hrなど例外あり）

例：HTML部分

<h2>雨ニモマケズ</h2>

CSS部分

h2{
	font-size:24px;
}

id（アイディ）セレクタ

cssの書き方を説明した際に属性というものがありました。idセレクタは特定のid属性を持ったタグに対してスタイルを適用させるものです。

例：HTML部分

<h3 id="midashi1">風ニモマケズ</h3>

CSS部分

#midashi1{
	color:red;
}

class（クラス）セレクタ

idとほとんど同じで、classセレクタは特定のclass属性を持ったタグに対してスタイルを適用させるものです。

例：HTML部分

<h3 class="midashi2">雪ニモ夏ノ暑サニモマケヌ</h3>

CSS部分

.midashi2{
	color:blue;
}
	

イメージ図

CSSはこんな感じ

h2{
	font-size:24px;
}

h3{
	font-size:20px;
}

#midashi1{
	color:red;
}

.midashi2{
	color:blue;
}

まとめ

WordPressを勉強するのにWordPressの初心者向けの本を買う以前にHTMLとCSSに関する本を読んでみることをおすすめします。WordPressの情報はネット上に溢れているので、検索するとわからないことの大半が解決できますが、HTMLとCSSは書籍などで勉強する方がはるかに効率がいいですよ。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

SBクリエイティブ

• Amazon
• 楽天市場
• Yahooショッピング