改段落と改行の違いを知って「新投稿画面」と仲良くなる

新投稿画面の初期設定は「WYSIWYG」です

WYSIWYG (読み方「ウィジウィグ」)というのは htmlタグを意識させずに(htmlタグを非表示状態で)直感的に文章を書けるエディター のことです。この「ウィジウィグ」という単語は頻出で、何か調べたい時に活用できますので覚えておくと良いですね。他に Vidual Editor (読み方「ビジュアル エディター」)という呼称もあります。そして使い勝手の面から「見たままモード, 見たまま編集」という呼び方をされることもあります。

「専門用語とかウゼッ」と思う方もいらっしゃるかも。ですが用語を識っておくと迷う場面を減らせます。例えば 旧投稿画面 にあるこのアイコン。

一番右の 設定 アイコンの左隣に W のアイコンがあります。「WYSIWYG」という単語を知っていれば「W… わ、わーど？？」など迷うことなく「見たままモード・ビジュアルモードへの変更ではないか」と推測できます。

「改段落」と「改行」の違いの理解が最大のポイント

WYSIWYGでは 改段落が要素の終了の機会(tag close opportunity) になっている 点を踏まえておくと役に立ちます。そのためにまず「改段落と改行の違い」を知る必要がありますね。

①【改段落】
Enter

②【改行】
Shift + Enter

多くの方が①の改段落を改行だと誤認しているようです。改行というのはhtmlタグで言うと <br> のことです。正しく改行を行えばキー(Shift + Enter)を押下した時点で <br> が入力され、改行だと思いこんでキー(Enter)を押下するとそれは改段落ですから 要素が終了します。

例えば以下のような文章があります。

もうすぐ夏が本番を迎えます。

この文章に続き、新しい行で

みなさん熱中症の対策は万全ですか？

この文章を書く場合。キーの違いでそれぞれがどのようなhtml内容になるか見てみましょう。

例) ①Enterキー押下による「改段落」

<div>もうすぐ夏が本番を迎えます。</div>
<div>みなさん熱中症の対策は万全ですか？</div>

例) ②Shift + Enterキー押下による「改行」

もうすぐ夏が本番を迎えます。<br>
みなさん熱中症の対策は万全ですか？

①の方は「迎えます。」の後ろでEnterキーを押したので、それが即ち「要素の終了」を意味し、キー押下までに記した文章がdivタグで囲まれる、つまりdiv要素として出力される、という仕組みです。開始が <div> で終了が </div> ですね。開始タグから終了タグまでに囲まれた内容を 要素 と言います。

つまり Enterキーを押したポイントが終了タグ出力のポイント となっているわけです。

こうしてキーの違いによって文章構成が全く違う内容になっていますよね。FC2ブログの新投稿画面では div要素 ですがその他ブログサービスなどでは恐らく p要素 ではないかと思います。pは「段落」を定義するhtmlタグですから後者の方がより正しいのですが、FC2では便宜上pではなくdiv要素としてマークアップされます。

「WYSIWYGで 改行 するとゴミタグだらけになる。」という訴えをよく目にしますが、それは改行ではなく改段落を行っているためで、言ってみればエディターのせいではなく自分のせいなんですね (´・ω・｀)

そして実は 改段落と改行の違いを理解しているとWYSIWYGの使いこなしがとても楽になる んです。

ツールアイコンを利用するのは「ドラッグ選択」してから

これも使いこなしの大きなポイントのひとつです。例えば 見出し を例にします。

既に対象になる文章が記されている場合

以下のような文章があるとします。

赤く囲った部位を「見出し」にしようと思った場合。その前に上記文章は以下の2通りの可能性がありますよね。

①【改段落で構成されている】

<div>Game of thrones 最終章第2話</div>
<div>「七王国の騎士」あらすじ</div>

②【改行で構成されている】

Game of thrones 最終章第2話<br>
「七王国の騎士」あらすじ

この2つの違いは非常に大きいんですね。何故なら「見出し」としてマークアップするには

<h3>テキスト</h3>

こういう形になるんですが、①をそのままh3で囲うことはできない んです。

①構文エラー

<h3>
<div>Game of thrones 最終章第2話</div>
<div>「七王国の騎士」あらすじ</div>
</h3>

②正しい構文

<h3>
Game of thrones 最終章第2話<br>
「七王国の騎士」あらすじ
</h3>

h要素にdiv要素を入れ子することはできませんので構文エラー。ですがWYSIWYGエディターではこのパターン(ツール利用で構文エラーになる可能性)は頻繁に起こりますので、ドラッグ選択による対象の明示が行われると構文の補正が働きます。

①の構文エラーになる可能性がある方を以下の手順のサンプルとします。

こうして選択をしてからツールアイコンをクリックします。

本来はそのままhタグで挟むと構文エラーになるところですが、この手順を守ることによって

<h3>
Game of thrones 最終章第2話<br>
「七王国の騎士」あらすじ
</h3>

<h3> と </h3> に挟まれた内容は構文エラーにならないように自動修正が行われます。

対象になる文章がまだ記されていない場合

既に記してある内容を仕上げる にはドラッグ選択を活用する、と。じゃあ 見出しにしたい内容をまだ書いていない場合 はどうするか。

先程と同じ文章・同じ形にすると仮定し 先に見出しツールアイコンをクリックした場合 には 正しい改行の仕方を知らないと期待する結果を得られません。

ここまでは良いですね。ちゃんと見出しになっていることが確認できます。と、ここで下の行に続く内容ですが、改行のつもりで改段落をしてしまうと

二行目が見出しになっていない様子が見た目からも判断できます。これは本記事の最初に記したように 改段落が行われる = 要素の終了を意味する のですから、最初の一行目の末尾で「見出しは終了している」と判断された結果です。ですから自分が求める結果と違っているとしてもこの結果が正しいんですね。

これを避けるためには 正しい改行の仕方を知っておかなければできない ということに。

正しい改行を行うことで求める結果を得ることができました。

で、「改段落」と「改行」の違いは知っておくべきなんですが、もう長く「Enterが改行」だと思ってきた方にとってはかなり混乱をきたすと思うんですね。お箸の持ち方なんかと同じで、最初からこれが正しいと思って習得すれば何も難しくないんですが、一旦習慣になってしまうと矯正がなかなか難しい。

そういう場合は まず先に文章を書いてからツールを利用する を徹底されると良いと思います。さすればエディターの補正が効く、と。
そうなると 文章よりも先にツールアイコンを押すことはほとんど無い という作業方針になりますね。そしてそれが最もミスが生じる可能性を減らせる方法でもあります。ただし「ほとんど無い」です。「皆無」というわけにはいきません。

リストはドラッグ選択が通じないパターンあり

新投稿画面には リスト を作成するツールも用意されています。「番号なしリスト 」 と 「番号ありリスト 」 です。

例えば以下のようなもの。

これだとなんだかさっぱりわかりませんが、仮に何かの競技の結果だとします。そして 宮崎と三重が同着3位 だとします。

仮にスクリーンショットの内容が全て「改段落」で構成されているとし、「ドラッグ選択 → ツールアイコン」の手順を踏むと以下のようになります。

<div>大阪府 大阪市 aaa高校</div>
<div>福井県 福井市 bbb高校</div>
<div>宮崎県 宮崎市 ccc高校</div>
<div>三重県 津市 ddd高校</div>
<div>東京都 新宿区 eee高校</div>

これではいけませんね。宮崎と三重は同着なのですから、この2つは 3 の印になっていなければ意味を為しません。ではこんどは全てが「改行」だとします。

大阪府 大阪市 aaa高校<br>
福井県 福井市 bbb高校<br>
宮崎県 宮崎市 ccc高校<br>
三重県 津市 ddd高校<br>
東京都 新宿区 eee高校

結果は同じ なんですね。では宮崎と三重だけ改行、他は改段落にしてみます。これが一番求める結果に近そうな気がしますね。

<div>大阪府 大阪市 aaa高校</div>
<div>福井県 福井市 bbb高校</div>
<div>宮崎県 宮崎市 ccc高校<br>
三重県 津市 ddd高校</div>
<div>東京都 新宿区 eee高校</div>

やはり同じです。つまり リストの作成では先に文章を書くとまずい場合がある ということがわかります。今回のように1つのリストアイテムで複数行を使う場合です。

リスト作成をドラッグ選択での一括整形で行う場合 一行分をひとつのアイテム(li要素)と判断する 仕組みになっていますので、その行が改段落によるものか改行によるものかの区別を行いません。それでは正しい内容のリストになりませんので、こういったイレギュラーな形のリストに限っては 先にツールアイコンを押してから文章を書く ことになります。

こうして先にツールアイコンをクリックしてol要素を定義し、その後文章を書いて改段落と改行をしっかり区別する、と。宮崎と三重の頭が揃っていないように見えますが、投稿を押すと綺麗に揃います。以下は実際のol要素です。

1. 大阪府 大阪市 aaa高校
2. 福井県 福井市 bbb高校
3. 宮崎県 宮崎市 ccc高校
   三重県 津市 ddd高校
4. 東京都 新宿区 eee高校

新投稿画面を利用する = 初心者である
と仮定していますので、見出しやリストを使うこと自体少ないかも知れません。それでもツールに存在しているのですから遅かれ早かれいずれは使うかもしれないよね、ということで。いざリストを作成しようとなるとワンアイテム複数行(1つのli要素が複数行)に頭を悩ませることになり、結果的には諦めて横に並べて書く、なんて妥協を迫られることもあるでしょう。改段落と改行さえ知っていればできたのに… という場面です。

初心者さんならばリストを使わずに平打ちで数字を打ってドットを打って… というやり方を選ぶことも。すると今度はサンプルで言うと「宮崎」と「三重」の文頭が揃わないことに悩むんですね。半角スペースや全角スペースで綺麗に揃えることはなかなか難しい、というか ほぼ無理 なので。着順などは「番号ありリスト(ol要素)」を用いるのが視覚的にもわかりやすく、またhtmlというのは見た目ではなく「定義」を扱うものですから、人間でなくクローラー(検索ロボット)へも「順序に意味のあるリスト」だということが伝わります。

まとめ

「htmlを理解する」ことを強いるものではありません。断片でも知っていれば自分が楽できるかもしれないよね、というちょっとしたtipsです。WYSIWYGは易しい反面、実はコツを掴んでいないと意外と扱いづらいものであったりします。この機会に是非「改段落」と「改行」の違いを覚えてくださいね。