ブログ

スッキリ!文字やコードを非表示にするタグを使ってコード整理!

この記事でわかること

ソースコードにコメントを付けて、スッキリ整理する方法

ブラウザ上に表示させたくないコードやコメントを入れることができる、/*   */ や <!‐‐    ‐‐> の使い方

こんにちは!テンパです。

WordPressを使ってWebサイトを作成しているなら、サイト内のデザインを変えたい場合、スタイルシート(style.css)や追加CSSにCSSコードを追加して、自分好みにサイトをカスタマイズすることができます。

しかし、追加したCSSコードがどんどん増えてくると・・・

「あれ!?このCSSコードは何だったっけ?」

と思うことありますよね。

 

また、CSSコードの追加に限らず、凝ったWebサイトを作成するとなると、HTMLコードも複雑になり・・・

「このdivはどこのだ?」

とわからなくなってしまうことが多々あると思います。

テンパ
テンパ
そこのあなた!お困りではないですか?

チー
チー
困っているのは、整理が苦手なテンパなの!

テンパ
テンパ
(ギクッ!)・・・
リライト作業のためにも、整理は重要です!

そんな時は、入力したコードやコメントをブラウザ上に表示させないようにする、

/*   */ や <!‐‐    ‐‐>

を使って、コメントを残しておくと、後からソースコードを見てもわかりやすくて便利です。

コメントなし
  何が何やらゴチャゴチャ・・・

コメントあり
  わかりやすくスッキリ!

テンパ
テンパ
追加CSSを整理する時や、記事のリライト作業の時に、とても重宝しています。


 

SEO的にも、見やすくわかりやすいサイトは重要ですので、

わけがわからなくなる前に!

ぜひ、活用してみましょう!

では、具体的な使い方の説明をしていきます。

 

非表示にするコード

スタイルシート(style.css)や追加CSSにコメントを入れたい
  /*   */ を使う!

例えば、蛍光ペンのコードで何色かすぐにわかるようにしたい場合に、「ピンク(太め)」などのコメントを入れておけば便利です。
その場合は・・・

/*ピンク(太め)*/

と入力します。
こうすることで、「/*」と「*/」で囲まれた部分は、コードとして認識されなくなるため、整理整頓などに利用することができます。

テンパ
テンパ
何のコードかわからなくなって調べ直すなんて時間のムダ!
あらかじめコメントを入れておくと、一目瞭然です。

記事本文など、HTMLコードの中にコメントを入れたい
   <!‐‐    ‐‐> を使う!

例えば、記事中で後から付け加えたいことがある場合や、一時的に使わなくなった文を消しておく場合にも、利用できます。

1.
必ずテキストモードにして、表示したくない文を「<!‐‐」と「‐‐>」で囲みます。

 

2.
ビジュアルモードに切り替えると、「<!‐‐」と「‐‐>」で囲まれた部分が、ブラウザ上に表示されていないことがわかります。

 

3.
これを実際に公開しても、表示されていません!

 

入れたいコメントは、一行でも、それ以上でも大丈夫です。
また、コメント中に空白やタグも入れることができます。これらも反映されず、表示されることはありません。

実際に、pタグを複数行入れてみます。

1.
必ずテキストモードにして、表示したくない文を「<!‐‐」と「‐‐>」で囲みます。

 

2.
ビジュアルモードに切り替えると、「<!‐‐」と「‐‐>」で囲まれた部分が、ブラウザ上に表示されていないことがわかります。

 

3.
これを実際に公開しても、表示されていません!

 

注意すること

  • 必ずテキストモードで打つこと!

  • 「/*   */」と「<!‐‐   ‐‐>」を逆に入れたり、全角で入力すると、文字として認識されるため表示されてしまいます。必ず半角で入力しましょう。

  • ブラウザ上に表示されていないだけで、ソースコードを表示すると見ることができるので、機密情報や個人情報を隠しておくのは危険ですので、ご注意ください。

 

コードのコピーはこちらから!

コードをコピーして使う場合は、それぞれこちらからお願いします。

/*  */
<!--  -->

 

まとめ

いかがでしたでしょうか。

何のコードかひと目でわかると、コードの改変が楽になったり、間違いが見つけやすくなります。
また、たくさんの記事を書いていると、どこに何を付け加えるかといった細かいことを忘れがちなので、テンパは普段から重宝しています。

とても便利ですので、お困りの方はぜひお試しください!

お役に立てれば幸いです。

こんな記事もおすすめ