CSS ユーザーナビエリア
2008/12/16
またまたアメブロの勝手な変更により
http://ameblo.jp/exlink/entry-10178945284.html
こちらをどうぞ
アメブロ側の変更により
ユーザーナビエリアがブログ上部に現れて消し方等の質問が増えてきました・・・・
消し方は去年の１１月の記事のままですが文字の色等の変更方法も含めて再度アップします・・・
↓何もしない場合
↓消しちゃいます
/*ナビゲーションリンク消す*/
div#userNaviArea{
display: none;
}
↓スキマはそのままで消しちゃいます
/*ナビゲーションリンク消す*/
div#userNaviArea{
visibility: hidden;
}
↓ニックネームの文字色、サイズ変更
/*ユーザーナビ ニックネーム*/
div#userNaviArea a#userNickName{
color:#ff0099 !important;/*文字色*/
font-size: 15px !important;/*文字サイズ*/
padding-top:0px !important;/*上の位置調整*/
}
※サイズを小さくした場合上にずれてしまうのでpadding-topに数字を入れて横と位置を合わせます
↓ナビゲーションの文字色、サイズ変更
/*ユーザーナビ ナビゲーション*/
#userNaviArea ul#navigationList,
#userNaviArea ul#navigationList a{
color:#ff0099;/*文字色*/
font-size:15px;/*文字サイズ*/
padding-top:0px;/*上の位置調整*/
}
↓ナビゲーション上のスキマを変更
/*ユーザーナビエリア*/
div#userNaviArea{
padding-top:15px !important;
}
↓仕切り線の色を変更します ｜→｜
/*ユーザーナビ 仕切り*/
ul#navigationList li{
border-right:#ff0099 !important;
}
↓仕切り線を二重線に変更します double
/*ユーザーナビ 仕切り*/
ul#navigationList li{
border-right:3px double #ff0099 !important;
}
※太さを3px以上にしないと二重線にはなりません
↓仕切り線を破線に変更します dashed
/*ユーザーナビ 仕切り*/
ul#navigationList li{
border-right:3px dashed #ff0099 !important;
}
↓仕切り線を点線に変更します dotted
/*ユーザーナビ 仕切り*/
ul#navigationList li{
border-right:3px dotted #ff0099 !important;
}
※太さを2px以上にしないと 点線に見えません
↓マウスがのったときの文字色を変更
#userNaviArea ul#navigationList a:hover{
color:#0000ff;
}
CSS 動きません・・ 質問するその前に
「CSSコピペしたんですが・・・動きません なんでですか～？」
最近・・・・
コメントやプチメでこのような問い合わせが目立つようになってきました
※みなさまチャントした文面で問い合わせいただいていますし、
「動いたよ～」ってお礼もいただいております・・・念のため「動いたよ～」もちゃんとした文章ですよ
かえって私のほうが忙しいときCSSだけ送りつけるような失礼な場合があって申し訳なく思っています
・・・・で、
コピペしたのに動かないって場合
確認してもらいたいのはコピペしたCSSではなくて・・・・
その上、直前のCSSです
1. } が抜けていませんか？
2. ｝←わかりにくいですが全角の ｝ではないですか？
3. /* や /* を入れないでコメント書いてありませんか？
4. <style type="text/css"><!-- や --></style> が入っちゃっていませんか？
私のところに問い合わせてこられたほとんどがこの4つのうちのどれかです
1・・・・・
#header {
background-repeat:repeat-x;
← } を入れて下さい
/* ペタボタンロールオーバー */
#toppeta img {
visibility : hidden ;
}
2・・・・・
#header {
background-repeat:repeat-x;
｝ ← 半角の } に変えてください
/* ペタボタンロールオーバー */
#toppeta img {
visibility : hidden ;
}
3・・・・・
#header {
background-repeat:repeat-x;横に繰り返す ← /* と */ を前後に
}
/* ペタボタンロールオーバー */
#toppeta img {
visibility : hidden ;
}
4・・・・・
<STYLE type="text/css">
<!--
body{cursor:url(http://sora.poche.jp/angel/c7.ani );}
a{cursor:url(http://sora.poche.jp/angel/c7.ani );}
-->
</STYLE> ← <STYLE type="text/css"><!-- と --></STYLE> を削除
#toppeta img {
visibility : hidden ;
}
このようなミスがあるとその下に書かれたCSSが有効になりません
コメント欄に背景をつけたのに、中と下の画像は表示されるのに上の画像が出ないって場合はコレです
上のようなミスの直下に書かれている上の画像のCSSだけが有効になっていません
半角の } これ1個がなかったのが原因だったのが一番多いです
実は私も最近までそうでした・・・・
CSSの量が多かったんで
その内その内・・・って調べるのを後回しにしていたんですが
この前、たまたま } がないのを見つけて入れたところ
それまで有効になっていませんでしたカレンダーの日付の画像とかが現れてびっくりでした・・・
ついでに・・・・・
いまのところアメブロのCSSには文字数制限がないようです
なので・・・・
ＣＳＳの中がわかりやすいようにコメント（注釈）を入れておくと便利です
最初の頃は入れていたのですが・・・
このブログのCSSをコピペするときに忘れないように
青字のようにコメントを自分で入れてください
/* ゲストコメント */ CSSのタイトル？コレがあるとどんなCSSかわかるので後で助かります
#comment_module .each_comment{ /*コメントタイトル部分*/
margin: 0;
padding-bottom:15px; /*コメントとコメントの間*/
background: url(画像のURL); /*上画像のURL*/
background-repeat : no-repeat; /*繰り返さない*/
background-position: center top; /*背景の位置 横-中央 縦-トップ*/
color:#FF3399; /*ゲストコメントの文字色*/ 忘れないように説明を入れておくと後で助かります
}
/* ゲストコメントココまで */ 案外便利なのが終わりのコメント
画面を見ながらCSSの数字を変更したりする場合や
ときどき設定を変更するCSSの前に
↓これなんか入れておけば目立つのでCSSの編集で探すのが楽になります
/* ■■■■■■■■■■ */
/* ■■■■■■■■■■ */
/* ゲストのコメント */
/* ■■■■■■■■■■ */
/* ■■■■■■■■■■ */
とか・・・・・
/* ------------------------------------------- */
とか・・・・・
/*
■■■■■■■■■■■■■■■■■■■■■■■■
アメブロ向上企画書からパクってきたCSS
うまくいかなかったら文句をいってやろう・・・・
うまくいったら黙っていよう・・・・ http://ameblo.jp/exlink/
■■■■■■■■■■■■■■■■■■■■■■■■
*/
/* と */ は１行ごとにつける必要はありません
間に何行あっても /* から */ の間はCSSに関係ありません
なので */ を忘れて閉じていないと最後まで無効ということになります
などを私はよく使います
CSSの編集で早くスクロールしても目だってすぐわかるので助かります
※基本、作業中のCSSは最後に書かれているはずなので
一番下にスクロールすれば良いだけですが
ドンドン下に付け加えていきますのでそんな時は探すのに便利です
また後日見直すとき、どこから持ってきたCSSだかすぐにわかるので助かります
※ /* や */ は当然半角ですよ・・・
※ /* と */ は1セットです 閉じ忘れに注意ください
CSSを編集する時は、メモ帳などにバックアップしてから行なってください
またダメです・・・
また・・・
ブログが開きません・・・・
ナゼなんでしょ？
コメント、プチメの返事が遅れています
すみません
あっ・・・・ 読むことは出来るんですが
自分のも含めてアメブロのブログだけが開きませんので
確認することも、返事を書くことも出来ません
前のようにしばらくすれば何とかなるでしょう？