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

さて、ブログでカスタマイズが多くなってくると必然的にコードが多くなり、どれが何のコードかがわからなくなることがあります。

もう一度この箇所を変更したいと思ったときに、すぐに見つけ出せるようにできた方が楽ですよね。

別の見方をすると、例えば僕がよくサポートをする時、ソースコードの提供するが必要な場合には、「これは〇〇するコードです。」と、なるべくコード上にメモしてお渡ししたりしています。

メモを残しておけば、僕でなくてもあなた自身が「変更をしたい・削除したい」といった場合に見つけやすくなりますので、効率的です。

そのために、コード上にメモをつける習慣を付けると、今後カスタマイズを行う際に非常に便利です。

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

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

「なんか難しそう」と感じる方でも、実はとっても簡単なのでちょっとだけ見てみてね(o^^o)

CSSの場合

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

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

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

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

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

HTML

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

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

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

PHPの場合

PHPの場合はこちらです。

正直なところ、ワードプレスをカスタマイズするときに、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ファイルでも同様に出ますので、そのときは何かしら書き方が間違えている可能性があります。

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

まとめ

あなたもカスタマイズする際には、メモしておくようにすれば変更内容を簡単に確認できるので作業効率が上がるはずです！

僕のカスタマイズサポートについても、同じようにメモを付けてお渡しすることがあると思いますので、そのままメモごとコピペしてもらえれば大丈夫です！

ではでは！