前回はヘッダを整えてブログっぽくなりました。

しかしメニューとかが背景の青で見えにくくなっているし、 画面全体に広がってしまっているのでデザインしてやります。

それではWordpress自作テーマ講座第14回目を始めましょう。

グローバルナビゲーションはヘッダの右上か左下がオススメ

色んなブログやサイトを見ていると、奇抜なデザイン以外は基本的に右上か左下、 もしくは横幅全体を使って下側に配置していると思います。

下側に設置する場合は、結構シンプルに実装出来ますが 右上に配置するとなるとちょっと特殊なことをやる必要があります。

色々方法はあるのですが、一番簡単でなおかつ他の要素に邪魔されない方法があります。

絶対配置と言って、基準点を元に好きな位置に配置できる優れものです。

優れものではありますが使い方に気を付けないと混乱を招いてしまうので多用は禁物です。

絶対配置を使う前にまず基準点となる要素をきめるためには、

position:relative;

というCSSを使うことになります。

メニューの親ボックスは「header」タグるのでそこを基準点にします。

header {
  display:block;
  width:100%;
  background-color:#1565C0;
  position:relative;
}

これで準備は整いました。

本来HTML5のタグはスタイルに使うものではないのですが、特にSEOにも影響はないので 厳密なHTML+CSSを組まない人は全然使っちゃってもOKです。

position:absoluteを使って自由にメニューを配置しよう

これでメニューを自由に配置できる準備が整いましたので、 メニューのボックスに「position:absolute」を加えてやりましょう。

ここで注意してほしいのが、直接ulにスタイルを適用すると もし入れ子メニューにした場合それも適用されてしまうので専用クラスをもうけてやりましょう。

子にだけ適用する方法もあるのですが、一旦はわかりやすいようにクラスを使います。

        <ul class="gnavi">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PROFILE</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>

それではgnaviクラスにスタイルを適用します。

header ul.gnavi {
  background-color:#f00;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:960px;
  position:absolute;
  top:0;
}

分かりやすいように背景を赤くしました。

追加したのは横幅の960pxと絶対配置と基準点を元に上の座標を０にしました。

基準点はheaderです。

headerは画面全体に広がっていて尚且つ画面の一番上にいってますので、 ulタグは一番左上に行ってしまいます。

これではメニューっぽくないので真ん中の右側に寄せたいのですね。

今度は「left」か「right」を使って位置を調整するのですが、 実際何px動かしたらいいのかパッと出てくる人は少ないと思います。

パソコンだけで全体のpxが固定であればうまくいきそうですが、 画面の小さい人が見た場合同じだけpxをずらしてるので表示が崩れてしまいます。

出来ればulボックスをセンタリングしたいですね。

absoluteをしてしまうと普通に「margin:0 auto」をしても中央に寄ってくれません。

headerで「text-align:center」にしても寄ってくれません。

じゃあどうするかというとこのようにします。

header ul.gnavi {
  background-color:#f00;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:960px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
}

やったことはleftとrightを両方0にすることです。

こうすることで左起点なのか右起点なのかよくわからない状態になりますね。

その状態でmarginの左右をautoにしてやると中央に寄ってくれます。

何故でしょうね。

私もなんとなく仕組みは理解しているのですが正直100％解説できません。

positionについて調べまくったらわかると思いますが、 今はそれを知るのが目的ではなく、ボックスを絶対配置の状態で中央に持ってくるのが目的です。

仕組みを知りたくなる人は手段が目的になってしまう悪い癖があるので気を付けましょう。

とりあえずこうやったらこうなるんだという覚え方がベストです。

これは私がプログラミングの覚え方として毎回口酸っぱくして言ってる決まり文句です。

CSSはプログラミング言語ではありませんが考え方や組み立て方はプログラミングに似ています。

これで中央に寄ってくれたので一旦背景の色を消してしまいましょう。

header ul.gnavi {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  width:960px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  margin:0 auto;
}

header ul.gnavi > li {
  padding:10px;
}

header ul.gnavi > li > a {
  color:#fff;
}

ついでにメニューの文字の色も白に変更して見やすくしておきましょう。

ここで使っている　＞　ですが　先ほど直下の子だけに適用するというやりかたになります。

li毎にクラスを付けるのが面倒くさいので使ってしまいました。

これを使えばgnaviクラスを使わなくてもheaderの直下にあるulだけ適用という風にも出来ます。

でも私はクラスを付ける派はので着けています。

これは自由ですね。

メニューにマウスカーソルを置くと色を変化させる方法

メニューの文字は白くなりましたが、カーソルを合わせても色が変わりません。

これではマウスカーソルが当たったかわかり辛い状態でアクセシビリティがよろしくありません。

CSSではそのタグの範囲にマウスカーソルが入ったら動かす命令が用意されています。

CSSではこのように書きます。

a:hover {
  color:#f00;
}

意味はaタグにマウスカーソルを合わせた時に文字の色を変化させるという感じです。

それでは実際に使ってみましょう。

header ul.gnavi > li > a {
  color:#fff;
}

header ul.gnavi > li > a:hover {
  color:#f00;
}

これでマウスカーソルを合わせると白色から赤色に変化すると思います。

ふんわりと変化させるテクニック

このままだとマウスカーソルを合わせた時に一瞬で色が切り替わってしまいちょっとブサイクですね。

そういう雰囲気のサイトであればいいのですが、柔らかい雰囲気のサイトとかだとあまりマッチしません。

じゃあどうするのかというと「transition」というCSS3で実装されたスタイルを使います。

transitionはちょっと奥が深いので今回は説明しませんが、どのようになるか一旦使っていましょう。

header ul.gnavi > li > a {
  color:#fff;
  transition:color 0.5s;
}
header ul.gnavi > li > a:hover {
  color:#f00;
}

これでマウスカーソルを合わせたらふんわりと色が変わって、話したときもふんわりと戻るようになります。

仕組みとしては、変化させたい大元にtransitionを設定しておいて hoverで変化させるとtransitionが発動するようになっています。

今回transitionの内容は「colorを0.5秒で変化させろ」という命令にしています。

「color」の部分を「all」にするとすべてのCSSにtransitionが適用されてしまいますので、 環境に合わせて直接にするか全部にするかをきめましょう。

秒数はお好みで調整してみてください。

他にも秒数の後に半角空白を入れて、最初は遅く終わりは早くとかいわゆる「ease-in」「ease-out」と言われる動きも指定できます。

詳しくは「css3 transition」でググってみてください。

Wordpress自作テーマ講座第14回まとめ

今回はメニューを少し調整してみました。

position:absoluteによる絶対配置とそのセンタリングを覚えました。

絶対配置やそのセンタリングは今後もデザインする上でかなり使えるテクニックなので覚えておきましょう。

この状態では左に黒い点が付いていたり、960px全体に広がってしまって無駄なスペースがあったり 不満点がまだまだ結構残っていると思います。

次回は細かい不満点を解消してメニューを仕上げてしまいましょう。

それでは。