HTMLでWordPressページの骨組みをつくろう!

5日で学ぶHTMLで作る初めてのWorPressテーマ-HTMLで骨組みをつくろう

こんにちは!

takafumiです。

このページに来てもらっているということは、あなたは日頃からWordPressを利用されているのではないでしょうか?

WordPressを使えば簡単にブログやウェブサイトを作れるので本当に便利ですよね!

おかげで、私もこうやって記事を公開することが気軽にできています。

WordPressさまさまです。

 

でも、あなたにはWordPressを使っていて、こんな悩みはありませんか?

あなた
テーマをみると格好いいんだけど、日本語になるとダサく見えるな。

とか

あなた
WordPressだと似たり寄ったりになっててしまうから、ウェブサイトにオリジナリティをだしたいな。

といったものです。

 

WordPressで提供されているテーマは海外で作られたものが多くあります。

テーマを選ぶ際に参考にするプレビュー画像には、英語でテキストやタイトルが入っていますよね。

たしかに、英語でタイトルなどが入っていると収まりもよくスタイリッシュ見えます。

でも、そこに実際の日本語テキストがはいると「間延び」した感じになって、一気にダサくなってしまうことが、とても多いんです。

それに、使い勝手のいいテーマに人気が集中してしまうので、どのサイトも似たり寄ったりになっちゃうことが多いです。

 

一番てっとり早い解決策はズバリ。

takafumi
自分の手で一からつくる!

ということです。

 

私も、このmorningcodingのテーマを自分で一から作りました。
既存のテーマを使うことに比べたら、たしかに時間はかかってしまいます。

それでも、自分が作ったものなので後から変更を加えるときにもスムーズに作業ができます。

 

それでは、私と一緒に今日から5日間に渡って、HTMLを使ったWordPressのテーマを作っていきましょう!

5日で学ぶ。HTMLで作るはじめてのWordPressテーマ』スタートです!

 

レッスンを始めるまえに

WordPressのテーマを自分でつくる場合、下のような3つのステップを踏むことになります。これから始める、5日間チャレンジではSTEP2の「HTMLでページを作成する」部分について勉強していきます。

WordPressテーマ作成の3ステップ

 

デザインをもとに、HTMLやCSSを使ってウェブページを作っていく作業になります。

もし、

あなた
うーん。HTMLはちょっと不安だな

という場合、こちらの『3日で学ぶHTML入門』を見てくださいね。

 

さらに

あなた
いや、実はCSSもちょっと。。

という場合は、こちらの『3日で学ぶ CSSの書き方』で勉強してみましょう。

 

あなた
デザインからウェブページは作れるけど、WordPressのテーマ化させるにはどうしたらいいんだろう?

という場合は、こちらの『5日で学ぶ WordPressテーマ作成』へお進みください!

 

あなた
HTMLやCSSの基本的な書き方はわかるけど、ちゃんとしたページは作ったことないな。

というあなたは、このままお読みください。

 

HTMLでつくるページについて

このレッスンで一緒につくるウェブページは、IT関連の情報を発信する架空のブログ「update.com」というものです。

記事が一覧で表示される部分、カテゴリーなどが配置されるウィジェットを含んでいます。

トップにあるメニューやフッター部分も含んでいるため、このコースを完了すると一般的なウェブページのHTMLの書き方がわかるようになります。

 

HTMLの骨組みを作ろう

まずは、これから作成するファイルを保存する作業用フォルダをつくりましょう。

フォルダの準備をしよう

コンピュータの好きな場所に、「update.com」という名前のフォルダを作成します。

update.comフォルダを作成

 

フォルダが作成できたら、SublimeTextでupdate.comを開きましょう!

SublimeTextを初めて使う方はこちらのページを参考にしてみてくださいね。

 

index.htmlファイルを作成しよう

フォルダが開けたら、SublimeTextのサイドバーにあるupdate.comの上にマウスを移動させて右クリックから 『New File』をクリックします。

SublimeTextでファイルを作成

 

untitled」という空っぽのタブが表示されます。

なにも、入力せずにファイルを index.html という名前で保存しましょう。

 

index.htmlファイルの作成

 

HTMLの基本構造をつくろう

index.htmlファイルが完成したら、そこでウェブサイトの基本的な構造を記述していきます。

<html>や<head>などのタグを使ったものですね。

全部、一から手入力するのは面倒です。

そんな時は、SublimeTextの保管機能を使いましょう。

index.html<htmと入力すると、入力したタグに関連する候補が表示されます。

その候補をマウスで選択するかenterキーを押すと、あっというまに下のようなコードが自動的に入力されちゃいます。


<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

ページのタイトルを<title>タグを使って決めましょう。

<head>の中に、<title>タグを記述します。

トップページなので、『update.com』というタイトルにします。

保存してページをリロードすると、ブラウザのタブのタイトルが『update.com』というタイトルになりました。

あなた
ページのタイトルってなに?

という場合はこちらの記事を参考にしてくださいね。

 

CSSファイルを準備しよう

これから、各要素タグのスタイルを一括管理できるようにstyle.cssファイルを準備しましょう!

update.comの上にマウスを持ってきて、右クリックから「New Folder」を選択します。

ウィンドウの下にフォルダの名前を入力するところが、現れるので「css」と入力したら、「enter」キーを押してフォルダを作成します。

 

さらに、その「css」フォルダのなかに、「style.css」というファイルを作成してください。

cssの中にstyle.cssを作成する

 

index.htmlの<head>タグの中で、<link>タグをつかって、style.cssを読み込みましょう。


(省略)

<head>
	<title>update.com</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

(省略)

 

 

headerをつくろう

update.comというウェブサイトですが、レイアウトを分解すると次のようになります。

headerwrapperfooter の3つが大きな親要素となるタグです。

ここでは、ページ上部にある header 部分を作ってみましょう!

headerを作る

 

index.htmlの<body>タグのなかに、idにheaderをもった<div>のブロックを追加してみましょう。


(省略)

<body>

	<div id="header">
		
	</div>

</body>

(省略)

次に、style.css内に#headerを定義してみてください。

cssで幅と高さを次のように指定します!

backgound-colorを使って、一時的に背景色を設定しましょう。


/* ヘッダー部分 */
#header {
	height: 190px;
	min-width: 1300px;
	background-color: #89bfff;
}

ファイルを保存して、ページをリロードしてみましょう!

ヘッダー部分の要素が表示されましたね。

ヘッダー部分の要素をスタイルで指定

 

wrapperをつくろう

それでは、つぎに wrapper 部分を作りましょう。

wrapper部分を作成する

wrapperはコンテンツを実際に表示したり、サイドバーを配置する部分になります。

このウェブサイトのメインとなる部分なので、しっかり作っていきましょう。

headerの下に続けて、idがwrapperのdivを追加してください。


(省略)

<div id="wrapper">
	
</div>

(省略)

style.cssを開いて、wrapperのidを定義しましょう。

idを定義するときには、かならず頭に#をつけるの忘れないようにしてくださいね。

属性に背景色と幅を追加します。


(省略)

/* ラッパー部分 */
#wrapper {
	background-color: #89bfff;
	min-width: 1300px;
}

 

フッターをつくろう

footer部分を作成します。

一般的に、footerには問い合わせ情報や著作権情報など記載したり、内部リンクを貼る部分として使われます。

footer部分を作成

 

index.htmlをひらきます。

wrapperの下に、idがfooterのdivを記述してください!


(省略)

<div id="wrapper">

</div>

<div id="footer">

</div>

(省略)

style.cssを開いて、footerのidを定義します。

#footerに、高さと幅、背景色を変える属性を下のように追加します。


/* フッター部分 */
#footer {
	background-color: #89bfff;
	height: 80px;
	min-width: 1300px;
}

 

コンテンツ部分をつくろう

次にcontent部分をつくります!

contentはメイン情報を表示するcontent_mainと、カテゴリーを表示するcontent_subという2つのブロックの親となるブロックです。

WordPressのcontent部分を作る

 

contentwrapperブロックの子要素なので、htmlを記述するときにもwrapperブロックの中に記述していくようになります。


(省略)

<div id="wrapper">
	<div id="content">
		
	</div>
</div>

(省略)

そして、style.csscontentのidを定義します。

属性には幅と高さを追加しておきましょう。


/* コンテンツ部分 */
#content {
	width: 1150px;
	min-height: 500px;
	display: inline-block;
}

コンテンツのメイン部分をつくろう

それでは、記事などのメイン情報を表示するcontent_mainの部分を作っていきましょう。

wordpressでcontent_mainを作る

content_maincontentブロックの子要素なので、htmlでもcontentブロックの中に記述します。


(省略)

<div id="wrapper">
	<div id="content">
		<div id="content_main">
			
		</div>
	</div>
</div>

(省略)

style.css#content_mainを追加して、idとして定義しましょう。

属性には幅と高さを追加します。


(省略)

/* コンテンツメイン部分 */
#content_main {
	width: 800px;
	min-height: 500px;
}

 

takafumi
divで要素を追加するときには、その要素の親要素が何かを必ず確認しよう!

 

コンテンツのサブ部分をつくろう

最後に、サイドバーを表示するcontent_subを作りましょう。

wordpressでコンテンツのサブ部分を作る

content_mainブロックの下に、続けてcontent_subを下のように記述します。


(省略)

<div id="wrapper">
	<div id="content">

		<div id="content_main">
			
		</div>

		<div id="content_sub">
			
		</div>
		
	</div>
</div>

(省略)

 

そうしたら、いつものように#content_substyle.cssに定義してみましょう!

幅と高さを属性に追加します。


(省略)

/* コンテンツサブ部分 */
#content_sub {
	width: 300px;
	min-height: 500px;
}

 

これでレッスンは終わりです!

お疲れ様でした!

これで、今日のレッスンは終了です。

今日はHTMLの骨組みを作成して、headerwrapperfooterなどのブロックをdivタグを使って作成しました。

次回からのレッスンでは、各ブロックの中にメニューサイドバーなどをコーディングしながら配置していきます。

 

続きが気になる方は『WordPressのヘッダーやメニューをHTMLで書いてみよう』へお進みください。

 

『5日で学ぶ HTMLで作る初めてのWordPressテーマ』の目次はこちら

この記事をシェアしませんか?Share on Facebook0Tweet about this on TwitterShare on Google+0