フリースペースのHTMLコードが見やすくなる！
アメブロカスタマイズをご自身でしている方におすすめの方法です。

余計な改行タグ<br>が入る

アメブロにヘッダーメニューを入れるときなど、フリースペースへHTMLコードを入れて設定します。

例えばこんな感じのコードです↓

<div class="headerMenu">
	<ul>
		<li><a href="https://"><img src="" alt=""></a></li>
		<li><a href="https://"><img src="" alt=""></a></li>
		<li><a href="https://"><img src="" alt=""></a></li>
		<li><a href="https://"><img src="" alt=""></a></li>
		<li><a href="https://"><img src="" alt=""></a></li>
		<li><a href="https://"><img src="" alt=""></a></li>
  </ul>
</div>

通常上記のように、HTMLコードを組む際は見やすくするために、改行したり、インデント（字下げ）したりしています。

ただアメブロのフリースペースなどコードを貼れるところでは、少し気をつけないといけません。

このHTMLの改行も、文章の改行だと勘違いされてしまい、勝手に改行の<br>タグが入ってしまうんです。

そうすると、余計な余白ができてしまい、思ったような表示になりません。

回避するには、すべての改行をなくす

これを回避するには、HTMLコードの改行やインデントを無くします。
下記のような形です。↓

<div class="headerMenu"><ul><li><a href="https://"><img src="" alt=""></a></li><li><a href="https://"><img src="" alt=""></a></li><li><a href="https://"><img src="" alt=""></a></li><li><a href="https://"><img src="" alt=""></a></li><li><a href="https://"><img src="" alt=""></a></li><li><a href="https://"><img src="" alt=""></a></li></ul>
</div>

これで余計な改行<br>タグは入らなくなります。

でもその代わり、全部ダラーっとつながっているのでとっても見づらくなりました。
修正するときによーく見ないといけませんね。

コメントタグで改行タグが入らないようにする

そこでHTMLを改行やインデントしても改行<br>タグが入らない方法をお伝えします！

それは…コメントタグ【<!– –>】を使う方法です。

コメントタグの【<!–】から【–>】 に囲まれている部分は何を書いても反映されません。
通常は説明などちょっとしたコメントを入れたいときに、このコメントタグを使います。

HTMLの改行やインデントの部分をこのコメントタグで囲んでしまえば、改行が反映されないので<br>タグが勝手に入ることはありません。

実際に使ってみるとこのような形になります↓

<div class="headerMenu"><!--
	--><ul><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
		--><li><a href="https://"><img src="" alt=""></a></li><!--
  --></ul><!--
--></div>

上記のように設定すると、改行タグも入らないし、コードも見やすくなります。

メッセージボードにもぜひどうぞ

アメブロのメッセージボードにもHTMLコード入力できますが、同じように改行が勝手に入ってしまいますので、こちらのコメントの技で回避することができます。

アメブロのカスタマイズをご自身で行っている方は、ぜひ使ってみてくださいね。

シェアはご自由にどうぞ＾＾
必要な方にどうぞお伝えくださいね。