エキサイトブログのトップページは、デザイン工夫の良い見本です。 今回は、DevToolsを使って、このページを調べてみます。 以下のリンク先をサンプルにしているので、Chrome DevToolsで開きながら読まれると、より判り易いと思います。
リンクボタンのデザイン デザイナーは小さな所に気を使い、それとなくスマート感を演出します。 ページの右上のユーザーの利用頻度の高いメニューボタンは、マウスポインタを乗せると「ふわっと淡く」なります。 これも、そんな演出のひとつです。
このボタンを右クリックしてDevToolsを開くと、下の様に「<span>記事を書く</span>」がターゲットになって開きます。
しかし、右ウインドウのCSSを見ても、アイコンや文字の色などの指定がなく、どうやら親要素の方にそれが有りそうです。 そこで親要素の「a」要素にターゲットを移してみました。( a要素を親にしているのは、このボタンでリンク先を開く様にしたからで、これは一般的なボタンのHTML構造です)
a要素のCSS(赤枠)に、ブルーのcolor指定が出て来て、ここでボタンの色を指定している事が判ります。 試しに「color」プロパティのチェックを外すと、ボタン全体が黒になります。
「color」プロパティの下に「transition」プロパティがあります。 これは、変異を次第に変化する様に表示し、アニメーション効果を演出するものです。 その「値」は「0.2秒」の意味で、これが「ふわっ」の効果の元です。 これもチェックを外すと、効果の意味が良く判ります。
「淡くなる」の指定は「:hover」時の状態です。 これはToolsの右上の「
:hov」からアクセスしない限り、内容を見たり編集する事が出来ません。 下図は「
:hov」→「□:hover」にチェックを入れた状態です。
右ウインドウに「a:hover」のCSSが表示されました。 ここのプロパティが、マウスポインタを乗せた時の演出です。 2個のプロパティのチェックを外すと、その方法が判ります。
「opacity」を外すと「淡く」なっていたアイコン・文字が明瞭になります。 このプロパティが「淡く見せる」の指定です。 また「text-decoration: none;」の指定は、リンク文字の下に付く下線を消していた様です。 確かに下線が出ると汚く見える事が多いですから。
「記事を書く」だけブルーにしたのは、右側の「ブログ管理」「メニュー」はメニュー表示になるが、「記事を書く」は編集画面に飛び「ちょっと違う」という所を明らかにしたかったのだと思います。 このボタンに設定された幾つかの工夫は、いずれもブログスキンのアレンジにも利用できますね。
+
この記事はカテゴリ「
スキン編集」にトラックバックしています。