フリースペースに余分な空間が空いてしまって困る時(上や下も)

フリースペースに余分な空間が空いてしまって困る時(上や下も)

アメブロカスタマイズのわざめーばです。

こんにちは。

ある方から「アメブロのフリースペースに余計な空間がいっぱいできてしまって困っている」との連絡があって見てみると、

確かに出来てました!

フリースペース周辺で上下方向の空間が空いてしまう原因は、概ね二つあります。

一つは、

フリースペース内で「改行」すると空間が空いてしまう

ためで、もう一つは、

フリースペースの上下に元々広めの余白が設定されている

ためです。

フリースペース内で「改行」すると空間が空いてしまう

「改行」というのは、[Enter]キーを押して強制的にその行を終わらせることです。

文字が入力領域の端まで行った時に勝手に次の文字が次の行に移動するのは「改行」とは言いません。

アメブロのフリースペースでは「改行」だけの行があると、そこがブログでは1行分の空間として表示されます。

また、divやpなどのタグは、その終了タグ(</div>など)で自動的に改行されるので、その後ろに「改行」を入れると更にもう一行改行されます。

つまり、二回改行されたことになり、結果「改行」だけの行ができたのと同じになり、やはり1行分の空間が表示されます。

なので、基本的に、

フリースペースで空間を開けたくない位置では「改行」してはいけません。

でも、それだと、フリースペース内がすごく見難いですよね。

では、

見やすくしつつ勝手に改行されないようにする方法はないのか?

というと・・・、

単に改行できるのに比べるとやや煩雑ですが、一応あります。

その方法は、

改行したい位置に<!–、次の行の先頭に–>を書く

だけです。

次の行と書きましたが、<!–と–>の間は基本的に何を書いても無視されますので、間に何行開けてもかまいませんし、適当に説明書きを書くこともできます。

例えば↓こんな感じです(かなり省略してますが、僕のフリースペースから)。
<!--

◆ ブログイメージ
--><a href="/wazameba/" id="site_img"><img ・・・></a><!--

◆グローバルナビ
--><div id="naviarea"><ul class="globalNavi" id="navi"><!--
-->
<li ・・・><!--
-->
</ul></div><!--

◆ 読者登録ボタン・お気に入り登録ボタン・読者数
--><div id="readerMainArea" class="readerMainArea"><!--
-->
・・・<!--
-->
</div>

赤文字の部分が無視される部分です。

これがなくて、全部一行に繋がってたら・・・ほぼメンテナンス不可能になってしまいますよね。

フリースペースの上下に元々広めの余白が設定されている

また、フリースペース内に一切改行がなくても、CSS編集用デザインの初期状態で、フリースペースの上下に元々広めの余白が設定されているため、その余白が不自然に広く感じてしまう場合があります。

これは、ユーザーCSSに設定を追加することで調節できます。

ユーザーCSSについてわからない場合はこちらを参照してください

.freespaceArea {
  margin-top: 0px; /* 上側余白 */
  margin-bottom: 0px; /* 下側余白 */
}

「0px」となっているところを適宜修正すると、好みの空きにできると思います。

というわけで、

フリースペースの改行と上下の余白を調節してきれいに並びました

以上、フリースペースに余分な空間が空いてしまって困る時(上や下も)の対処法でした。

よかったら参考にして下さい。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ