どんなコードかわかるようにコメントアウト機能でメモを取ろう!

おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

僕の詳しいプロフィールと、このブログについてはこちら

このCSSどんなカスタマイズに使っているものだっけ?

このHTMLはどこまでつながっているものだったんだろう??

 

と、カスタマイズが多くなったり、
コードが多くなると、どれが何のコードかがわからなくなることがあります。

前にここの色や大きさを変えたはずなのに、
その内容をもう一度変更したいと思ったときに、

すぐに見つけ出せるようにできた方が楽ですよね。

 

別の見方からすると、僕があなたにソースコードを提供する場合に、

「これは〇〇するコードです。」

と、コード上にメモしてお渡ししたりしています。

 

そうすれば、僕でなくてもあなた自身が変更をしたい、削除したいといった場合に見つけやすくなりますね。

そのためにコード上にメモをつけておきましょう。

そして、このメモすることを「コメントアウト」とも言います。

 

コメントアウトとして書いた内容は、ページに表示されることはありません。
(正確に言うと、コード上にはあるけれど見えないだけです)

 

「なんか難しそう」と感じる方でも大丈夫です。
実はとっても簡単なんです!

 


CSSの場合

CSSの場合は、以下の記号で挟むことでメモを取ることができます。

CSSの場合①

/*   */

↑この記号で伝えたいことを囲みます。

 

例)h2タグの文字色を赤にしたい場合

h2{
color:red;/*h2タグの文字色を赤にする*/
}

こうすれば、記号で囲んだところがページ上で出ることなく、
きちんと内容を残しながらカスタマイズしていくことができます。

 

CSSの場合②

複数メモを付けたい場合

 

/*スマホ画面の場合*/
h2{
font-size: 16px;/*文字の大きさをスマホの場合26pxに*/
color:red;/*h2タグの文字色を赤にする*/
}

/*パソコン画面(767px以上)の場合はこっち*/
@media screen and (min-width:767px){
h2{
font-size: 24px;/*文字の大きさを24pxに*/
color:red;/*h2タグの文字色を赤にする*/
}
}

こんな風に、項目が多くなるときなんかに便利です。

特に、スマホの場合はこう。パソコンの場合はこう。
というような感じで残すのもいいですね。

ただし、メモは必要最小限で残しましょう。
メモが多くなると、逆に見づらくなってしまうものです^^

 

HTML

今度は、HTMLのメモの残し方です。

HTMLの場合

<!--    -->

↑この記号で囲みます。

 

<!-- ここから、テキストと画像を入れています -->
<div>
<p>pタグは、基本的にテキストを入れるところです。</p>
<img src="./images/sample.png" alt="サンプル画像">
</div>
<!-- ここで終わります -->

こんな感じで、メモを記号で囲みましょう。

すると、どこからどこまでが一つの塊なのかがわかるようになります。

 

PHPの場合

PHPの場合はこちらです。

PHPの場合

/*  */

↑CSSと同じ囲み方です。

 

<?php
/*ここにPHPのコードを書き込みます*/
?>
<div>
<p></p>
<img src="./images/sample.png" alt="サンプル画像">
</div>

正直なところ、ワードプレスをカスタマイズするときに、
PHPファイルよりも「CSS・HTMLファイル」をカスタマイズすることが多くなる傾向にあるので、

「PHPはCSSと同じくらいだ〜」くらいで覚えておけば大丈夫だと思います。

 

ただ、PHPはかなり繊細なファイルだと覚えておいてください。

特に、functions.phpは、閉じタグやカンマ「 , 」とかを一つ忘れただけで、

画面が真っ白になってしまったりするので、

PHPファイルに限らずですが、カスタマイズするときは必ずバックアップをとっておいてくださいね!

 

タグについて

ここからは、メモではなくそれぞれのタグの構造をお話しします。

書き込むときの注意点ですね。

CSSタグの注意点
  1.  {  }というタグでカスタム内容を囲います。
  2. 「 color : red ; 」のように、最後に「 ; 」を忘れずに。
    →閉じ忘れるとカスタム内容が反応しません。

h2{
color:red;
}

HTMLタグの注意点
  1.   <   > という記号で囲みます。
  2. <div></div>
    →「ディブタグ」と読みます。
    →一つの段落を作る際に使います。
  3. <p></p>
    →「ピータグ」
    →主にテキストを入力する際に使います。
  4. <img src="">
    →「イメージタグ」
    →画像を表示させる際に使います。

WEBページは、これらをレゴブロックのように積み重ねて作られています。

PHPタグの注意点
  1.  <?php  ?> のように、「 <?php 」と、「 ?> 」で囲みます。
    →こちらも閉じるタグを忘れると反応しません。

基本的に、どのタグについても相対するタグで「閉じる」ことを忘れないようにしましょう。

幸い、ワードプレスでコードをカスタマイズする際には、
間違った書き方をしていると、エラー文言が出るようになっているので、

PHPファイルなんかは間違っていると保存ができないようになっていたりします。

 

CSSファイルでも同様に出ますので、
そのときは何かしら書き方が間違えている可能性があります。

エラーが出た際は、一度書き方を確認しましょう!

 

まとめ

いつどんな内容を変更したかをメモしておくだけで、
後々の作業が楽になるものです。

あなたもカスタマイズする際には、
メモしておくようにすれば、変更内容を簡単に確認できますよ。

 

僕のカスタマイズサポートについても、
同じようにメモを付けてお渡しすることがあると思いますので、

そのままメモごとコピペしてもらえれば大丈夫です!

ではでは!

▼無料で収益化の知識が学べます▼

ビジネスモデル作り

「デザイン性の高いブログ」「ビジネスモデル作りの基礎知識」

この2つがあれば、情報発信で収入に困ることはありません。

知識・ノウハウだけでなく「収益化するためのビジネスモデルの作り方」を『無料』で学べます。

さらに今なら「ロゴ・アイコン」などを無料で作成・プレゼント!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください