またブログのトップメニューを変えてみた
#13/8/23追記
全面的にブログのデザインテーマを変更しました。よって以下に書いてあることは現在は当てはまらないところもありますので、ご注意ください。
詳細はこちら(とりあえず気が向いたので、ブログのデザインテーマを作ってみました)
実は、変えてから数日は経っていますが、今さらながらの周知です。
今までもトップメニューについてはいろいろ試行錯誤してきたんだけど、IE8でbackgroundイメージがちゃんと表示されていなかったり、いまいち見た目がダサかったりしていたので、またトップメニューを変えてみました。ちなみにメニュー変えたのは、これで3度目だったりします(笑)
メニューの種類は変えていないけど、ウィンドウ上部に固定したのと、マウスオーバーでドロップダウンメニューにしたところがポイント。
このドロップダウンメニューの動きにはCSSのtransition効果(動きに時間差を与えられる効果)を使っているので、IE以外のモダンブラウザなら、ちゃんとしたこちらが意図した動きしてくれます。自分ではこれ結構お気に入りです。
#ただあいかわらずIEブラウザでは本来の動きしてくれないんですよねぇ・・・orz。
#このtransition効果って、最初見たとき「おお!!すげー!これどうやってんの??」って感動すら覚えたくらいなんですけどね。実にもったいない・・・。
あと、ここ重要!
これは「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」というブログの情報があったからこそ実現できました。
このブログではcssやhtmlの設定内容が懇切丁寧に説明されていて、めちゃわかりやすいのでみなさんにもお勧めです。#このブログのエントリ記事って画面キャプチャしたり、サンプルページ用意したりとか、手間がハンパなくかかってますよ。
#作るのさぞかし大変だったろうと容易に想像できます。ほんと頭が下がる思いです。このブログには、他にもいろんなcssテクニックが載っていて、きっとご自分のブログにも応用できるものがあると思うので、興味のある方はぜひ訪れてみてください。
ただし、載っている情報は基本の雛型レベルなので、そのままhtmlやcssをコピーしただけではまともに動きません。
ちゃんと、こちらの自分の環境(デザインテーマ等)に合わせて、位置やサイズ調整したり、色も好みのものに変更したりなど、カスタマイズが必要なので、cssやhtmlの知識は必須です。
でも今はググれば、この辺の知識はすぐに手に入るので、そんなに大変なことでもないと思います。
#実際、自分も最初は知識レベル0だったけど、なんとか実現できたし。
これも勉強の一つなのでぜひやってみることをお勧めします。
ちなみに自分がメニューを作った時のカスタマイズ手順も「プログラミング」カテゴリーにエントリ記事として追加したいと思ってますが、そもそも自分でもいまいち理解しきれていないのと、デザインテーマによってカスタマイズ箇所が思いっきり変わるので、他の方の参考になるか自信がないですが・・・。
できるだけWebparkさんの説明に似せて、わかりやすいよう作ってみるつもりです。ただ時間がかかるのでもうちょっと待ってね。
#13/6/30 (日)追記:
時間はかかりましたが、一応この「トップ位置固定メニュー」のエントリ記事はアップしました、が・・・。
やはりデザインテーマによって、あまりにもCSS設定値が違うため、コピペすればすぐ動くという簡単なものではないことだけは確かで、正直言って難易度は高めです。
それで本当に公開していいものか悩んでしまい、こんなに時間がかかってしまいました。
CSSなんてちょろいよ?って方なら、自分のブログ用にカスタマイズするのは余裕でできると思いますが、そもそも「CSSって何」ってレベルだったりすると、やめておくか、勉強を兼ねてチャレンジしてみるか、のどちらかになると思います。
エントリ記事はこちら「はてなブログでトップ位置固定のメニューを作成する」です。
あと最後に、以前のエントリ(もう勘弁して下さいIE先生)でも紹介したように、IE8でこのブログのトップページを見ると人魂にしか見えなかった吹き出しも、右側にあったメニューがなくなりスペースが空いたので、ちょっとだけ女の子が見えるよう表示を変えました。(でも相変わらず画像は中途半端に切れてるorz)
でも、これでちゃんと吹き出しだとわかってもらえると思う(笑)