日本ブログメディア新人賞
ライブドアさまで・・
賞金100万円だってさ
ライブドアに限っていませんからアメブロでもOK！
応募資格：
得意分野や専門分野の情報をすることで、世の中の役に立つオリジナルコンテンツを提供したい方
2007年1月1日以降に開設されたブログ
締め切り：
2010年11月30日18:00まで
わたしは・・・
著作権、肖像権等第三者の権利を侵害していないもの
ここでＮＧ・・・
アメブロや他の画像を勝手に加工して使っちゃっているからね・・・
残念！！ （覚えていたら・・波田陽区ぽく・・？ ）
変な連休が続いたので・・・
タイミングが合わなくて
もう病院に１週間もいっていません
耳の方もあまり気にならなくなってきたような？
でも・・たぶん良くはなっていないんだと思うんです
ただ慣れちゃっただけのような気がします
来週病院に行っても症状をうまく伝えられないような気がしています
も～・・・いいかっ？
よくないけど・・・
すみませんが少しお休みさせてください
メッセージの方も返事が出来そうにありませんので閉じさせていただきます
ごめんなさい
よろしくお願いします
CSS セレクトメニュー
リクです
セレクトメニューですからテーマはjavascriptなんですが・・
まっ・・・ 色を変えたりとかＣＳＳの説明もしたいんで・・ＣＳＳって～ことで
ホーム とか トップ (ブログに設置する場合)
http://ameblo.jp/あなたのID/
ルーム (ブログに設置する場合)
http://profile.ameba.jp/あなたのID/
ブログ (ルームに設置する場合)
http://ameblo.jp/あなたのID/
なう
http://now.ameba.jp/あなたのID/
ピグの部屋
http://pigg.ameba.jp/?targetAmebaId=あなたのID
メッセージ
http://msg.ameba.jp/pub/send/index?toAmebaId=あなたのID
ペタ
http://peta.ameba.jp/p/addPeta.do?targetAmebaId=あなたのID
プレゼント
http://present-shop.ameba.jp/shop/top?toAmebaId=あなたのID
読者になる
http://blog.ameba.jp/reader.do?bnm=あなたのID
アメンバーになる
http://amember.ameba.jp/amemberRequest.do?oAid=あなたのID
本当はformタグが必要なんですが・・ルームで使う場合タグが表示されてしまいますので・・
書いていません・・動くからいいか？
基本形 （サンプルなのでリンクはしていません）
ブログにつける場合はフリープラグインに
<select onChange="location=this.options[this.selectedIndex].value">
<option > ▼ 選んでください ▼ </option>
<option value="http://ameblo.jp/あなたのid/">とっぷ</option>
<option value="http://profile.ameba.jp/あなたのid/">るーむ</option>
<option value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid">めっせーじ</option>
<option value="http://blog.ameba.jp/reader.do?bnm=あなたのid">どくしゃ</option>
<option value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid">ぺ た</option>
</select>
optipnの avlueにリンク先のURLを書いて メニュー項目を決めます
ルームにつける場合は改行を削除してからルームのフリースペースに
<select onChange="location=this.options[this.selectedIndex].value"><option > ▼ 選んでください ▼ </option><option value="http://ameblo.jp/あなたのid/">とっぷ</option><option value="http://profile.ameba.jp/あなたのid/">るーむ</option><option value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid">めっせーじ</option><option value="http://blog.ameba.jp/reader.do?bnm=あなたのid">どくしゃ</option><option value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid">ぺ た</option></select>
説明ではメニュー数を5項目で説明していますが・・いくつでもかまいません
背景色や文字色を変える場合は・・
background-color:#99ffff;/*背景色*/
color:#0000ff;/*文字色*/
↑禁止タグが入っていて記事には貼り付けられないので画像です
<select style="background-color:#99ffff;color:#0000ff;" onChange="location=this.options[this.selectedIndex].value">
<option > ▼ 選んでください ▼ </option>
<option value="http://ameblo.jp/あなたのid/">とっぷ</option>
<option value="http://profile.ameba.jp/あなたのid/">るーむ</option>
<option value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid">めっせーじ</option>
<option value="http://blog.ameba.jp/reader.do?bnm=あなたのid">どくしゃ</option>
<option value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid">ぺ た</option>
</select>
・・・・・ココからはブログとルームでタグが違ったり
見ているブラウザーによって表示が違ったりします
了解の上で使ってください
わからなければココから下はやらないで下さい
次はマウスがのった時に説明を表示します
上の基本形に赤字部分を加えます
ブログの場合はフリープラグインに・・
<select onChange="location=this.options[this.selectedIndex].value">
<option >▼ 選んでください ▼</option>
<option value="http://ameblo.jp/あなたのid/" title="トップに戻るよ～" >とっぷ</option>
<option value="http://profile.ameba.jp/あなたのid/" title="ルームだよ～" >るーむ</option>
<option value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid" title="返事遅れても怒らないでね～" >めっせーじ</option>
<option value="http://blog.ameba.jp/reader.do?bnm=あなたのid" title="マジで～" >どくしゃ</option>
<option value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid" title="いつもすまないね～ぇ" >ぺ た</option>
</select>
※注意：これが表示されるのは一部のブラウザーで見たときだけです
IE6 ：× IE7 ：○ IE8 ：○ Firefox ：○ Chrome ：× Safari(WIN版) ：×
ルームの場合は改行を削除してからルームのフリースペースに・・
<select onChange="location=this.options[this.selectedIndex].value"><option >▼ 選んでください ▼</option><option value="http://ameblo.jp/あなたのid/" title="トップに戻るよ～" >とっぷ</option><option value="http://profile.ameba.jp/あなたのid/" title="ルームだよ～" >るーむ</option><option value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid" title="返事遅れても怒らないでね～" >めっせーじ</option><option value="http://blog.ameba.jp/reader.do?bnm=あなたのid" title="マジで～" >どくしゃ</option><option value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid" title="いつもすまないね～ぇ" >ぺ た</option></select>
次は見ているブラウザーによって見え方が違ってきます
CSSで見た目を変えます
上に赤字部分のclass名を加えてCSSで装飾します
ブログの場合はフリープラグインに・・
<select class="selectmenu01" onChange="location=this.options[this.selectedIndex].value">
<option class="sm0" >▼ 選んでください ▼</option>
<option class="sm1" value="http://ameblo.jp/あなたのid/" title="トップに戻るよ～" >とっぷ</option>
<option class="sm2" value="http://profile.ameba.jp/あなたのid/" title="ルームだよ～" >るーむ</option>
<option class="sm1" value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid" title="返事遅れても怒らないでね～" >めっせーじ</option>
<option class="sm2" value="http://blog.ameba.jp/reader.do?bnm=あなたのid" title="マジで～" >どくしゃ</option>
<option class="sm1" value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid" title="いつもすまないね～ぇ" >ぺ た</option>
</select>
全体を selectmenu01 最初に見えている部分を sm0 後は sm1 と sm2 で交互になるようにしています
※項目ごとに全部変えたい場合は class名をam0～sm6（上の場合）と全部違うclass名にします
※セレクトメニューをいくつもつける場合はclass="selectmenu01"と別のclass名をつけることで違ったCSSのメニューにすることが出来ます
ブログの場合はCSSの編集でCSSの最後に・・
.selectmenu01{
color:#333333;/*文字色注1*/
background-color:#ffffff;/*背景色注2*/
border:3px dotted #00ffff;/*枠線*/
width:160px;/*横幅*/
text-align:center;/*中央寄せ注2*/
}
.selectmenu01 .sm0{
color:#0000ff;/*文字色*/
background-color:#00ffff;/*背景色*/
background-image:url(背景画像のＵＲＬ);/*注3*/
}
.selectmenu01 .sm1{
color:#ff0099;/*文字色*/
background-color:#ff99ff;/*背景色*/
background-image:url(背景画像のＵＲＬ);/*注3*/
}
.selectmenu01 .sm2{
color:#3300ff;/*文字色*/
background-color:#ccffff;/*背景色*/
background-image:url(背景画像のＵＲＬ);/*注3*/
}
注2：各項目にCSSで背景が設定されている場合はそちらが優先されます
注3：中央よせや背景画像はFirefoxで見たときだけ有効になります
↑ このように見えるのはFirefoxで見ている場合だけです ↑
ルームにつける場合は・・改行を削除して赤字部分を加えてから ルームのフリースペースに
<div class="selectmenu01"><select onChange="location=this.options[this.selectedIndex].value"><option class="sm0" >▼ 選んでください ▼</option><option class="sm1" value="http://ameblo.jp/あなたのid/" title="トップに戻るよ～" >とっぷ</option><option class="sm2" value="http://profile.ameba.jp/あなたのid/" title="ルームだよ～" >るーむ</option><option class="sm1" value="http://msg.ameba.jp/pub/send/index?toamebaid=あなたのid" title="返事遅れても怒らないでね～" >めっせーじ</option><option class="sm2" value="http://blog.ameba.jp/reader.do?bnm=あなたのid" title="マジで～" >どくしゃ</option><option class="sm1" value="http://peta.ameba.jp/p/addpeta.do?targetamebaid=あなたのid" title="いつもすまないね～ぇ" >ぺ た</option></select></div>
<style type="text/css">.selectmenu01 select{color:#333333;background-color:#ffffff;border:3px dotted #00ffff;width:160px;text-align:center;}.selectmenu01 .sm0{color:#0000ff;background-color:#00ffff;background-image:url(背景画像のＵＲＬ);}.selectmenu01 .sm1{color:#ff0099;background-color:#ff99ff;background-image:url(背景画像のＵＲＬ);}.selectmenu01 .sm2{color:#3300ff;background-color:#ccffff;background-image:url(背景画像のＵＲＬ);}</style>
※ルームにつける場合はselectにidやclassをつけると保存できませんのでdivで囲います
今回のは質問ナシでお願いします m(_ _)m