WordPress テーマ自作への道のり vol.2—index.html 編(サンプル付き)

photo credit: codepo8 via photopin cc
photo credit: codepo8 via photopin cc

前回の記事ではテーマの自作に入る前段として、ブログのコンセプト(ターゲットやゴール)、ワイヤーフレーム(設計図のようなもの)を考えました。今回から実際に HTML と CSS を使ってコードを書いていきます。初めに1番の基本となる index.html ファイルを作ってみます。最後にサンプルファイルも置いてあります。

WordPress テーマ自作への道のり

今回の目次

  1. 用意するもの
  2. 作成するファイル
  3. index.html の枠組みを作る
  4. body 要素にページの構造を書く
  5. HTML5 でマークアップ
    1. ヘッダー
    2. メイン
    3. サイドバー
    4. フッター
  6. ブラウザで表示
  7. オンラインツールで構文とアウトラインをチェック
  8. サンプルファイル
  9. 参考書籍と使用アプリ

用意するもの

今の段階ではいきなり WordPress 用のテーマファイルを作り始めるのではなく、HTML と CSS だけで Web ページを構築していきます。一見、遠回りに思えるかもしれませんが、自分のような初心者には「最初は HTML + CSS。次に WordPress(PHP など)」と順を追って作業していく方が、結果的に理解しやすいです。

なので今は WordPress のローカル環境は必要ありません。用意するものは次の2つだけです。

  • テキストエディタ(Windows の「メモ帳」や Mac の「テキストエディット」など。もちろん高機能なものでも可)
  • ブラウザ(Internet Explorer や Safari、Firefox、Chrome)

作成するファイル

まずは index.html という名前のファイルを作り、デスクトップや自分の好きなフォルダに保存します。文字コードはここでは UTF-8 にしています。

index.html は Web ページとして表示させたい内容を記述していくファイル。ダブルクリックすると HTML ファイルとしてブラウザで表示されるので、編集する時は右クリックメニューなどを使ってテキストエディタで開くようにします。

index.html の枠組みを作る

index.html に、HTML の枠組みを書いていきます。ここは言ってみれば決まり物です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
</head>
<body>

</body>
</html>

全体としては、1行目の <!DOCTYPE html> が「文書型宣言」(この HTML 文書は HTML5 で書きますよ、という宣言)で、2行目の <html lang="ja"> から最後の </html> までが一括りとなっています。

そして、一括りになっている <html> 要素の中は、<head>・・・</head><body>・・・</body> の2つに分かれます。

<head> 要素の中には、この Web ページに関する情報を記述します。<meta charset="utf-8"> は、この HTML 文書が UTF-8 という文字コードで書かれていることを示しています。ここは大文字で書いても小文字で書いても大丈夫です。

<title>タイトル</title> はページのタイトル。ブラウザのタイトルバーやタブに表示されます。通常はブログのタイトルをここに入れます。当ブログなら <title>Simple Living</title> となります。

実際に Web ページとして表示されるのは、今は空行となっている <body> 要素の中身です。

body 要素にページの構造を書く

続いて、<body> 要素の中身を書いていきます。まずページ全体の構造を記述します。

<body>
  <div id="container">
    <header>
    ・・・ヘッダー・・・
    </header>

    <div id="main">
    ・・・メインコンテンツ・・・
    </div><!-- #main -->

    <div id="sidebar">
    ・・・サイドバー・・・
    </div><!-- #sidebar -->

    <footer>
    ・・・フッター・・・
    </footer>
  </div><!-- #container -->
</body>

ページ全体を <header><div id="main"><div id="sidebar"><footer> と4つのブロックに分け、スタイリングのために4つをまとめて <div id="container"> で囲いました。

<header> はページの1番上にあるヘッダー部分(ロゴやメニューがあるところ)、<footer> は1番下のフッター部分(コピーライトなどがあるところ)で、ともに HTML5 で新しく追加された要素です。

コンテンツ部分はサイドバーがある2カラムページを想定して2つに分けました。

HTML5 でマークアップ

ここから、それぞれのブロックの中を少しずつ組み立てていきます。あまり詳細に書こうとするとすぐに行き詰まるので、ざっくりと骨組みを作っていく感じです。

ヘッダー

<header>
  <h1><a href="#">サイトタイトル</a></h1>
  <nav>
    <h2>メインメニュー</h2>
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
    </ul>
  </nav>
</header>

ヘッダー部分には見出しの <h1> タグを使って、サイトタイトル(ロゴに相当)を記述します。先ほど <title> 要素として書いたタイトルはブラウザのアドレスバーやタブに表示されるものでしたが、ここは実際に画面上に表示されるタイトルとなります。<a> タグで囲ってリンクにします。

メインメニューは <nav> 要素でマークアップしています。これも HTML5 で追加された要素で、その場所がページ内の主要なナビゲーションであることを表します。

HTML5 には、文書のアウトライン構造を意識した上で、セクションの範囲を示すための要素が4つ導入されました。<nav> 要素はそのうちの1つ。ここでは <nav> 要素でマークアップすることで、メインメニューがただのパーツではなく、明確に1つのセクションとして扱われます。

オンラインで使える HTML5 のアウトラインチェッカーで確認したところ、<nav> 要素の後に見出しを記述しないと、「Untitled Section(見出しのないセクション)」と認識されるようでした。それではあまり気持ちよくないので、<h2> タグで見出しを入れています。

HTML5 のアウトラインに関しては次の記事が詳しいです。

参考記事:

メイン

次はメインコンテンツを書いていきます。ダミー記事2本と、「前のページ」「次のページ」に移動するページャーを入れます。

<div id="main">
  <article>
    <header>
      <h2><a href="#">このタイトルはダミーです。文字の大きさ、量、字間、行間等を確認するために入れてい...</a></h2>
      <div><time datetime="2014-01-01">January 01, 2014</time></div>
    </header>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、...</p>
    <p><img src="http://placehold.jp/160x160.png"></p>
  </article>

  <article>
    <header>
      <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ...</a></h2>
      <div><time datetime="2014-01-01">January 01, 2014</time></div>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...</p>
    <p><img src="http://placehold.jp/160x160.png"></p>
  </article>

  <div id="pager">
    <div><a href="#">PREV</a></div>
    <div><a href="#">NEXT</a></div>
  </div>
</div><!-- #main -->

<article> 要素もセクションの範囲を示す HTML5 の4要素のうちの1つ。特に、それだけでも完結する独立したセクションに使用します。なのでここではサイトのトップページに表示させる記事そのもの(記事のタイトルや公開日、本文抜粋、アイキャッチ画像)をこのタグで囲いました。

<header> は先ほどのページ全体のヘッダーとは違い、ここでは記事ごとのヘッダーを示しています。

<time> も HTML5 で追加された要素で、コンピュータが理解できる形で日付や時刻を記述するために使います。<time> 要素の中身はあらかじめ決められた書式に則って書かなければいけません。

<time>2014-01-01</time>・・・OK
<time>2014年1月1日</time>・・・NG

決められたフォーマット以外の形で画面上に表示させたい時は、datetime 属性の値として、正式なフォーマットの日時を指定します。

<time datetime="2014-01-01">2014年1月1日</time>・・・OK

参考記事:

なお、サンプルコードを書くために利用させていただいたダミーテキストやダミー画像については、Web クリエイターボックスさんの記事でジェネレーターが多く紹介されています。

参考記事:

サイドバー

サイドバーのコードは次のようにしてあります。

<div id="sidebar">
  <aside>
    <h2>ウィジェット</h2>
    <section>
      <h3>Popular Posts</h3>
      <ul>
        <li><a href="#">タイトル</a></li>
        <li><a href="#">タイトル</a></li>
        <li><a href="#">タイトル</a></li>
        <li><a href="#">タイトル</a></li>
        <li><a href="#">タイトル</a></li>
      </ul>
    </section>
    <section>
      <h3>Tag Cloud</h3>
      <ul>
        <li><a href="#">タグ</a></li>
        <li><a href="#">タグ</a></li>
        <li><a href="#">タグ</a></li>
        <li><a href="#">タグ</a></li>
        <li><a href="#">タグ</a></li>
      </ul>
    </section>
    <section>
      <h3>Author</h3>
      <p><img src="http://placehold.jp/100x100.png">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、...</p>
    </section>
    <section>
      <h3>Follow</h3>
      <ul>
        <li><a href="#">RSS</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
      </ul>
    </section>
  </aside>
</div><!-- #sidebar -->

ここでは <aside> 要素で全体を囲って、その中を <section> 要素で仕切っています。この2つの要素は、セクションを示す HTML5 の4つの要素のうち、今までに登場していなかった最後の2つになります。

<aside> 要素は、<article> 要素とは反対にメインコンテンツ以外のセクションに対して用います。人気記事や関連記事のリスト、広告などがしっくりきます。

<section> 要素は一般的なセクションを示すので、今回はサイドバーのコンテンツ(人気記事、タグクラウドなど)をそれぞれ <section> 要素にして、まとめて1つの <aside> 要素にしています。

どちらもさっきの <nav> 要素と同様に、見出しをつけないとアウトラインチェッカーでひっかかったので <aside><h2> タグ、<section><h3> タグを割り当てました。

HTML5 でセクションの構成要素を使うと、それによってアウトライン構造が形成されていくので、ここの見出しをすべて <h1> にする手もあるようです。でも自分はアウトラインに沿って見出しも階層化しておきたいので、上のようにしました。

フッター

フッターは簡単に、コピーライト表記のみにしています。著者情報はサイドバーよりフッターに置いた方がいいのかなという気もしないではないですが、とりあえず今回はシンプルなフッターにしてみました。

<footer>
  <p><small>&copy; コピーライト表記</small></p>
</footer>

<small> 要素は、もともとはフォントを小さく表示させるための要素だったのが、HTML5 から著作権表示などをマークアップするための要素に変更されたとのことです。

ブラウザで表示

ここまで書いたら、index.html ファイルをダブルクリックしてブラウザで表示させてみます。

まだスタイルを設定していないので、書いた通りに上から下へと順に表示されます。

オンラインツールで構文とアウトラインをチェック

HTML5 できちんと書けているかどうかは、次の便利ツールですぐに確認できます。どちらも Web デザインレシピさんの先ほどの記事で紹介されていました。

  • Validator.nu (X)HTML5 Validator

    HTML5 の構文をチェックしてくれます。「Text Field」を選び、ソースコードをペーストするだけで使えます。

  • HTML 5 Outliner

    こちらもコードをペーストするだけで、アウトライン構造をチェックしてくれます。見出しに日本語を使っていると結果が文字化けするのでチェックする時だけ英語に直すといいかもしれません。

今回のサンプルコードでは <img> タグの alt 属性を省略しているのでそこだけ構文チェックに引っかかりますが、あとは問題なしです。エラーが出なくなるまでコードを修正するのは、なかなか骨の折れる作業でした・・・。

サンプルファイル

できあがったサンプルファイルを置いておきます。WordPress のテーマ自作用に、ご自由にお使いください。

参考書籍と使用アプリ

HTML5 を理解する上ではさまざまな Web サイトを参考にさせていただきましたが、ベースは次の書籍で学びました。HTML5 と CSS3 で導入された内容や変更された内容についての解説が詳しいです。また、HTML と CSS そのものについても分かりやすく書かれているので、これから HTML や CSS を学びたいという人にも合っています。

よくわかるHTML5+CSS3の教科書
大藤 幹
マイナビ
売り上げランキング: 2,546

最初に PC でテキストエディタを用意すると書きましたが、私自身はコーディングのほとんどを iPhone と iPad 環境で行っています。使っているのは Textastic です。

Mac では MacRabbit – Espresso – The Web Editor を使っています。

本当はスタイルシートについても一緒に記事に書こうと思っていたのですが、長くなったので今回はここまでにします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です