コメントアウトは HTMLソースの中にコメントを記述しますとページ閲覧者には表示されません。
表示はさせたくないけれどメモを残しておきたい注釈をしておくのに使用します。
複数人で記事を作成する時に便利ですね。(文章担当と挿絵及び写真担当などの役割分担など)
コメントアウトの書き方
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウト書き方.jpg?w=1256&ssl=1)
htmlのタグでたとえるなら【 <!– 】 は 開始タグ
【 –> 】は終了タグの様な役割ですね。
コメントアウトを使用する際の注意点
基本的な使い方を紹介しましたが、合わせてコメントアウトを使用する際の注意点を3つ紹介します。
重要な情報は書かない
パスワードや会社の機密情報などの重要な情報は絶対に書かないように心がけましょう。
ページ閲覧者(ブラウザ)には表示されないと書きましたが、webに詳しい人やweb制作に携わる仕事の方は参考にする為にwebページのソースコードを見ていることが多々あります。
連続したハイフンを書かない
コメントアウトの中に ———(連続したハイフン)を書くことも避けましょう。間違って判断されてしまいコメントアウトが上手く反映されない原因になってしまいます。
どうしても区切り等で線を使用したい場合は======や~~~~~~を使用しましょう。
誰の為にコメントアウトするのか?
対人であれば
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREなし.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREなし.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREなし.jpg?w=1256&ssl=1)
で構わないですが、クローラー等に感知してもらいたい場合は
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREあり.jpg?w=1256&ssl=1)
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREあり.jpg?w=1256&ssl=1)
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PREあり.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE.jpg?w=1256&ssl=1)
テストしてみる
右上にある・が3つ縦に並んだ場所をクリックしますとビジュアルエディター→コードエディターに変更することができます。
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト.jpg?fit=1024%2C472&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト.jpg?fit=1024%2C472&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト.jpg?fit=1024%2C472&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト2.jpg?fit=1024%2C287&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト2.jpg?fit=1024%2C287&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/コメントアウトテスト2.jpg?fit=1024%2C287&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト.jpg?w=1256&ssl=1)
と記述し更新したあとビューソースを見てみましょう。
view-source:https://reiwa-hukugyou.com/blog/seo/
![キムカツ](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/06/キムカツアップ.jpg?w=1256&ssl=1)
![キムカツ](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/06/キムカツアップ.jpg?w=1256&ssl=1)
![キムカツ](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/06/キムカツアップ.jpg?w=1256&ssl=1)
view-source:https://○○○○ドメインページ でご自身でもテストして目視することをお薦めいたします。
Ctrl+F で検索してみましょう。
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/ビューソース.jpg?fit=1024%2C467&ssl=1)
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/ビューソース.jpg?fit=1024%2C467&ssl=1)
![](https://i2.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/ビューソース.jpg?fit=1024%2C467&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト1.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト1.jpg?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト1.jpg?w=1256&ssl=1)
ではWEB上では反映されていませんので人は内容を確認できますが、Googlebot(グーグルボット)などクローラー (Webロボット) には認識されていません。
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト2.png?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト2.png?w=1256&ssl=1)
![](https://i1.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/テスト2.png?w=1256&ssl=1)
ではビューソースに認識されました。
ポータルサイトやアンテナサイト、リファラルサイトなど呼び方名称は違いますが(Webロボット)に認識してもらいたい際は
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2.jpg?w=1256&ssl=1)
に挟むを忘れずに!
コメントアウトのまとめ
コメントアウトはブラウザには表示されないので複数人で記事を作成する時に便利。
コメントアウトには重要な情報は絶対に書かない。
Googlebot(グーグルボット)などクローラー (Webロボット) に認識してもらいたい場合は
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2-1.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2-1.jpg?w=1256&ssl=1)
![](https://i0.wp.com/reiwa-hukugyou.com/wp-content/uploads/2019/08/PRE2-1.jpg?w=1256&ssl=1)
を活用する。
コメント
コメントアウト
知りませんでした。
いろんな使い方が出来るのですね。
参考になりました。