💁♂️ 【お知らせ】塾専用HP作成サービス
こんにちは！
takafumiです。
このページに来てもらっているということは、あなたは日頃からWordPressを利用されているのではないでしょうか？
WordPressを使えば簡単にブログやウェブサイトを作れるので本当に便利ですよね！
おかげで、私もこうやって記事を公開することが気軽にできています。
WordPressさまさまです。
でも、あなたにはWordPressを使っていて、こんな悩みはありませんか？
とか
といったものです。
WordPressで提供されているテーマは海外で作られたものが多くあります。
テーマを選ぶ際に参考にするプレビュー画像には、英語でテキストやタイトルが入っていますよね。
たしかに、英語でタイトルなどが入っていると収まりもよくスタイリッシュ見えます。
でも、そこに実際の日本語テキストがはいると「間延び」した感じになって、一気にダサくなってしまうことが、とても多いんです。
それに、使い勝手のいいテーマに人気が集中してしまうので、どのサイトも似たり寄ったりになっちゃうことが多いです。
一番てっとり早い解決策はズバリ。
ということです。
私も、このmorningcodingのテーマを自分で一から作りました。
既存のテーマを使うことに比べたら、たしかに時間はかかってしまいます。
それでも、自分が作ったものなので後から変更を加えるときにもスムーズに作業ができます。
それでは、私と一緒に今日から5日間に渡って、HTMLを使ったWordPressのテーマを作っていきましょう！
『5日で学ぶ。HTMLで作るはじめてのWordPressテーマ』スタートです！
目次
レッスンを始めるまえに
WordPressのテーマを自分でつくる場合、下のような3つのステップを踏むことになります。これから始める、5日間チャレンジではSTEP2の「HTMLでページを作成する」部分について勉強していきます。
デザインをもとに、HTMLやCSSを使ってウェブページを作っていく作業になります。
もし、
という場合、こちらの『3日で学ぶHTML入門』を見てくださいね。
さらに
という場合は、こちらの『3日で学ぶ CSSの書き方』で勉強してみましょう。
という場合は、こちらの『5日で学ぶ WordPressテーマ作成』へお進みください！
というあなたは、このままお読みください。
HTMLでつくるページについて
このレッスンで一緒につくるウェブページは、IT関連の情報を発信する架空のブログ「update.com」というものです。
記事が一覧で表示される部分、カテゴリーなどが配置されるウィジェットを含んでいます。
トップにあるメニューやフッター部分も含んでいるため、このコースを完了すると一般的なウェブページのHTMLの書き方がわかるようになります。
HTMLの骨組みを作ろう
まずは、これから作成するファイルを保存する作業用フォルダをつくりましょう。
フォルダの準備をしよう
コンピュータの好きな場所に、「update.com」という名前のフォルダを作成します。
フォルダが作成できたら、SublimeTextでupdate.comを開きましょう！
SublimeTextを初めて使う方はこちらのページを参考にしてみてくださいね。
index.htmlファイルを作成しよう
フォルダが開けたら、SublimeTextのサイドバーにあるupdate.comの上にマウスを移動させて右クリックから 『New File』をクリックします。
「untitled」という空っぽのタブが表示されます。
なにも、入力せずにファイルを 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」というファイルを作成してください。
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というウェブサイトですが、レイアウトを分解すると次のようになります。
header や wrapper、footer の3つが大きな親要素となるタグです。
ここでは、ページ上部にある 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はコンテンツを実際に表示したり、サイドバーを配置する部分になります。
このウェブサイトのメインとなる部分なので、しっかり作っていきましょう。
headerの下に続けて、idがwrapperのdivを追加してください。
（省略）
<div id="wrapper">
</div>
（省略）style.cssを開いて、wrapperのidを定義しましょう。
idを定義するときには、かならず頭に#をつけるの忘れないようにしてくださいね。
属性に背景色と幅を追加します。
（省略）
/* ラッパー部分 */
#wrapper {
background-color: #89bfff;
min-width: 1300px;
}
フッターをつくろう
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という２つのブロックの親となるブロックです。
contentはwrapperブロックの子要素なので、htmlを記述するときにもwrapperブロックの中に記述していくようになります。
（省略）
<div id="wrapper">
<div id="content">
</div>
</div>
（省略）そして、style.cssにcontentのidを定義します。
属性には幅と高さを追加しておきましょう。
/* コンテンツ部分 */
#content {
width: 1150px;
min-height: 500px;
display: inline-block;
}
コンテンツのメイン部分をつくろう
それでは、記事などのメイン情報を表示するcontent_mainの部分を作っていきましょう。
content_mainはcontentブロックの子要素なので、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;
}
コンテンツのサブ部分をつくろう
最後に、サイドバーを表示するcontent_subを作りましょう。
content_mainブロックの下に、続けてcontent_subを下のように記述します。
（省略）
<div id="wrapper">
<div id="content">
<div id="content_main">
</div>
<div id="content_sub">
</div>
</div>
</div>
（省略）
そうしたら、いつものように#content_subをstyle.cssに定義してみましょう！
幅と高さを属性に追加します。
（省略）
/* コンテンツサブ部分 */
#content_sub {
width: 300px;
min-height: 500px;
}
これでレッスンは終わりです！
お疲れ様でした！
これで、今日のレッスンは終了です。
今日はHTMLの骨組みを作成して、headerやwrapper、footerなどのブロックをdivタグを使って作成しました。
次回からのレッスンでは、各ブロックの中にメニューやサイドバーなどをコーディングしながら配置していきます。
続きが気になる方は『WordPressのヘッダーやメニューをHTMLで書いてみよう』へお進みください。
