「Cocoonにも慣れてきたし、ヘッダーをカッコよくカスタマイズしたい」という方へ。この記事はヘッダーをカスタマイズする一例をご紹介します。
目次(クリックでジャンプ)
タイトルのフォントを調整する
デフォルト状態はこんな感じでした(スキンは「colors(ブルー)」を使用)。
まずタイトルのフォントをカスタマイズします。
変更を指定するクラスは「.header .site-name-text 」です。
↓
文字間(letter-spacing)を広げて優雅にしました。
opacityというのは全体の透明度を変える(1で不透明、0で透明)ので0.9に指定すると背景になじみます。
タイトル周りのスペースを調整する
個人的にコンパクトなデザインが好きなので、タイトル周りのスペースを減らします。
変更を指定するクラスは「.logo-text」です。
↓
パディング(境界線の内側のスペース)は基本的には「上→右→下→左」の順に指定します。
上の例では「5px 0px 10px」となっていますが、これは「上 右・左 下」という指定方法です。
サブタイトルを調整する
サブタイトルも調整します。またletter-spacingです。
変更を指定するクラスは「.tagline」です。
↓
タイトルに動きをつける(マウスオーバー)
なんとなく面白そうなので動きを付けてみます。
疑似クラス「.header .site-name-text:hover」を指定して色々変えると、マウスポインタが上にくると「.header .site-name-text」から「.header .site-name-text:hover」へと変化します。
ここでは大きさや文字間・行間、色などを色々変えています。
↓
「transition」は変化の時間や様子を指定します。何も指定しないとポインタをのせた時にパッと変わって余韻がありません。
例では、「all」で全ての要素を指定し「0.5s」で変化にかかる時間を「ease」で変化の様子を指定しています。「ease」は変化がだんだんゆっくりになります。
ポインタをどけた時にパッと戻らないようにするには、元のサイトテキストの方にも「transition」を指定します。
こちらは「ease」がありません。変化の仕方が一定になります。サイトタイトルにマウスを置いて比べてみて下さい♪
ヘッダーの背景を調整する
最後に、ヘッダーの背景をグラデーションにしてみました。
変更を指定するクラスは「.header」です。
↓
グラデーションはまず角度を12時方向から時計回りで指定します。「90deg」は3時方向になります。指定しないと下向き6時方向になります。
続けて最低2色をカンマで区切って書きます。例の用に3色書いた場合は色面の左端・中央・右端に3色が置かれ、その間をグラデーションにしてくれます。