HOME » css , generator , html , tips , webservice » オサレなメニューバーを作ろう
オサレなメニューバーを作ろう
2005/02/12 | Comments & Trackbacks : 33
うちのサイトのトップ画像のすぐ下にナビゲーションバーというかメニューバーがついてます。
こいつがTOPの見た目をすっきりさせてくれる大層粋なヤツなのですが、これをものすごく簡単に作る事ができるサイトがあるそうです。
「SUNDAY MORNING BLUE」さんのこちらの記事経由、「Rainy Days,Sunny Days」さんのこちらの記事で紹介されています。
Accessify.com：list o matic
英語のサイトですが、日本語入力可なので気軽に使えます。
試しに使ってみましたので、以下簡単に操作法を説明。
- 「How many links do you want in your list?」の横についているプルダウンボタンから、メニューにしたい項目数を選ぶ。うちなら「12」ですな。
- リンクにタイトル（メニューバーにマウスカーソルを載せると文字が出てきますよね？それです。）を付けるかどうか決める。付ける場合は「Yes please – gimme titles」にチェックを入れて、すぐ下の「NEXT」ボタンをクリック。
- 「Link Text」にリンクさせる文字、「Link Title」にリンクのタイトル、「Link Destination (href)」にリンクさせるURL・URIを入力。できたら「NEXT」。
- 10種類のリストスタイルが表示されるので、好きなものを選んでチェックをいれて「NEXT」。
- リスト表示のためのHTMLとCSSのソースが出てくるので、「Here is the HTML for this list:」以下をメニューバーを表示させたい任意の場所にコピペ、「Here is the CSS for this list:」以下をスタイルシートに追加記入して再構築をかければ完成です。
各ボタンの色は全てCSSで制御されているので、外枠だけ好みのタイプを選んで、あとは自分好みにカスタマイズできるのがかなり魅力。
作業も元のファイルさえ用意してあれば5分もあれば終わっちゃいます。
実はこれを使ってリニューアルするつもりだったんですわ。
自分のサイト用のソースもきちんと作ったんですけど、だんだんとここに置くにはちとデコライティブ過ぎやしないか？って思えて来ちゃいまして。
結局、文字数を削れるだけ削って、スペースが空いた分フォントの大きさをあげて見やすく調整するくらいでリニュ作業終了ｗ。
でもせっかくやったんだしねぇ、と言う事で記事に仕立て上げてみました（苦笑）。
ちなみにうちのメニューバーはここまで凝った作りをしておりません。
HTMLはこんな感じ。
<div id="globalnavi"> <a href="http://blog.open-arms.biz/about.php" title="このサイトについて">About</a> | <a href="http://blog.open-arms.biz/profile.php" title="管理人プロフィール">Profile</a> | <a href="http://blog.open-arms.biz/link.php" title="リンク">Link</a> | <a href="http://blog.open-arms.biz/alltblist.php" title="トラックバック一覧">Trackback</a> | <a href="http://blog.open-arms.biz/mybloglist.php" title="MyBlogList">MyBlogList</a> | <a href="http://blog.open-arms.biz/blogpeople.php" title="BlogPeople">BlogPeople</a> | <a href="http://blog.open-arms.biz/koikiuser.php" title="小粋なUserList">Koiki</a> | <a href="http://blog.open-arms.biz/tbpeople.php" title="おんなざかりぴーぷるん">Onnazakari</a> | <a href="http://blog.open-arms.biz/myclip.php" title="MyClip">MyClip</a> | <a href="http://blog.open-arms.biz/search.php" title="検索ページ">Search</a> | <a href="http://blog.open-arms.biz/mail.php" title="メールはこちらから">Mail</a> | <a href="http://moso.upper.jp/bbs/apeboard_plus.cgi" title="掲示板はこちらから">BBS</a> </div>
スタイルシートの設定はこんな感じで、マウスを載せた時の動きは他のリンクと全く一緒の設定です。
/* トップの案内*/
#globalnavi {
text-align: center;
background-color: #d1d1d1;
font-size: 11px;
width: 800px;
color:#5C7554;
line-height: 200%;
margin-top: 1px;
}
これでもこの程度には表示できます。
と言う訳でナナさん、ネタ提供ありがとうございました。
Related Posts
- Tags : css , generator , html , tips , webservice | TrackBack URL
- Prev : コメント欄の幅を変える・日付表示を自由に変える | Next : 写真みたいな枠を付けよう【MT用小ワザ付き】
Comments & Trackbacks : 33
もそさん、こんにちは！トラバありがとうございます。
もそさんのblogを見たりしてメニューバーをつけたかったのですが、自力ではなく記事内のサイトに頼ってできあがりました。
もそさんの記事は設置の説明もあって親切ですね！これからもお世話になります。
はじめまして！TBありがとうございます。
私はlist o maticがなかったら、メニューバーなんてモノは付けられなかったのですが、
ご自分で出来ちゃったんですね～。すごいです！
BLOGPEOPLEにも、勝手ながら登録させていただきました。
いろいろと参考になることが書いてあるので、また寄らせていただきますね！
便利なサイトがあるんですね。
でも もそさんとこ、今のままで じゅーーぶん オサレですよ。
(//∇//) テレテレ
こんにちは～。
これ便利ですね。私もお試ししてみましたが、すごい楽チンです！ｗ
意味もなく導入しようかなぁとおもってしまいました～。
世の中便利になったものですね～。なんちゃって。
わぉ、あたしが元ネタですか？（笑）
ただいま外出先にて、ちょいと試してみることが出来ないのですが、
なんとも親切なモノがあるんですね、びっくり。
ところで、あたしがメニューバーを置けなかった理由は、
リンク先のページをどう指定していいのかわからなかったからなのね。
開くページをターゲット指定すればいいと思うのだけれど、
そもそも、記事欄の名前がわからないのと、
そのために、htmlをひとつ増やせばいいのかしら。。
どうやって新しいページを作って読み込めばいいんだろ。
ココログもMTと同様だと思うのだけれど、
むむむ、説明するのも難しいな（笑）
こんばんは～！
初めまして！
遊びに来ていただいてありがとうございますぅ♪
このナビゲーション、ちょうどやりたいと思ってたんですよ！
でも難しいのかなぁ～って敬遠してたんです。
こんなに簡単な方法があるとは！！
今度やってみますねo(*^▽^*)o
こんばんはー。
メニューバーはこうなってたんですね。なるほど～。
じつは私､自分のところのデザインをどうしようか悩んでいるとき、いろいろなところを手当たり次第見まくってたのですが､こちらを訪れたとき感激して「これだぁー」って叫んでしまいまして。いろんなところを パクらせて 参考にさせていただいてます。（自分のところはダメダメサイトなので、公言するのは申し訳ありませんが・・）
この場を借りて厚くお礼申し上げます。ありがとうございます。
前から気になってましたよん。もそさんのサイトのメニューバー。
日々進化を遂げてて とても参考になりますー。といっても私はこっそり見てるだけ (~_~;)
作る能力はありませんが・・。カスタマイズの参考にさせてもらいます。やっと本気でカスタマイズをしなければならなくなったので これからも頼りにしております～♪
ナビゲーションメニュー設置
もそさんところのナビゲーションメニューがずっと気になっており、付けたいなぁと思っていたところ、もそさんところと我楽さんところで詳しい設置方法が紹介されてました…
もそさん ワタシも実は真似したかったひとりなんです。(^^ゞ
だって、こちらのはとてもシンプルで分かりやすくてオサレでしょ。（＾ｕ＾）
パクリ専門ですんません。
ご紹介のサイトも面白そうですね。
ちょいと試してみたくなってきましたよ。(笑)
サイドバーのモジュール化も頭の片隅にあったんですが
重い腰が上がらなくてほったらかしなんです。
おおーコメントプレビュが！ 成功おめでとうございます。
みなさん どんどん進んで行くんですね。
ワタシってやっぱりのんびりペースだわ。(笑)
＞あすかさま
いえいえ、こちらこそナイスな情報をありがとうございました。
サイトの使い方とかって、以前の記事ではかなりいい加減に書いてたんですよね。
でもそれだと後で見て、自分が何をやったのか分からなくなる事に最近気がつきまして（苦笑）。
きちんと覚え書きをしておかなくちゃなぁと思って、きちんと書いてみました、はい。
＞さららさま
いやぁ、このサイトの存在を知ってたら、私も自力で作らなかったかもです。
これしか方法が思いつかなかったんですよね、正直な所（苦笑）。
試行錯誤してどうにか形にしたって感じでしたよぉ。
また気軽に遊びに来てくださいね♪
＞さえらさま
もうっ、さえらさんったらーっ(ﾉ´∀｀*)
お世辞言っても何も出ないぞ？？
私も照れちゃうからおだてるのやめーい。
＞蓮華さま
ですよねー♪
意味もなく導入したくなる可愛さだと思いますぅ。
外人さんは便利なものを思いつくものだなぁ、と感心しちゃいました。
＞ナナさま
おお、元ネタさま登場っ！！
リンク先のページをどうするか、ですかぁ。
多分どうにかできると思うので、あとで連絡します。
私も勉強になるので、一緒に研究しません？
＞mikichinさま
この間はどうもおじゃましました♪
メニューバー、ジャストタイミングでした？
それはそれはよかったですぅ。
これは本当に簡単なので、試す価値ありありですよん。
＞ふーりんさま
「これだぁー」って言ってくれたんですかｗ。
いやぁ、照れるなぁ(ﾉ´∀｀*)
どこパクったのははよく分かりませんが（苦笑）、パクリ上等、無問題ですよ。
でも公言してくれるともっとうれしかったなぁ、なーんてね。
ありがとうと言われたいお年頃と言う事にしておいてください。
＞kuppyさま
ええーっ、メニューバー気になってたんだ？
知らぬは本人ばかりなり、ってやつですかね（苦笑）。
これは多分livedoorでも同じ手法でいけるはずなので、気になるようなら頑張ってやってみてね。
分からなかったらいつでも質問どぞー。
＞miaowさま
ここにもいたー！ こんな事ならもっと早く記事上げしておけば良かったですねｗ。
モジュール化は一度やっちゃうと本当に便利。
デザインを変えた時の再構築の手間が桁違いに楽なのが一番の魅力だと思います。
やっただけの効果はあると思うので是非是非。
コメントプレビューは紆余曲折の末にようやく付けられました(つД`)
欲しかった機能なのでねぇ、ようやく動いた時は感涙ものでした。
オサレなめにゅ
やっとできましたです。 ココのばやい、オサレかどうかは別として、ですが。 ずーっ…
はじめまして♪
いつも 拝見させていただいてます
前々から メニューバーをつけたくて
今日 リニューアルしたので こちらを参考にさせていただいて
つけることが出来ました
どうもありがとうございますm(__)m
これからも よろしくお願いします
こんばんわ！
ご紹介されてるサイトいいですねーー
今度リニュする時に取り入れさせていただこうかなって思います。
今のナビゲーションバーはなんつーことないつまんないやつなので今度はぜひオサレになりたいです！
[MT]メニューバー設置
**ORANGE**様経由で今日の覚え書き様の「オサレなメニューバーを作ろう」を参考につけてみました。 今までは左側にバナーで設置していたのだけれど。これで模様…
■まゆみさま
どーもー、はじめましてヽ(´ー｀)ﾉ
いつも見て頂いているそうで、ありがとうございます。
頭悪い内容ばっかりでスイマセン。
メニューバー、結構簡単につけられたでしょう？
ページも軽くなるしお薦め小技です。
■lomoさま
でしょう！このサイトいいんですよっ、といいつつ別サイトを参照して、新たなメニューバーに切り替えてしまいました（苦笑）。
そちらも是非見て頂きたいなぁ、なーんてｗ。
lomoさんとこはすごいですからねぇ。まさにワザの宝庫。
勉強になりまする。
オサレなメニューバー設置
すべてのページにブログメニューバーを画像の下に設置しましたん。 参考にさせても…
コメントして頂いてどうもです(* ^ーﾟ)ﾉとっても分かりやすく参考になりました。
うちもブログリスト登録させてもらいましたー♪
メニューバーからズラーっと出るのが羨ましい・・・。いつか勉強してうちもやってみたいです☆彡
■ひろあささま
こんにちは！ お役に立てたようで幸いです。
プルダウン式のメニューバーも、ポイントさえきちんとつかんでいればそんなに難しい作業ではないと思いますので、なれたらチャレンジしてみてくださいね。
メニュー
ちょっと前から 3カラムから2カラムに変えたくなったんだけど なかなか 手が出せ…
もそさん おされなメニュー 参考にさせてもらいました。
ありがとうございました。
TBしました。
■Ranさま
いえいえ、どういたしまして！
おやくにたてて幸いです。説明わかりにくくなかったですか？？
メニューバー
ようやく人様に見せることができるものが出来た(*^▽^*)いろいろなサイトで見か…
初めまして。小粋空間さん経由でこのサイトを知り、以来ず～～と
ロムっていました（＾＾；
このたびもそさんの記事を参考にメニューバーを設置しました。
いろいろとありがとうございました。これからもひそかに（笑）おじゃまします。
このｂｌｏｇのファンです♪
ＴＢもさせてもらいましたm(_ _”m)
■ゆこりんさま
どもども、はじめまして！
そんなひそかになんて言わずにおおっぴらに遊びに来てくださいよぉ（´∀｀）
こっそり読んで頂いても全然OKなんですけどね、どうせならおしゃべりしたいしｗ。
しかもファンとか言ってくれてたら、余計にお友達になりたいしっ。
と、いうわけでこれからもよろしくお願いします。
もそさん、先ほどはわざわざ来ていただいて光栄です。
ＴＢ先間違えました（ＴＴ）
プルダウンの方でした。さっそく日記の方のＵＲＬ修正しますm(_ _”m)
それとｌｉｓｔへの登録ありがとうございます。
私のｌｉｓｔはもうひとつのｂｌｏｇのを貼り付けただけだったので、ご迷惑を
おかけしました。
独自のリストを作成するつもりですが、そちらの方をする前にとりあえず
メニューバーをつけたかったもので・・・(∩。∩;)
「Comment Preview」、いいですね～♪私も設置したいです(o^∇^o)
「今日の覚書」、お気に入りに入れて毎日拝見しています。
これからもよろしくお願いします。
■ゆこりんさま
いえいえ、こちらこそリンク張り返して頂いちゃってありがとうございました＾＾。
おかげでようやく大台が射程圏内に…、うえっへっへ。
Comment Previewは本当に便利ですよ。
うちは「確認」用のテンプレートを作るのがだるくて、「投稿」ボタンしかないので、この機能を付けるのが夢だったんですよ。
誰が一番楽してるかって、私が一番楽をしているという（苦笑）。
ナビゲーションバーを付けたい
只今試験的にブログのデザインをオリジナルソースからいじってデザインをいじくってい…
MTカスタマイズ関連、そろそろ書いとけっ!【リニューアル編】
■この度、リニューアル作業と共に色々とお世話になりました＜（_ _）＞
メニューバー設置！ほかあれこれ整理整頓。
シンプル＆スッキリ表示にしたくて、メニューバーをこさえてみました。 参考にしたの…
ずいぶん前のエントリーにＣＭ＆ＴＢで失礼します。
とても参考になり、オサレなメニューバーを簡単に設置することができました！
ありがとうございました！
これからも、参考にさせていただきますね。
■yura.さん
いえいえ、いつのエントリにでもコメント大歓迎です。
どーぞお気軽に（笑）。
こういうサイトって、お手軽にオシャレなパーツを作る事ができるので、シロートには有り難い存在だと思います。
もっといろんなバージョンができる事希望。
ナビゲーションバーを作りました
昨日に引き続き、あったら便利だなぁと思っていたナビゲーションバーを作りました。 …