スタイルシートの整理には「コメントアウト」が便利ですよ【WordPress】

コメントアウト WordPress

皆さん、WordPressのカスタマイズ楽しんでますか!?

デザインをカスタマイズしだすともう止まんなくなるんですよね。そんな暇あったら記事書けよって話なんですが・・・。まあ、好きにやるのが一番です。

 

そんなわけで、WordPressの面白いカスタマイズを紹介・・・。といきたいところですが、今回はもっと基本的な部分。スタイルシート(CSS)の綺麗な書き方について紹介したいと思います。

web制作においては超基本的なことなんですが、WordPressはweb素人の方も使っている人が多いと思うので。知っておくと地味に良いですよ、これ。

スポンサーリンク

WordPressのCSSはコメントアウトで見やすく整理

カスタマイズを繰り返していると、スタイルシート(CSS)が長くてごちゃごちゃしてきます。

今はweb初心者も、コピペのみで簡単なカスタマイズが出来ますからね。色々やっているうちに、気付いたら「これ何のコードや・・・」なんてこともよくあるでしょう。

 

CSS追記で思わぬデザイン崩れが起きることも・・・

スタイルシート整理の前に知っておいてもらいたいこともあります。

それは、CSSの追記にはデザイン崩れの危険性もあるんだということ。

 

WordPressに関していえば、テーマの違いによってCSSの記述方法も違います

自分のサイトにあったCSSコードじゃないと、思わぬところでデザインが崩れてしまうこともあるんですよ。

有料テーマで細部まで独自に作り込まれている場合は特にですね。特殊な構造してますから。

最低限、自分のテーマに対応しているか確認しておくと安全でしょう。

 

そんなわけで、自分が追記したCSSコードはしっかり管理しておくことがけっこう重要。問題が起きても自己責任ですからね。CSSの知識が浅い人ほどよくよく整理しておきたい。

コメントアウトはコードを見やすくするための”メモ”

それでは本題。スタイルシートをきれいに記述する方法の紹介です。

スタイルシートを整理するときには「コメントアウト」という機能を使います。

これは簡単に言うと、コードの途中に”メモ”が書ける機能です。

 

少し実例を見てみましょうか。

例えば、僕が使っている「Simplicity」というテーマのCSSファイル(親テーマ)を見ると、こんな感じでコメントアウトが使われています。

/************************************
** 基本設定(General Setting)
************************************/
html, body {
 margin: 0;
 padding: 0;
}
    ・
    ・
    ・

 

上の方に注目。

「この部分のCSSコードは基本設定に関するやつ!」と一目で分かりますね。

どれだけ記述が長くても、このようにその都度メモしておくことで、後で見返したときすぐに何に関するコードなのかが思い返せます。

これをやっておくことで、万が一レイアウトの不具合を見つけたときにも、非常に対応が取りやすいんですよ。

ぜひ使ってください。

 

実際には、コメントアウトはこれだけのコードで出来ます。これだけなんですよ。

/*メモ*/

 

ですが、これだけではせっかくのメモ書きも見にくくて仕方がない。

/*」~「*/」の間は何を書いてもいいので、視覚的にパッと目に飛び込んでくるように工夫しているわけです。

ですから、こんな感じもありでしょう。

/* リンクふわっと
==========================================*/
html, body {
margin: 0; padding: 0;
}
    ・     
    ・     
    ・

最後に

WordPressのカスタマイズは、スタイルシート内で出来ることが非常に多い。

今は、記述コードがちょっとでもいずれ必ず増えてくるでしょう。できるだけ早いうちにこの方法で整理しておくことをおすすめします。

それでは楽しいカスタマイズライフを!