CSS メニューを作っちゃおう5（横メニュー1）
CSSの編集で
実際は更新されているのに・・・
リクエストは既に処理中であるか無効です
ズ～っと表示されっぱなしです・・
何とかしてほしいものです・・
CSS メニューを作っちゃおう（動画はドコ？）
CSS メニューを作っちゃおう（動画はドコ？）2
CSS メニューを作っちゃおう（動画はドコ？）3
CSS メニューを作っちゃおう 4
CSS
CSS メニューを作っちゃおう6（横メニュー2）
CSS メニューを作っちゃおう7 画像の置き換え
以前よりメニューについては説明してきましたが・・
もっとわかりやすくお願いします？
なんてリクをいただいちゃったんで・・
連休中・・頭は痛いし・・手はしびれちゃっているし・・耳が痛くて眠れません・・
本当は連休始めにアップする予定でしたが・・
な・・状態なのでこんなに遅れてしまいました・・
うまく説明が出来るか不安なんですが・・
3回に分けて説明します
1回目は全部CSSだけでやっちゃいます
2回目は背景に画像を使って見ます
3回目は背景も文字も全部画像でやります・・
まずは・・
フリースペースに<ul>と<li>を使いリスト構造でメニューを作成します
<div id="topmenu">
<ul>
<li><a href="リンク先のURL">ホーム</a></li>
<li><a href="リンク先のURL">ペ タ</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
<li><a href="リンク先のURL">リンク</a></li>
</ul>
</div>
注意！フリープラグインに貼り付けるときに改行を削除します
<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>
↑こんなように・・
ちなみにフリープラグインが文字数に余裕があって使える場合は改行は必要ありません
ホーム http://ameblo.jp/自分のID/
ルーム http://profile.ameba.jp/自分のID/
ペタ http://peta.ameba.jp/p/addPeta.do?targetAmebaId=自分のID
読者になる http://blog.ameba.jp/reader.do?bnm=自分のID
メッセージ http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=自分のID
規約とかリンク集は ↓参考にその記事の記事のURLを使います
divにid名topmenu（自由に変更下さい）をつけて
あとで・・position: absolute;で・・移動させます
ちなみに・・リンク先のURLの調べ方・・
例えばペタの場合・・・
実際にペタをクリックしてペタ画面にいってアドレスを調べる・・
（記事へのリンクやアメブロ以外のサイトへのリンクもこうすればわかります）
ペタの上で右クリックします・・・・
IE以外でしたら・・・
これでリンク先のＵＲＬがコピーされます
次はCSSです
#topmenu {
width: 760px;/*ベーシックの場合は800pxです*/
height:30px;/*高さ*/
display: block;
}
#topmenu ul {
margin: 0;
padding: 0;
height:30px;/*高さ*/
background-color: #009900;
list-style-type: none;
}
#topmenu ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
text-align: center;
font-size: 12px; /* 文字サイズ */
}
#topmenu ul li a {
border-right: 1px solid #ffffff;
padding: 9px 0 0;
display: block;
color: #ffffff;
background-color: #009900;
text-decoration: none;
}
#topmenu ul li a:hover {
border-color: #33ff99;
color: #333333;
background-color: #33ff99;
}
/*ベーシックスキン メニュー5個*/
#topmenu {
width: 800px;/*スキンの幅Ａ*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*1つの幅Ｂ*/
margin: 0 2px;/*メニューのスキマＣ*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時文字色*/
background-color:#99FF00;/*オンマウス時背景色*/
}
次はヘッダーの下にメニューを設置するスペースを作ります
これをやってみようと思われている方はすでにヘッド部分に手を加えている方が多いと思います
なので・・
#wrap{
margin-top:50px;
}
で・・・メニューを移動させます
前にもやったことのある・・
#frame {/*おまじない（すでにある場合は必要ないです）*/
position: relative;
}
#topmenu{
position: absolute;
top:0px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}
↓すでにposition: relative;を使っている場合は・・必ずしもこの位置になるとは限りません・・
#topmenu{
position: absolute;
top:340px;/*上から*/
left:0px;/*左から*/
z-index: 100;
}
これも・・見ながらやってください・・
もし・・top:0pxで途中に表示されて・・上に移動させたい場合は-(マイナス)をつければ上に動きます
top:-20px ・・ 上に20px移動します
また・・一番上に貼りついたとき・・これの方が良いや～って思ったら移動させる必要はありません
div#userNaviArea{
visibility: hidden !important;
padding:0 !important;
height:30px;
}
これでユーザーナビが消えてメニュを貼り付けるスペースが出来ます
3番目のＣＳＳの場合・・・
ヘッダー画像の幅とあわせるにはチョット技が必要になります
とりあえずはＣＳＳの中のABCの数字を変えてそれなりに？します
スキンの幅をオーバーする場合もありえます
グリーンのスキン（横幅760px）を使って説明します
（前のメニュを使っちゃたので現在存在しないメニュー項目もあります↓）
margin: 0 2px;/*メニューのスキマ*/
コレのせいで・・実は[ホーム]の左と[メッセージの]右に2pxのスキマがあります
width: 760px;/*スキンの幅*/
実際のスキンの幅は760pxですが・・うまくはまりませんでしたので・・
幅を766pxと増やして全体をleft:-3pxと左に移動させます
※計算上は2pxなので幅は764pxで-2px移動させればいいのですが・・764pxに収まりませんでしたので766pxにしました・・実際に数字を入れて試しながらやってください
フリースペースに書いたときに改行があると↓こうなっちゃいます
「CSS 横メニュー」で・・yahoo!やgoogleで検索すればいっぱい出てきます
なれたら自分だけのメニュー作りにチャレンジ下さい
次回は・・背景に画像を使ってみます・・
CSS 記事によってCSSを変えてみる・・
前回紹介した記事によってCSSを変えてヘッダーや背景を変更する方法です
見本です
http://ameblo.jp/plan-note/entry-10178214989.html
http://ameblo.jp/plan-note/entry-10178217662.html
http://ameblo.jp/plan-note/entry-10178217998.html
http://ameblo.jp/plan-note/entry-10461103072.html
やり方は・・
タグ編集エディタを使って記事を書きます
記事を書き終わったら・・
一番上にCSSを入れちゃいます
書き方はルームのフリースペースに書く時と同じです・・
<style type="text/css">ここにCSSを書きます</style>
タグ編集エディタを使う場合はルームと同様に改行はNGです
たとえば・・・
ヘッダーを変える場合は・・
<style type="text/css">#header {background-image:url(画像のURL);}</style>
※場合によっては<style type="text/css">#header {background: url(画像のURL);}</style>の方がいい場合もあります
背景を変える場合は・・
<style type="text/css">body{background-image:url(画像のURL);}</style>
※場合によっては<style type="text/css">body{background: url(画像のURL);}</style>の方がいい場合もあります
ヘッダーも背景も変更する場合は・・
<style type="text/css">#header {background-image:url(画像のURL);}body{background-image:url(画像のURL);}</style>
もちろんそれ以外でも大丈夫です・・
特別な記事の背景に画像を設定したりだとか（工夫が必要になります）カーソルを変更したりとか・・
いろいろ試してください・・
標準エディタでも書くことは出来ます・・が
標準エディタなら改行はOKですからCSSを多く設定する場合は見やすいので楽なんですが・・が
下の注意でも書いているように
タグの非表示にするたびにCSSは消えちゃいますので
記事をアップしたら絶対に編集しなおさない！って場合だけ使ってください
記念日や特別な日の記事だけチョット変えてみたい・・って～場合に使ってください
注意！
標準エディタで記事を書いてCSSを貼り付けた場合・・
HTMLタグを表示したままで「全員に公開」します
一度でもタグの非表示にするとCSS部分は消えてしまいます
なので・・記事の編集をするたびにCSSを書き加える必要があります
見本の記事は標準エディタを使っています
なので・・ソースを見るとCSSは改行しています
この場合・・記事を編集したい場合は・・
ソースを表示してCSSの部分をコピーしてから記事の編集をしないと
どんなCSSを設定したか忘れちゃっている場合元に戻せなくなります
なので・・コレをやる場合はタグ編集エディタをお薦めします
1ページに3記事以上表示している場合
古い記事に書かれているCSSが有効になります
頻繁に使いたい場合は1ページ1記事表示にしたほうがいいです
3カラムのスキンで右サイドバーにフリープラグインが配置してあってCSSが書かれている場合
記事に書いたCSSよりフリープラグインに書かれているCSSが優先します
記事でヘッダーを変更しても・・
フリープラグインでランダムヘッドなどをやっている場合はそちらが優先されます
その場合はフリープラグインを右サイドに移すか・・
記事に書くCSSに !important を使って最優先にします
↓コチラを使われている場合は動作しません
その場合は↓コチラなら大丈夫ですので変更下さい
やっぱし・・ 調子が悪いです・・
なかなか回答のコメントが出来なくてすみません
また・・あらたにコメントしたくても見えなくなっていますので・・・
ごめんなさい
このところ・・また目が回るようになってきました
入院前のようにグルングルン回ることはないのですが
軽くクラ～っと来ることが度々あります
夜中・・寝ている最中に吐きそうになって飛び起きちゃうとか
パソコンも2.3時間くらいで画面がぼやけて見えたり2重に見えたりで・・
目の方もなんかおかしいです？
今日・・メチャクチャお腹がすいたので電車賃を使って隣の駅前の
ご飯のお代わり自由のお店へ夕飯を食べに行きました・・
思いっきり食うぞ～・・・
まずはご飯を半分ほどガバガバガバッっと・・
ふ～・・って息をしたとたん・・
ご飯が赤くなっていきます
また・・食事の最中に前ぶれもなく鼻血・・
まだ・・おかずに手もつけていないのに・・
さすがに食欲がなくなっておかずだけ半分ほど食べて帰ってきました
でも・・喜んでください？
いつものことですが・・
調子が悪いときほどヘンな事？思いつくもので・・
http://ameblo.jp/plan-note/entry-10178214989.html
http://ameblo.jp/plan-note/entry-10178217662.html
http://ameblo.jp/plan-note/entry-10178217998.html
http://ameblo.jp/plan-note/entry-10461103072.html
コチラの記事の違いがわかりますか？
記事によってヘッド画像も背景画像もフレームにつけている背景画像も違っています・・
これらはランダムではありません
記事によってCSSを設定しています
他のページとも比べてください
記事にする必要もないくらい簡単なことです
記事を書くときにCSSも一緒に書くだけ・・・
（2・3の注意事項はあるのですが・・）
ただ・・毎日は面倒です・・と、思います
なんかの記念日だけヘッド画像や背景画像を変えてみたり・・
5月5日の子供の日の記事にだけこいのぼりの付いたヘッダーにしたりとか・・
でも他の日の記事にはいつものヘッダー・・
楽しそうじゃないですか？
とりあえず・・今日は休みます・・
また元気になったらちゃんと記事にしますので楽しみにしていてください
ごめんなさい・・
カーソル素材をお借りしてこのページだけカーソルを変えてみました
使い難かったらすみません・・でも・・他のページは普通のカーソルですから・・