前回の続きでヘッダーまわりを修正していこうと思っています。
画像のサイズを変更し、横幅を変更、メニューまわりも少し修正していきます。
Twenty Elevenのヘッダー画像はデフォルトで横幅が1000px、縦幅が288pxとやや大きめ。なので横幅を950px、縦幅を160pxくらいに変更したいと思います。
まず横幅ですが、Twenty Elevenではpageという大きなコンテナに収納されているので、page全体の横幅を950pxにしてしまおうと思います。
#pageの横幅を修正することでサイト全体の横幅を調整できる。
#page {
margin-top:0px;
width:950px;
}
#pageにwidthのプロパティを追加して横幅を調節しました。
続けて縦幅を変更するのですが、どうやらTwenty Elevenではヘッダーの画像を小さく作っておけば、そのサイズに調節してくれるようなので新たにヘッダーを作り差し替えるだけで良さそうです。
今回はこんなバナーを作成。横幅950px、縦幅160px。あとはダッシュボードから外観＞ヘッダーと辿りヘッダーとして画像をアップロード。アップロードした画像をヘッダーとして使えばOK。
メニューの検索フォームを消す
デフォルトではヘッダーのメニュー部分に検索バーがあります。ただサイドバーにも検索フォームを設置できるので、そちらに検索フォームを設置する場合はなくてもいい感じです。なので、思い切って削除してしまいます。
#branding #s {
display:none;
}
これでメニュー部分の検索フォームは消えました。ただこれは視覚的に消えてるだけで実際はそこにあるので、本当に消したい場合はheader.phpを修正する必要があります。個人的にはこれで十分なのでその方法は割愛。
メニューバーの外観を変える
デフォルトのままでも十分綺麗なメニューバーですが、やや黒が重たいので縦幅を調節し、色味もちょっと変更したいと思います。ちなみに、メニューの追加はダッシュボードの外観＞メニューから追加できます。カスタムリンクを作成すればメニューに追加されるようになっています。
#access li {
width: 135px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
border-right: 1px solid #cccccc;
}
まずは各メニューの幅を135pxで統一し、フォントの種類やサイズを変更してセンター揃えに。さらにメニューの間に罫線を挿入しました。しかし、このままでは一番左に線がないので不格好になってしまいます。border-leftで左側にもborder指定すれば表示されますが、そうすると今度は中央メニューの罫線が太くなってしまうので、一番左のメニューだけ個別に指定してあげる必要があるのです。
#access li:first-child {
border-left: 1px solid #cccccc;
}
この:first-childというのは最初にある子要素という意味があるので、メニューのリストの一番最初だけ左側にも罫線を追加するという指定ができました。
続けてメニューの色味なども変更しちゃいます。
#access {
border-top: 4px solid #cccccc;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
アクセントとしてトップに太めの罫線を。メニュー全体の色を白を基調としたグラデーションにしています。グラデーションは自分で設定するのは面倒だけど、色んなサイトにグラデーションを勝手に作ってくれるジェネレーターや、サンプルとして置いてあるサイトなどがあるので参考にするとラクチン。（笑） うちはこのサイトの色味がよかったのでここから拝借しましたー。
http://www.webdesignerwall.com/demo/css-buttons.html
続けてフォントの色と高さを調整。
#access a {
color: #333333;
line-height: 34px;
}
最後はメニューにカーソルが重なったときの色を指定して完成！
#access li a:hover {
color: #fff;
background: #616161;
background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
background: -moz-linear-gradient(top, #757575, #4b4b4b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
ということでこんな感じに仕上がりましたー。
最初の頃はひたすらググってそれっぽいcssをコピペして満足していたんだけど、cssの勉強をして少しでも何が書いてあるのか分かるようになると、すごく納得のいく仕上がりになるねー。それでもまだ「あー、ここをこうしたいんだけど、何て書けばいいんだろう」なんていうのはうじゃうじゃあるけど。（笑） てことで、がっつりじゃないけどちょっとcssかじってみたいなーと言う人は、下記の本で勉強してみてはいかが？ 私もこの本を見ながらサイトを作ってるだけなのに色々分かってきて感激しております。（笑）