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