!importantによる優先度の変更とコメントアウトによる無効化

WordPressの無料テーマや、無料配布されているCSSテンプレートなどをカスタマイズして使うような場合、CSSを編集することになりますが、元々書かれているCSSを修正するのではなく、新たなCSSを追加していくような形で編集するのが良いかもしれません。

CSSを書く時に既に書かれているものを修正しても良いのですが、削除してしまうと元の設定に戻すことができなくなります。それでも特に問題はないのですが、「!important」や「コメントアウト」という技を覚えると、始めから書かれていた物はそのままで、新たな指定を追加していくことができます。

!importantの使い方

「!important」はそのCSSのプロパティが重要であることを伝えるための記述です。

p {
    line-height: 20px;
    }

p {
    line-height: 18px;
    }

たとえば1つのCSSファイルに、このようにpタグに対する行間設定のCSSが2つ以上書かれていることがあります。このように並んで書かれていれば、不要な方を削除すれば良いのですが、CSSファイルには色々な指定が書かれており、特定の要素に対するものを見つけるのが難しいことがあります。

自分で書いたCSSでも過去に指定した要素と同じ要素に対して、異なるCSSを指定してしまうということは良くあるものです。Dreamweaverやテキストエディタの検索機能を使って、過去の記述を見つけて修正するのも良いですが、上手く見つからないこともあります。

CSSは、後から書かれたもの(下に書かれたもの)が優先されますので、先ほどの記述であればpタグの行間は18pxになるのですが、こんなに単純なものばかりではないですし、CSSの修正を繰り返していると、その要素に対してどのCSSが効いているのかわからなくなってしまうことがあります。

そんな時に役立つのが、優先度を上げる「!important」です。

.no1{
    padding: 0 0 0 30px!important;
    font-size: 1.2em!important;
    font-weight: bold;
    color: #ff0000;
}

プロパティの後に「!important」という文字を追加することで、どこに書かれたものであってもそのプロパティが優先されるようになります。なお、!importantはプロパティごとに指定する必要がありますので、そのクラス全体に効かせるようなことはできません。

この場合、.no1の余白とフォントサイズについては、ここに書かれているものが優先されるということになります。

コメントアウトの使い方

CSSはHTMLと同じようにコメントを書くことができます。

#main {
    margin: 0px auto;/* 中央に揃える */
    width: 900px;
    padding-top: 20px;
    padding-left: 20px;
  }

これは、中央揃えを表すCSSを伝える為のコメントです。「/*  */」の中に書かれた事はコメントとして処理されますので、CSS設定には影響しません。このCSSを見た人にどのような設定なのかを伝えるために使用します。

「margin: 0px auto;」というのを見れば中央揃えということはわかりますので、このようなコメントを書くことはあまり無いと思いますが、どのような内容のコメントを書いてもOKです。そのCSSを自分しか見ないとしても、時間が経つとどのような事を書いたのかを忘れてしまいますので、重要なことはコメントとして残しておくのが良いかもしれません。

このコメント機能を使って特定のプロパティを無効化することができます。

#main .right{
    /*width: 280px;
    height: 440px;*/
    width: 252px;
    height: 410px;
    padding-top: 30px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 28px;
    }

このように書くことで、元々記述してあった高さと幅の設定が無効になり、その後に書かれているものが優先されます。コメントアウトするのではなく、その部分を削除しても良いのですが、コメントアウトすることで、以前はどのような記述になっていたのかを残しておくことができます。

あくまで、無料テーマのCSSを修正したり、誰かが作ったテーマを修正する時に良く使われる方法ですが、特定のプロパティの記述を残したまま無効化する方法として憶えておいた方が良いと思います。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーの無料お試し申し込みはこちら

公開日:2013年2月22日

サブコンテンツ

このページの先頭へ