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

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

FC2ブログのあれこれ
2019/07/04 4
vanillaice (Akira)
vanillaice (Akira)
中級者向け HTML トラブル対処 新投稿画面 旧投稿画面

これまでも何度か注意喚起をしております。FC2ブログエディターと改行の関係 についてです。
記事内でエディターツールで利用できるもの「以外」の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を使えるようになる・使いたくなると害が出ますけれども、それと気づいて理解すれば解消できます。

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

 4

There are no comments yet.
diamond_gust
旧投稿画面かぁ

ナチュログからFC2へ引っ越そうと思い、試しにインポートしたら
編集画面のhtml上では何ともないのに、プレビューではテーブルの上に
その複雑さに比例して行が空く原因が分からず、検索してこちらへ辿り着きました。

疎いなりにconvert breaksなど変えてトライしましたが、
旧投稿画面を覗くという発想はありませんでした。
テーブルの数はそんなに多くないので、もう旧投稿画面で
<br />を削ることにします。助かりました。

2020/03/13 (Fri) 12:25
vanillaice (Akira)
Akira
To diamond_gustさん

こんばんは。
table要素の方にclass属性がついていれば

.xxx br {display: none}
で見た目だけはなんとか整えることができますが、現状をみてみないことにはなんとも言えませんし、いずれにしろhtml構文的にはよくないですね。エラー扱いはされませんが「変なhtml」にはなってしまいます。
地道な作業で大変だと思いますが頑張ってください ('0')/

2020/03/13 (Fri) 21:42
diamond_gust

旧投稿画面で<br />を削ってもプレビューに反映されず、保存すると消した<br />が復活してしまいました。
「FC2ブログでの「記事の書き方」のコツ【パソコン編】」も軽く読んだ上で、
旧投稿画面のソースをメモ帳にコピー → 新投稿画面のhtml表示モードでペースト → <br />を削ったら意図通り表示されました。
MT形式ログをテキストエディタで編集・保存した時、「改行コードが混在しています、LFに統一しますか?」の意味が分からず
いいえを選択しましたが、今回の作業においては統一した方が良かった・・・のかな?

SNS全盛のご時勢、弱小ブログはいつサービス終了するか分からないという理由での大手への引っ越し決断ですが、
趣味の記録のバックアップの為にこんな試行錯誤が待っているとは思いませんでした。
私は一連の記事で言うところの「初心者」レベルは脱しているつもりですが、このままFC2で行くなら
絶対参考になると思うので、他の記事もゆっくり拝読します。なんか光明が見えてきました。

2020/03/14 (Sat) 16:21
vanillaice (Akira)
Akira
To diamond_gustさん

こんばんは。
該当記事がわかりませんのではっきりとしたことが言えません。いずれにしろ困ったときは一旦テキストエディター(メモ帳など)を経由する、というのは有効な方法でなにかと活用できると思います。

-----
> 「改行コードが混在しています、LFに統一しますか?」の意味が分からず〜

改行コードというのは非常にややこしくてですね。

LF --- line feed 改行してカーソル移動 --- UNIX系
CR --- carriage return 左端にカーソル復帰 --- Mac
CRLF --- carriage return (and) line-feed 改行して左端にカーソル移動 --- Windows

こうしてOS間でも違いがありますので、「diamond_gustさんの場合はこう」とは環境がわからない以上言えないんです。
記事内でhtmlを使うことがある場合には「旧投稿画面 + 改行の扱い『htmlタグのみ』」で書かれるのが一番安全だと思います。tableなどは特に複雑なhtml内容ですからコード間の行移動が無いとメンテナンス時に泣きたくなりますよね ^^;

弊記事が少しでもお役に立てれば幸いです :)

2020/03/14 (Sat) 20:46

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ