CONTEXT作りの重要性2014.10.29

2014年10月26日


カレント設定
 
GROOVESTER WEBSITE
いろいろといじっているのだが、
今、カレントページのナビゲーションを差別化する設定をしたので、
メモ的に方法を書いておく。

メインロゴの下にグローバルナビゲーションを並べているのだが、
「今、自分が選んでいるナビゲーションがどれか」が
認識できないと、迷ってしまう。。
そこで、
「今、自分が選んでいるナビゲーション」だけ、
他のナビゲーションとは、ちょっと違う表示にする必要がある。

↑冒頭のキャプチャで言えば、
「HOME」ボタンのみが やや明るくなっていると思う。

また、ドラマ一覧ページを開くと、

カレント設定2

↑このように、
「ドラマ一覧」のナビゲーションのみが やや明るくなり、 
他のナビゲーションと差別化でき、
今、自分が「ドラマ一覧」ページにいることを認識デキる。

で、
この現在自分が開いているナビ、ページ(カレントページ)を
差別化表示する方法は、

カレント設定3

↑このように、
カレントページのナビのみを、
 <li class="current">●●●●●●</li>
で設定する。

他のナビは、<li>●●●●●●</li>

そして、

カレント設定css

CSSで色を規定すればOK!


P.S.

ところで、、
GROOVESTER WEBSITEの最も目立つ場所のナビ、
一番左側のナビを「ドラマ一覧」にした。
やはり、タレントや音楽やIT技術やマーケティングなどなどの、
中核に置くべきなのは、ドラマだな、と。

スライドショーでも
祭文監督の映画『絢爛たる母性』 を掲載しているように、
中核をドラマにして、そこからいろいろなものを配置すると、
実にスッキリして、わかりやすくなる。

実は背景を真っ黒にしているのも、
コンテンツを際立たせて輝かせるためにしている。
映画館のイメージ。 

20世紀から21世紀へと進む中で、
映画 > TV > WEB
とスクリーンは変遷してきたのだが、
映画の重要性は変わらずに高い、
と、私は考えてきた。
もちろん、20世紀のカタチそのままではなく、
螺旋的な進化をしつつ、
その重要性というか有効性を持ち続けるだろう。

GOOGLEが運営しているYOUTUBEに、
「シアターモード」 という豪華な視聴方法が用意されていることにも、
それは表れている、と思う。

光と影のコントラスト。
影が光を際立たせる。

 

 

shun699 at 00:49│ このエントリーをはてなブックマークに追加 IT:web design 
CONTEXT作りの重要性2014.10.29