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://hama-sush-jp.pro/exlink/
■■■■■■■■■■■■■■■■■■■■■■■■
*/
/* と */ は１行ごとにつける必要はありません
間に何行あっても /* から */ の間はCSSに関係ありません
なので */ を忘れて閉じていないと最後まで無効ということになります
などを私はよく使います
CSSの編集で早くスクロールしても目だってすぐわかるので助かります
※基本、作業中のCSSは最後に書かれているはずなので
一番下にスクロールすれば良いだけですが
ドンドン下に付け加えていきますのでそんな時は探すのに便利です
また後日見直すとき、どこから持ってきたCSSだかすぐにわかるので助かります
※ /* や */ は当然半角ですよ・・・
※ /* と */ は1セットです 閉じ忘れに注意ください
CSSを編集する時は、メモ帳などにバックアップしてから行なってください