記事内でhtmlを使う方は「改行の扱い」指定に注意が必要

この記事を熟読して欲しい人

ブログエディターにはツールバーがまず間違いなく準備されています。FC2ブログもそうです。

WYSIWYGへの切り替えの W を赤く囲ってありますが、スクショを使いまわしているだけで今回は無関係なので無視してください。すみません ^^;

このツールバーはhtmlタグの入力補助で、あまりその「書き方」や「html文字列の見た目」を意識することは無いと思いますので、このツールバーのみを利用して記事を書いている、という方はこの記事は深く考える必要はありません。

これから行う説明をしっかり読んで頂きたいのは ツールバーに存在するもの「以外」のhtmlを使う方 です。

FC2には 禁止タグ というのがありませんので、記事内で自由にhtmlタグを利用することが可能です。例えばどこかのサイトで紹介されていた見出しデザインの採用や、文章をborderで囲ったり背景を付けたり、など。そういった「ツールバーだけでは補完できないもの」を記事内で利用する方に向けての記事です。

エディターのツールバーにある内容以外を求めない、という方を「初級者」と仮定し、なんでもスラスラとhtmlが書けるという方は「上級者」ですね。なのでカテゴライズすると今回の記事は「中級者」向けです。指南やお手本があればhtmlを書ける、という方向け。

で、中級者の方が記事内でツール以外のhtmlを使おうと思った時に最も便利なのは 旧投稿画面 です。新投稿画面のhtmlモードは上級者向けなので、中級に属するほとんどの方は旧投稿画面を選ぶであろう、と仮定しています。

簡単に言うとこの記事は 旧投稿画面の「改行の扱い」設定を熟考してください という内容です。

旧投稿画面の改行は2種

1. 自動改行
2. HTMLタグのみ

この2つを選べるようになっています。この選択肢の意味を知っておかないと即構文エラー、場合によってはレイアウト崩れに繋がります ので説明します。

何度も繰り返し書いていますが、改行というのは

改行ではなく改段落
Enter

改行
Sift + Enter

パソコン歴の長い方でもEnterキー押下イコール「改行」と思っていることが多いのですが、実際は改行ではなく「改段落」です。ほとんどの方が「Enterを押したら改行(次の行に移動する)」という感覚をお持ちなので、その対処のためにFC2は親切にも「改行の扱い『自動改行』」という設定を用意しています。親切なんですよ？実際は改行ではないのに改行として取り計らうという意味ですから。

改行の扱い「自動改行」に設定してEnterキーを押すと、押した位置には <br> タグが自動入力される という仕組みです。そして、ココ重要 自動付加された <br> タグは旧投稿画面であっても不可視(表には出てこない) です。

旧投稿画面のデフォルトモードはhtmlタグが丸見えですよね。ですが改行設定を「自動改行」にして追加される改行タグは出てこないんです。

「あいうえお」「かきくけこ」の各文末で Enterキーを押しています。リアルタイムプレビューにhtmlタグは確認できませんね。この情報をブラウザがどのように受け取っているか、というのが以下の通りです。

「あいうえお」と「かきくけこ」の後ろにしっかり <br /> と記されていますよね。
* <br>と<br />は今回は同じものだと思ってください。
つまり旧投稿画面で

あいうえお
かきくけこ
さしすせそ

と「自動改行」で入力した文章の実際は

あいうえお<br />
かきくけこ<br />
さしすせそ

なんですね。でも自動追加されたタグが目に見えていないものですから、多くの方は「無いもの」と無意識に認識しています。本当は「有る」んです。そして「有る」という事実が時に害になります。

ソースコードの見た目

htmlのコーダーがhtml内容を紹介する際、大抵の場合は以下のような書き方をします。
* コーダー = コード製作者, コードを書く人

<div style="padding: 20px; border: 6px groove black; background: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%); background-color: rgb(110,110,110); background-size: 40px 40px;">
  <div style="padding: 1em; background: rgba(255,255,255,.7); color: black;">
    ここに文章
  </div>
</div>

改行 や インデント が行われていますよね。これらを行うことにより、htmlの入れ子の状態がわかりやすくなります。逆にこうしないとパッと見て構造が把握できないんですね。上記のhtmlが実際にレンダリングされると以下のようになります。

ですが このコードの書き方をして良いのは改行の扱い設定を「HTMLタグのみ」に指定している場合だけ です。何故かというと、上記コードを「自動改行」指定のままコピペしてしまうと実際のhtml内容は

<div style="padding: 20px; border: 6px groove black; background: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%); background-color: rgb(110,110,110); background-size: 40px 40px;"><br />
  <div style="padding: 1em; background: rgba(255,255,255,.7); color: black;"><br />
    ここに文章<br />
  </div><br />
</div>

こうして 全く違うものになってしまうから です。実際の描画はこちら ↓

あきらかに見た目違いますよね。意図せず各パーツが大きくなっていますし、テキスト位置もおかしいですよね。これらはbrタグによって一行分の空白行が作成されてしまったことが原因です。

サンプルケースは「構文エラー」にはかろうじてならないパターンですが、構文エラーになるケースももちろんたくさんあります。リスト(ul要素, ol要素)などを掲載する際には即エラーです。

対処法

改行の扱い「自動改行」の仕組みをご理解頂いたとして、じゃあどうすれば良いのか、という対処。

• HTMLタグのみに変更する
• ソース間改行及びインデントは取り除く

「HTMLタグのみ」に変更した場合には、改行したい文末に <br> と明記する必要が生じます。FC2のシステムで追加される改行タグは <br /> なんですが、html5テンプレートでは <br> が正しい。参考までに。

ちょっと日本の方は改行を使いすぎる傾向にあると思いますので、あえてめんどくさい「HTMLタグのみ」指定にして改行の回数を減らす、というのも良いかもしれない(笑)

もうひとつの方法は「取り除き」です。サンプルコードであれば

<div style="padding: 20px; border: 6px groove black; background: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%); background-color: rgb(110,110,110); background-size: 40px 40px;"><div style="padding: 1em; background: rgba(255,255,255,.7); color: black;">ここに文章</div></div>

こうですね。全部繋げて書く、と。その場で一度使うだけなら良いとして、メンテナンス面では可読性が著しく低下しますのでちょっとどうかなぁ、とは思います。

どちらを選ぶかは個人の選択ですから、自身にとってより容易だと思われる方を選択。

まとめ

FC2の新規ユーザーさんのみならず、古参ブロガーさんでもこの仕様を理解していない方は多いのではないかと思います。この仕組は利便を追求した結果、ということですね。htmlを使わない、というユーザーさんにとって「自動改行」はすごく便利なはずです。htmlを使えるようになる・使いたくなると害が出ますけれども、それと気づいて理解すれば解消できます。

この件は今後も引き続き、度々注意を行っていこうと思います。エディターの仕様が変更されない限り(笑)
* サンプルコードがご入用の方はご自由にお使いください。