Web制作

初心者のためのHTML講座|コメントタグで非表示!モールやカートは記述に注意!

ムッシュ
ムッシュ
どーも、ムッシュです!

今回は、初心者のためのHTML講座シリーズとして
コメントタグの使い方を解説していきたいと思います!

じーぽ
じーぽ
ムッシュにしてはめずらしいジャンルの記事だぽ!
ムッシュ
ムッシュ
実はムッシュ、web制作もできるんだよ
じーぽ
じーぽ
!!

コメントタグってなに?

ここで言うコメントタグは、HTMLのタグのことを指しますが
その名の通り、膨大にあるHTMLのコードの中にコメントを書くために利用されます。

スタッフ
スタッフ
HTMLのソースコードが膨大すぎて
どこまでがサイドナビのコードか分かりづらいなー
スタッフ
スタッフ
毎月あるセール用のバナー
来月また貼りなおすのめんどくさいなー

サイト更新を担当されている方なら、こんな風に思ったことありますよね?

そんなとき、web制作の現場で活用されているのがコメントタグです。

実際のページには表示されないメモ書きのような状態になるので
HTMLのソースコードを分かりやすく整理するために使ったり
一時的に不要になったコンテンツを非表示にしたりするときに使われています。

ECサイトを運営するなら絶対に知っておいた方が良い、とても便利なタグです。

HTMLのコメントタグの使い方!

コメントタグの使い方はとても簡単です。
ブラウザに表示されないようにしたいところをコメントタグで囲むだけです。

コメントタグのサンプル

<!-- ここに書かれたものはすべてコメントになるよ! -->

再表示したいときはコメントタグを消すだけなので、更新時間の短縮になりますね!

じーぽ
じーぽ
ただ、モールやカートによって注意点があるぽ~

Yahoo!ショッピングでコメントタグを利用する場合

まずは、Yahoo!ショッピングでコメントタグを利用する場合です。

Yahoo!ショッピングでは、複数行のソースをひとつのコメントタグで囲むと
テキストとして認識されてしまいます!

<!-- ヤフーショッピングで
コメントタグを使う場合は
注意が必要です! -->

<!-- ヤフーショッピングで -->
<!-- コメントタグを使う場合は -->
<!-- 注意が必要です! -->

コンテンツが複数行になって記載されている場合は
一行ずつコメントタグで囲むようにしてあげてください。

Yahoo!ショッピングで思ったようにコメントタグが使えないときは
この点をチェックしてみてください!

自社サイトでコメントを利用する場合

自社サイトと言っても構築システムもたくさんあるので一概には言えませんが
利用しているカートシステムによっては注意が必要です!

<!-- コメントタグは <--! 正しく記述しましょう-->

本来のHTML構文としては正しくないこのような記述でも
多くの場合、全体がコメント化された状態で表示されますが
利用しているカートシステム等によっては正しく表示されないことがあります。

<!-- コメントタグは正しく記述しましょう -->

<!----> を一対にして囲まないとコメントになりませんので
正しい記述をするように心がけましょう!

楽天市場でコメントタグを利用する場合

楽天市場でコメントを利用する場合は、通常の利用方法で問題ありません!

RMS、GOLD、どちらの場合でも通常通りの記載方法でコメント化が可能です。

じーぽ
じーぽ
なにかあるのかと思ったぽ

コメントタグの使い方まとめ

コメントタグを活用することで、だれが見ても分かりやすく更新もしやすくなるので
Web担当が複数いる場合など、ぜひ積極的に活用していただきたいと思います!

コメントで囲ったはずなのにサイト上から消えないなど
困ったときにはこちらの記事を参考にしてみてください!

モールやカートによってもそれぞれに仕様が異なりますので注意してくださいね!

ムッシュ
ムッシュ
それではまた!
ABOUT ME
ムッシュ
ムッシュです! おもしろくてわかりやすい記事を目指して頑張ります! うぃーーーーむっしゅ!

ネットショップ運営でお困りのことはありませんか?
お気軽にご相談ください。