WordPress テーマ自作への道のり vol.4—ヘッダー編

photo credit: Aleksandar Urošević via photopin cc
photo credit: Aleksandar Urošević via photopin cc

遅い歩みではありますが、地道にテーマ作りを続けています。これまでに1番の基本である index.htmlstyle.css ファイルを用意し、全体の大まかなスタイリングをしてきました。ここからはパーツごとにもうちょっと作り込んでいきます。

WordPress テーマ自作への道のり

今回の目次

  1. ヘッダーに入れるもの
  2. サイトタイトル
  3. ナビゲーションメニュー
  4. 検索フォーム
  5. スタイル後のイメージ

ヘッダーに入れるもの

ヘッダーは Web ページをブラウザで開いた際に表示される画面の中で、1番上のエリアですね。ここはなるべくすっきりとさせておきたいので、自分は次の3つだけを入れようと考えています。

  • サイトタイトル
  • ナビゲーションメニュー
  • 検索フォーム

検索とメニューについては、いずれはスマートフォン用に jQuery でタップするとにゅるっと出てくるやつを作りたいのですけど、力不足なので今回はシンプルに CSS で。

それぞれ、CSS に記述した内容からいくつかピックアップして以下に書いてみます。

サイトタイトル

index.html に書いたヘッダー部分のコードは次のようになっていました。

<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> 要素。<h1> は通常、文字サイズが2倍(2em)、そして上下のマージンが文字サイズの2/3(0.67em)ずつあります。iPhone で表示するとかなりスペースを取るので、CSS でどちらも小さめに調整しました。

h1 {
  font-size: 1.75em;
  margin: .5em 0 .25em;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 2em;
  }
}

後半はメディアクエリーを使って、タブレットや PC 用に文字サイズを元に戻すための記述です。

ナビゲーションメニュー

ナビゲーションメニューの見出し <h2>メインメニュー</h2> はあえて画面上に表示する必要はなさそうなので、WordPress のデフォルトテーマ(Twenty Fourteen) でも使われている次の方法で非表示にしました。

/* HTML */
<h2 class="assistive-text">メインメニュー</h2>

/* CSS */
.assistive-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
}

この方法なら display: none; で非表示にするのと違って、コンテンツそのものは目の不自由な人が使うスクリーンリーダー(音声リーダー)できちんと読み上げてもらえるようです。

参考記事:

各メニュー項目は、オーソドックスにフロートで横並びにしました。

検索フォーム

検索フォームのコードは、ナビゲーションメニューの後に追加しました。WordPress Codex に HTML5 用のテンプレートが掲載されているので、これを利用しました。

参考記事:

  <nav>
  ・・・省略・・・
  </nav>
  <form role="search" method="get" class="search-form" action="http://shirose.jp/">
    <label>
      <span class="assistive-text">検索</span>
      <input type="search" class="search-field" placeholder="Search..." value="" name="s" title="検索">
    </label>
    <input type="submit" class="search-submit" value="Search">
  </form>
</header>

フォーム部品のスタイリングでは、CSS を当てても思い描いた通りにスタイルが反映されないケースがあります。そんな時は -webkit-appearance: none; で CSS を適用できるようにします。

.search-field {
  -webkit-appearance: none;
}

前回紹介した Normalize.css の中には、フォームのスタイルをノーマライズするためのコードもありますので、こちらも合わせて利用するといいです。

スタイル後のイメージ

できあがったヘッダーがこちらです。あんまり工夫を凝らしていないので華々しさに欠けますが、とりあえず初めての自作テーマなのでこんなところで。

コメントを残す

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