CSS メニューを作っちゃおう（動画はドコ？）2
IE以外でうまく表示できなくて
あれこれやっていたら遅くなってしまいました・・・・
mac と Safari 以外では動作確認がとれました
ヴァージョン違いでwinでも表示がおかしかったら教えて下さい
見本 http://hama-sush-jp.pro/exlink001/
これからCSSでメニュー部分を作ります
自分で作れるよって方はスルーしちゃってくださいな
とりあえず・・・・
誰にでも出来るように
↓ココを使って見ます
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/default.php
メニュー項目数を選んで、メニュー項目とURLをいれて、どんなメニューにするか選ぶだけで
HTMLとCSSを吐き出してくれます・・・・
まずは上をクリックでList-O-Matic にいきます
Use the original version of List-O-Matic をクリックします
メニュー項目の数を設定します
※出てきたHTMLはフリースペースにおきますので
文字数節約のためリンクタイトルは使いませんのでチェックは外してください
前回、用意したメモから項目とURLをコピペしていきます
もし、フリースペースに余裕があってリンクタイトルもつける場合は
前の画面でチェックしたままでこの画面に来て赤丸部分にタイトルを入れてください
（ホームに戻ります・・・ リンクの説明を入れます マウスが乗った時に表示されます）
ここから楽しくなりますよ
上が出来たらどんなメニューにするか選択します
下から好みのメニュー・・横でも縦でも好きなタイプを選んでください
※中にはアメブロと相性が悪いのもあります・・・・
実際に設置してみて表示が崩れたりした場合は
悩むよりここから違うタイプに変更しちゃってください
※id と class を選択できますが １ヶ所でしか使いませんので id のままで・・・・
次のページに移ると
今、選択したメニューが実際に現れます
マウスをのせたりしてこれでOKでしたら
下の Here is the HTML for this list: に HTML が
Here is the CSS for this list: に CSS が出ていますので
枠内で 右クリック → すべて選択 → コピー メモ帳とかにコピペしておきます
メッセージボード、フリースペース、フリープラグインなどに貼り付けます
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://hama-sush-jp.pro/exlink/">ホーム</a></li>
<li><a href="http://profile.ameba.jp/exlink/">ルーム</a></li>
<li><a href="http://photo.ameba.jp/user/exlink/">フォト</a></li>
<li><a href="http://vision.ameba.jp/search/user.do?user=exlink">動 画</a></li>
<li><a href="http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=exlink" target="_blank" >メッセージ</a></li>
</ul>
</div>
※メッセージだけは新しいウインドウを立ち上げますので aタグに target="_blank" を加えます
ＣＳＳに貼り付けます
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}
#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }
#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
メッセージボード、フリースペース、フリープラグインで使用するならこのままで使えます
が、メニュー項目が多いと折り返してしまいますので
その場合は項目を１行で収まるように少なめにするか、縦型のメニューにして下さい
見本 http://hama-sush-jp.pro/exlink001/ 左サイドに付けてあります
メッセージボードにもサイドバーにも配置したいって場合は
id="navcontainer" id="navlist" ココのid名を変更して（適当でOK）から設置してください
それぞれのHTMLとCSSのid名は同じにしておいてメッセージボード用とサイドバー用のid名は違うid名にしてください
※フリースペースに貼り付ける場合はアメブロのエディタが余計な<br>（改行）を
勝手に入れてしまいますので削除しないと表示がおかしくなります
<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www .">ホーム</a></li>
<li><a href="http://www .">アメンバー</a></li>
<li><a href="http://www .">読 者</a></li>
</ul>
</div>
メッセージボードに貼り付ける場合はHTMLを表示でこのまま貼り付けてください
上のようなコピーしたままでフリースペースへ貼り付けると改行が付けられてしまいます
ので、↓このようにつなげちゃってからフリースペースに貼り付けてください
<div id="navcontainer"><ul id="navlist"><li><a href="http://www .">ホーム</a></li><li><a href="http://www .">アメンバー</a></li><li><a href="http://www .">読 者</a></li></ul></div>
他にもＣＳＳメニュージェネレータはたくさんあります
日本語を入れると文字化けする場合がありますが
メニュー項目以外はそのまま使えますので
ダウンロードやコピーしたあとで文字化けしたメニュー項目を訂正すればＯＫです
まっ、パターンみたいなのがあってやっているうちに自分で作れるようになります
IzzyMenu.com
http://www.izzymenu.com/
CSS Menu Generator
http://www.cssmenumaker.com/
メニュージェネレータではありませんが・・・・
Drop Down Tabs (5 styles)
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
次はタイトル部分に設置します・・・・・
って、タイトル部分がどうなっているかはみなさんバラバラですから・・・・
それよって出来たり出来なかったりで・・・・
うまく説明できる自信がありません・・・・・
ど～しましょ・・・？
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）3
CSS メニューを作っちゃおう 4
CSS
メニューを作っちゃおう5（横メニュー1）
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え