【初心者向け】WordPressにHTMLやCSSの知識は必要なのか？

本ページはプロモーションが含まれています

WordPressはHTMLやCSSの知識がなくてもブログやホームページを作ることができるといわれています。

今回は本当にWordPressではHTMLやCSSの知識が必要ないかを説明したいと思います。

HTMLやCSSの知識は必要かどうか

結論からいうと最低限の知識は必要です。

WordPressでは「Gutenberg（グーテンベルク）」というエディタがあり、直感的に文章や画像などを入れた記事を作ることができます。正直、この機能だけを使用してブログの記事を書いていけばHTMLとCSSの知識は必要ないかもしれません。

しかし、より自分好みのデザインに変更したり、コードをきちんと書いてSEO対策を施したりする場合にはどうしてもHTMLとCSSの最低限の知識は必要になります。

必要となるHTMLコードは「h1」や「h2」などの見出し、「p」の段落、「br」の改行、「ul」や「li」などのリスト、「dl」や「dt」「dd」を使用する定義リスト、「table」「tr」「th」「td」などを使用する表は覚えておくと便利です。

CSSもテキストの色の変え方や枠線の表示の仕方などを覚えているとブログのデザインの幅が広がります。

知っていると便利なHTML

ここからはWordPressを運用する場合、最低限知っていると便利なHTMLタグを紹介します。

見出し

「h1」から「h6」までのタグは見出しとして使用するタグになります。数字が小さいほど大きな見出しを意味します。

 html
<h1>ブログの記事のタイトル</h1>
<h2>記事の大見出し</h2>
<h3>記事の中見出し</h3>
<h4>記事の小見出し</h4>
<h5>h4よりさらに小さな見出し</h5>
<h6>h5よりさらに小さな見出し</h6>

h1タグは基本的には1つの記事に1回しか使いません。h1タグはWordPressの場合はタイトルに使用されていますので使用するのはh2からとなります。

文字の大きさで判断せずに見出しの内容に沿って「h2」→「h3」→「h4」の順番に使用するようにしましょう。

段落

「p」タグは段落を表すタグです。

 html
<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

pタグは段落を表すタグなので改行を目的に使用するのはやめましょう。

改行

「br」タグは改行をするために使用するタグです。

 html
親譲りの無鉄砲で小供の時から損ばかりしている。</br>
小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。

pタグを改行のために使用せずにbrタグを使用しましょう。

リスト

ulタグはリストを表示する際に使用するタグです。

 html
<ul>
	<li>吾輩は猫である</li>
	<li>坊つちやん</li>
	<li>三四郎</li>
	<li>それから</li>
	<li>こゝろ</li>
	<li>明暗</li>
</ul>

ulタグのほかにolタグを使用する場合もあります。ulタグは順序が関係なく、olタグは順序も関係したリストを作る際に使用します。

 html
<ol>
	<li>Sunday</li>
	<li>Monday</li>
	<li>Tuesday</li>
	<li>Wednesday</li>
	<li>Thursday</li>
	<li>Friday</li>
	<li>Saturday</li>
</ol>

定義

dlタグ、dtタグ、ddタグは定義リストを作る際に使用します。

 html
<dl>
	<dt>節約</dt>
		<dd>お金や物を必要以上にに使わないこと。</dd>
	<dt>ケチ</dt>
		<dd>お金や物を惜しんで出さないこと。</dd>
</dl>

表

tableタグ、trタグ、thタグ、tdタグなどは表を作る際に使用します。表には他にも使用できるタグがありますが、最低限この4つのタグを覚えていれば大丈夫です。

 html
<table>
	<tr>
		<th></th>
		<th>Nintendo Switch</th>
		<th>Nintendo Switch Lite</th>
	</tr>
	<tr>
		<th>希望小売価格</th>
		<td>32,978円</td>
		<td>21,978円</td>
	</tr>
	<tr>
		<th>TVモード</th>
		<td>○</td>
		<td>✕</td>
	</tr>
	<tr>
		<th>テーブルモード</th>
		<td>○</td>
		<td>✕</td>
	</tr>
	<tr>
		<th>携帯モード</th>
		<td>○</td>
		<td>○</td>
	</tr>
</table>

知っていると便利なCSS

テキストの配置や色を変えたり、背景色を変えたり、枠線を表示したりなど簡単で使い勝手の良いCSSは覚えておいて損はありません。

今回はHTMLのソースに直接書くstyleタグで案内させていただきます。

テキストの配置を変える

テキストの配置を変えるのは「text-align」プロパティを使用します。

style="text-align: 配置位置;"

 html
<p style="text-align: left">テキストを左に配置</p>
<p style="text-align: center">テキストを中央に配置</p>
<p style="text-align: right">テキストを右に配置</p>

テキストの色を変える

テキストの色を変えるには「color」プロパティを使用します。

style="color: 色コード;"

 html
<p>虹の色は、<span style="color: red;">赤</span>・<span style="color: orange;">橙</span>・<span style="color: yellow;">黄</span>・<span style="color: green;">緑</span>・<span style="color: blue;">青</span>・<span style="color: indigo;">藍</span>・<span style="color: purple;">紫</span>の7色です。</p>

色はカラー名のほか、16進数などで指定することができます。

色	カラーコード	16進数
白	white	#ffffff
黄色	yellow	#ffff00
橙	orange	#ffa500
黄緑	yellowgreen	#9acd32
緑	green	#008000
水色	lightblue	#add8e6
紫	purple	#800080
桃	pink	#ffc0cb
赤	red	#ff0000
薄橙	beige	#f5f5dc
茶色	brown	#a52a2a
黒	black	#000000
青	blue	#0000ff

背景色を変える

テキストの色を変えるには「background」プロパティを使用します。

style="background: 色コード;"

<table>
	<tr>
		<td style="background: red;">&</td>
		<td style="background: orange;">&nbsp;</td>
		<td style="background: yellow;">&nbsp;</td>
		<td style="background: green;">&nbsp;</td>
		<td style="background: blue;">&nbsp;</td>
		<td style="background: indigo;">&nbsp;</td>
		<td style="background: purple;">&nbsp;</td>
	</tr>
</table>

枠線を描く

枠線を描くには「border」プロパティを使用します。

style="border: 線の太さ 線の種類 色コード;"

<div style="text-align: center;">
	<p style="border: 1px solid gray">実線</p>
	<p style="border: 3px double gray">二重線</p>
	<p style="border: 1px dashed gray">破線</p>
	<p style="border: 1px dotted gray">点線</p>
</div>

最後に

WordPressにはHTMLやCSSを利用しなくても使用するテーマによってはある程度のデザインを作ることもできます。

さらに自由なデザインや見た目を求めると最低限のHTMLとCSSが使えることが求められます。

覚えなければいけないHTMLやCSSは基本的なもので大丈夫でそれほど難しくありません。苦手意識を持たずに取り組んでいきましょう。

よく読まれている記事

チェック

【初心者必見】アフィリエイトで稼ぐブログの仕組み

アフィリエイトに興味を持つ人が増えていますが、実際にどのように始めたらいいのか、どのような仕組みで稼げるようになるのか分からなくないですか？ そこで今回は、アフィリエイトで稼ぐために必要な知識を学べる ...

チェック

【初心者向け】ロリポップでWordPressを始める方法をご紹介

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...

チェック

【初心者向け】エックスサーバーでWordPressを始める方法をご紹介［WordPressクイックスタート編］

副業のためのアフィリエイトブログ、自分のコレクションを紹介する趣味ブログなど本気でブログを開設するためにはWordPressは必須です。ブログ以外でもWordPressは企業サイトなどにも数多く利用さ ...

チェック

【初心者向け】ブログで副業を始める方法

長引く不況で給料が上がらない、定収入をどうにかしたい、お小遣いを増やしたいなど副業を始める理由はいろいろとあると思います。 でも実際にどうやってブログで稼ぐのか分からない人が大半です。 今回はブログを ...