!important 効かない時

使い方

WordPressなどで他人の用意したものを編集するのはたいへんである。
!important指定でうまくいく可能性は高い。
以下のように末尾に加えるだけだ。

p {color: #000 !important;}

優先度がある

セレクタには様々な指定方法があり、優先度があるようだ。
!important指定は、セレクタではないけど最強に上書きする。

結局は優先度の問題であり、点数評価されるものだ。
つまり、なんでも!importantでOKというわけではない。

!importantなら必ず効くというわけではない

!important指定されていたとして、その中でさらに優先度がある。
クラス名などを細かく指定することで優先度を上げることができる。

IDセレクタはクラスセレクタより優先される

点数の詳細とか、当サイトでは扱わない。
ただこれは知っておいたほうがいい。
IDセレクタで指定するのは極力避けたほうがいい。
クラスセレクタと同格でないため、クラスセレクタで上書きすることができない。
これは「CSS効かない現象」の気づきにくい原因の一つだ。

first-child CSS

first-childとは

一番最初に現れる子要素だけを対象にするという意味です。

使い方の一例。
pやh1のmargin-topを一定値とりたい。
でも本文の一番上にくる時はデザインが崩れるから、その時だけmargin-topを0にしたい。

書き方は半角スペースに注意

.entry-content :first-child {margin-top: 0;}

「:first-child」の前の半角スペースの有無で意味が変わってくるので注意。
この場合は.entry-contentクラス内で最初に来る子要素、という意味になる。
セレクタ指定されてないので、子要素がpでもh1でも適用される。

子要素を指定する場合

.entry-content p:first-child {margin-top: 0;}

一番最初に来る子要素がpである場合のみに、適用されるという意味。
このように子要素にセレクタ指定する場合は、「p:first-child」のように半角スペースを入れてはならない。

効かない場合の考えられる理由

  • 半角スペースの有無。
    上述を参照。
  • 子要素にセレクタ指定しても、「指定セレクタで一番最初に来る子要素」という意味にはならない。
  • !importantを忘れた。

nth-child

.entry-content :nth-child(1) {margin-top: 0;}

上のように記述しても同じ効果が得られると思われる。
nth-childは他にも利用方法があり、しかも複雑だ。
そういう意味では、どちらを使用すべきかといえば、単純なfirst-childのほうがいいような気はするが。
後日調べます。

 

備考。
擬似クラス?調査中。

動かないあるある CSS

なぜだ、なぜ動かん、絶対バグってるよ、オレが第一発見者だ。
皆さんも経験あるかと思います。
しかし動かない理由は本当に些細な事なのだ。

ドハマリする時の条件がわかりました。
やはり新しい難しいことをしようとするときだ。
調べまくりで試行錯誤するものだからイージーミスが見えない。
自分の知らない秘密があるに違いないと猛烈調べるわけ。
こういうときは頭を冷やす。簡単なものに置き換えてチェックする。

クラス名の見間違え

これは時間食った、ふざけんなですよ。

当サイトのテーマではサイドバー以外にも、ウィジェットを記事の下とかにつけれる。
両方ともwidgetクラスを使ってるからクラス名はほぼ同じと思ったのです。
h3タグはクラス名が違った。
widgettitleクラスとwidget-titleクラス。
いやーほんとくたびれたわ。

その他

セレクタを疑ったほうがいいね。
「,」がさ、「.div1, .div2, {~}」これもう動かないものね。

またすごく手こずった話がでたら追加しようと思います。

0の単位 CSS

length値といわれるものは、0なら単位不要。

CSSではlength値に対してtime値というのもあるようなんですね。
time値の場合は、0であっても単位が必要ということのようです。

time値を使わないのであれば、単位なしでいいということですね。
time値に関しては機会があれば後日調べてみたいと思います。

見出しで使われるテク

殺風景ブログから脱するためには避けて通れぬ道だ。
私は駆け出しのぽっと出レベルなので、調べながら楽しみながらこの記事を書こうと思う。
でもあんまりややこしいのは気が引ける。

今はこの記事はメモなので、ソースが気になる人は勝手にソースで見てください。
インラインで挿入していますので。
後日見やすくします。

font-weight

太字を使うとすれば見出しだろう。
いい機会だからメモしておく。
100~900までとあるが、normal(400)とbold(700)で十分だろう。

サンプル

これをベースとして角を丸めるというのをやってみたいね。

border-radius

とりあえず丸めてみるか。

サンプル

何だすごい簡単じゃないか。

サンプル

なるほどね。細かく指定できるみたいだけど単純な指定でよさそうだな。
ちょこっと丸めるだけでオシャレ感があるな。
先端恐怖症に優しい。

text-shadow

サンプル

shadowの色を少し薄くするのがコツか。

opacity

サンプル

透明化か。薄字とたいして変わらない。使わないかも。

box-shadow

サンプル

 

サンプル

 

サンプル

最後にtext-shadowとの組み合わせ。
確かに浮いてはみえる。

サンプル

コメント投稿欄を非表示 CSS

WordPressコメント投稿欄のあれを消したい、でもプログラムは触りたくない。
そういう場合はCSSで消すしかない。

ウェブサイトやメールアドレスの記入欄。
「メールアドレスが公開されることはありません。」の注意書き。
今回消すのは以上三つです。

displayをnoneするだけ

自分のテーマのソースを調べて、クラス名を確認しましょう。
該当クラスにnoneします。
ダッシュボード→サイトをカスタマイズ→追加CSS

.comment-notes, .comment-form-url, .comment-form-email
{
display :none;
}

これは一例なので、状況にあわせて編集します。

書式上の注意点 CSS

WordPressでの注意点。
cssファイルの直接編集は極力避けた方がいい。
カスタマイズによる追加CSSを利用する。
テーマの更新の時にどうなるかですよね。
この追加CSSという方法ですが、headerタグ内の最下方に継ぎ足すという仕組みになっています。

とりあえず気になるのは、marginとfont-sizeとcolor(文字色)でした。

スタイルシートではタグっぽいのを、要素とかセレクタとかいいます。
今回はセレクタということにしますか、あってるかな?

複数のセレクタで指定する

h1, h2, h3 {
color: black;
}
「,」が区切り文字です。

h1, h2, h3, {color: black;}
「h3,」などと余計な区切りを入れると動作しません。

クラスを指定する

h1.entry-title, h2.entry-title {
color: black;
}
この場合はentry-titleクラスを指定しました。
<h1 class="entry-title">などとなっている場合です。

「h1 .entry-title」のようにタグとクラス名の間に半角スペースを入れていけない。

セレクタ間に半角スペースが入る場合は?

半角スペースを入れるとその下のセレクタという意味になる。
子セレクタのみにあらず孫以下のセレクタも対象かな。
詳細は後日調べておきます。

タグ内でクラス名を複数指定する

<h1 class="a b">

HTMLソースから読み解く際の注意点。
上のような記述の場合、クラス指定が二つ同時にあるという意味だ。
aクラスでもありbクラスでもある。
半角スペースが区切り文字になる。

追加しても変化しない場合は

いじってる人はわかると思うけど、実際には追加しても何も変わらない場合が多々ある。
この場合、一応次の順で試すとよろしいかと思います。

①セレクタを極力正確に指定する。
.entry-titleよりは、「h1.entry-title, h2.entry-title」のように細かく指定します。

②ずばり!importantを使う。
どういじっても動かない場合があります。
でも便利なものがありました、強力に上書きします。
h1.entry-title {
color: black !important;
}
ただ意図しない他所へのデザイン影響することは考えられます。
他のページを実際に見て、問題ないかチェックしましょう。

③!importantでうまくいかない場合もありますね。
指定の方法を細やかにしないといけない場合がある。
つまり、!importantプラス細かい指定。
もしかしたらインラインでないとダメというパターンがあるのかな?
できるだけ直近のセレクタで細かく具体的に指定しましょう。

これで動かない場合は余計な記述が入っているとかスペースの使い方が間違ってるとかを疑ったほうがいい。

追記

!importantは私も知らなかったんですね、昔の話なんで。
これ最後の項目になってしまいましたが、とても重要です。
WordPressのCSS編集は!importantなくしては進みません。
これは、誰でもカスタマイズできるというWordPressの仕様と、関係あるのではと予想します。