アメブロのフリースペース内で勝手に改行されないようにする方法 - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで - アメブロカスタマイズと読者を増やすブログ運営 初心者からプロまで

アメブロのフリースペース内で勝手に改行されないようにする方法

アメブロのフリースペース内で勝手に改行されないようにする方法

アメブロのフリースペースでは、各行の行末に自動的に改行タグ(<br>)が挿入されるようになっています。

そのため、入力した文が改行も含めてそのままブログ画面に表示されるという便利さがあります。

ですが、カスタマイズでフリースペースを利用しようと思った時など、時にこの自動改行が邪魔になってしまうことがあります。

例えば、グローバルナビのためのHTMLタグをフリースペースに記述する場合、次のように記述すると・・・、

<div id="headerMenu"><ul class="menu" id="menu">
<li><a href="//www.google.com/" target="_blank"><span>グーグル</span></a></li>
<li><a href="//www.yahoo.co.jp/" target="_blank"><span>ヤフー</span></a></li>
<li><a href="//ameba.jp/" target="_blank"><span>アメーバ</span></a></li>
<li><a href="//www.facebook.com/" target="_blank"><span>フェイスブック</span></a></li>
<li><a href="//twitter.com/" target="_blank"><span>ツイッター</span></a></li>
<li><a href="//ameblo-customize.com/"><span>アメブロカスタマイズ</span></a></li>
</ul></div>

各メニュー項目の後に改行タグが自動挿入されるため、メニューが階段状になってしまったりします。

なので、一般的には途中に「改行タグが自動挿入されてしまう行末」を作らないよう、以下のように、全てを一行にまとめて記述しますが・・・、

<div id="headerMenu"><ul class="menu" id="menu"><li><a href="//www.google.com/" target="_blank"><span>グーグル</span></a></li><li><a href="//www.yahoo.co.jp/" target="_blank"><span>ヤフー</span></a></li><li><a href="//ameba.jp/" target="_blank"><span>アメーバ</span></a></li><li><a href="//www.facebook.com/" target="_blank"><span>フェイスブック</span></a></li><li><a href="//twitter.com/" target="_blank"><span>ツイッター</span></a></li><li><a href="//ameblo-customize.com/"><span>アメブロカスタマイズ</span></a></li></ul></div>

これはかなり面倒ですし、ずいぶんわかりにくくなってしまうため、修正する際に変更箇所を間違えるなどの失敗の原因となります。

そこで、本記事では、フリースペース内の任意の箇所に、カスタマイズで利用しやすい勝手に改行されない場所を作る方法をご紹介します。

なお、本記事で紹介する勝手に改行されない場所内では、管理人自身が改行タグ(<br>)を書いても改行されませんので、改行する必要のない範囲のみの利用とすることをお勧めします。

フリースペース内に勝手に改行されない場所を作る

やり方は簡単です。

まず、改行したくない範囲の前に、以下のコードを記述します。

<style>.freespaceArea .nobr br{display:none}</style><div class="nobr">

そして、改行したくない範囲の後に、以下のコードを記述します。

</div>

これだけです。

例えば、これを使って、上記グローバルナビ用のHTMLコードをフリースペースに記述する場合は次のようになります。

<style>.freespaceArea .nobr br{display:none}</style><div class="nobr">
<div id="headerMenu"><ul class="menu" id="menu">
<li><a href="//www.google.com/" target="_blank"><span>グーグル</span></a></li>
<li><a href="//www.yahoo.co.jp/" target="_blank"><span>ヤフー</span></a></li>
<li><a href="//ameba.jp/" target="_blank"><span>アメーバ</span></a></li>
<li><a href="//www.facebook.com/" target="_blank"><span>フェイスブック</span></a></li>
<li><a href="//twitter.com/" target="_blank"><span>ツイッター</span></a></li>
<li><a href="//ameblo-customize.com/"><span>アメブロカスタマイズ</span></a></li>
</ul></div>
</div>

一行にまとめてしまう場合に比べて随分と見やすいと思いますが、如何でしょう?

なお、フリースペース内で、このような改行したくない部分を複数個所作成する場合は、最初の<style>タグ

<style>.freespaceArea .nobr br{display:none}</style>

の部分は1回だけ記述されていれば十分ですので、2回目以降は省略することができます。

以上、アメブロのフリースペース内で勝手に改行されない部分を作成する方法をご紹介しました。

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

注意事項

本記事の方法を使うと、フリースペース内で勝手に自動改行されない部分を作成することができますが、実は「改行が見えない」状態にしているだけで、HTMLの構造上は残っています。

また、上でも書きましたが、本記事の方法作成した勝手に改行されない場所内では、管理人自身が改行タグ(<br>)を書いても改行として表示されませんのでご注意ください。

最新の更新 RSS