ブログ練習帳

12月2011

opactyを使ってナビゲーションボタンを作ってみる…

ナビゲーションボタンを作るとき、背景だけ画像にして、テキストは画像化しないという方法があります。

でもこの方法だと、カッコいいフォントを使ったり、細かいカーニングとかがうまくいかないので、テキストごと画像化してしまうことがあります。で、実際の画像はHTML上でimgとしておくのではなく、CSSで背景として指定してやれば、hoverを使って、マウスオーバーのときと通常のときとで、表示を変えられるので、ナビゲーション感が出ます。

でも、HTML上に書かれたテキストをどのようにして非表示にするか、という問題がでてきます。text-indent:-9999pxとかで、うーんと遠くまでテキストを飛ばしてしまうというテクニックを使うことが多いみたいです。あと、根性で とか入力しちゃうという、かなりな力技もあるかも。（ 技は、実際にHTML上でなにもないわけだから、リンクとしてかなりマズイというのは、見習でも分かります…）

ただ、うわさによると、text-indentを使いすぎると、SEO的にあれだったり、google先生がお嫌いだったりするらしいので、考えないわけではないです。

ということで、先日使ったopactyですが、これ、バナーとかだったら、ちょっと色がうすくなったりすると、「あぁ、マウスが乗っかってるな」って十分分かるのですが、ナビゲーションボタンで、色がうすくなるだけだと、ちょっと物足りないかもです。

(X)HTML

<ol>

  <li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>

  <li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>

  <li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>

  <li><a href="#"><img src="img/btn01.gif" width="100" height="50" alt="ボタン" /></a></li>

</ol>

CSS

* {

margin:0;

padding:0;

}

ol {

list-style-type:none;

background-color:#FF6633;

height:50px;

margin:auto;

width:400px;

}

li {

float:left;

}

a {

text-decoration:none;

opacity:1;

}

a img{

width:100px;

filter: alpha(opacity=100);

border:none;

}

a:hover{

opacity:0.5;

}

a:hover img{

width:100px;

filter: alpha(opacity=50);

}

サンプルはこちら

つまりは、liにimgを張り込んでいるのですが、hoverしたときに、半分だけ色がうすくなります。で、olがliの後ろ側にあるので、olに背景色として指定した色が透けて見えるという仕組みです。ちなみに、liにfloatがかかっているので、その親要素であるolがそのままではliの高さを認識してくれないので、背景色が出てくれません。ということで便宜的に高さだとか、幅をolに指定してありますが、クリアフィックスを使うとか、いろいろ方法はあるかと思います。

と、とりあえず、コーディング的にはナビゲーションができましたが、opactyを使って、上の画像の色と、下の背景色で、きれいなhoverの色を指定するのって、難しいよな、やっぱり。なんか、いい計算方法とかあるのかなぁと悩む、見習です。

2011年12月7日10:09 PM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)

Fire WorksでPhotoshopライブ効果をいくつも使う

Fire WorksのPhotoshopライブ効果って、よくお世話になります。文字を装飾したり、けっこうワンタッチでキレイに加工できます。

Fire WorksのPhotoshopライブ効果画面

1つのオブジェクトに、たくさんの効果を設定できますが、1つの効果を何度も繰り返しつけることはできないです。

たとえば、あるテキストに、線の効果をつけて、ドロップシャドウをつけて…とやるのはOKです。でも、1つのテキストに何回も線の効果をつけることはできません。

でも、グループ化をしてやると、それが可能になります。グループ化というと、複数のオブジェクトを1つのオブジェクトとしてまとめ上げて作業するときに使いますが、べつに1つのオブジェクトを単体でグループ化しても、できちゃいます。

ということで、こんなの作ってみました。

Bのしましま

まず、普通にBというテキストを入力し、そのテキストに線の効果を指定します。

テキストを入力後、Photoshopライブ効果の線を設定

このままだと、もう一回り外に線の効果をつけることはできません。が、このBというテキストのみを選択した状態で、グループ化のボタンを押すと（もしくはctrlとG)、B単体でグループ化され、先ほど設定したはずのPhotoshopライブ効果のところの設定が消えています。でも、テキスト自体には、先ほど設定した白い線は残っています。