WordPressのエディター機能をテストしてみた

初めに

　Wordpressに移行してから数日経つが、高機能なWordpressで便利になるよりもむしろ、想定外の仕様に翻弄される悶々とした日々が続いている。当ブログは「Cocoon」というテーマを使用しているが、俺好みの外観にするにあたり「追加CSS」などのカスタマイズを多く施してしまっている。よって数多ある文字装飾などの機能は実質封印されている状況だ（なぜならそれらは初期外観用のスタイルのままだから）。

　基本的に記事には通常の文字の他には見出し（H2～H4）くらいしか使わないので、それらのスタイルさえ意図したとおりなら、特段執筆の妨げになるようなことはないのだが、Wordpressは他にもいろいろなスタイルを提供してくれているので、それらがどういったものか確認の意味を込めて、本記事ではそれらの装飾をテストしてみたいと思う。

　もし気に入ったスタイルがあれば、そのスタイルをこのブログ用に調整して、これからの記事でも率先して利用していきたい所存である。なお、本記事の前半はWordpressの仕様で気づいたことや、それらに対する不満を書いているので、すぐに装飾機能だけ確認したい人は見出しから飛んでくれると幸いだ。

WordPressの投稿エディター仕様

ヴィジュアルエディターの「ブロック」

　Wordpressで記事を書く場合、「ビジュアルエディター」と「コードエディター」という二つの編集スタイルがあり、前者は記事に含まれる要素を実際の見た目に近い形で、後者はHTML形式で表示する。HTMLでは要素をHTMLタグで囲って識別するが、ビジュアルエディターでは要素をさらに「ブロック」という塊として識別する。ブロックは以下のようなHTMLコメントを駆使することで実現しているようだ。

<!-- wp:ブロックタイプ -->
HTMLコード
<!-- /wp:ブロックタイプ -->

　これがまた曲者で、当ブログがWordpressを使う前にBloggerで書いた記事には、こういったコメントは入っていないからして、ビジュアルエディターでは「ブロック」を持っていない状態として扱ってしまうのだ。

　これの何が問題かと言えば、Blogger時代の記事ではビジュアルエディターで「コピペ」が使えない事態に陥ってしまうのだ。もし任意の要素をコピーして任意の部分にペーストしようものなら、記事に含まれる全データが上書きペーストされてしまう。

空タグが読み込まれない

　Bloggerの「作成ビュー（ビジュアルエディターみたいなもの）」にてEnterキーで改行した場合、HTMLでは以下のようなコードとして入力される。

<div><br /></div>　「標準」の場合
<p><br /></p>　「段落」の場合

　しかし他のブログサービスに記事を移植する際には大抵以下のように空タグに変換されてしまう。

<div></div>
<p></p>

　大抵のプラットフォームではそれでも問題なく改行されるのであるが、Wordpressではこういった空タグは無視されるようだ。もっとも、勝手にコードが消されたりするわけではないようで、記事ページのソースコードにはタグがちゃんと含まれているのだが、それが意図した解釈ではないということは、一見してブラウザ側の問題に見えなくもないが、ブラウザに特段変化があったわけではない以上、やはりWordpress側の仕様と断定してしかるべきだろう。

　この仕様のせいで、Blogger時代に書いていた記事は本ブログでは意図した改行が入っておらず、若干長文が続いた場合に可読性が低くなっている点を予め断っておく。手動で修正するのはあまりにも骨が折れるのだ。

　一方、WordpressのビジュアルエディターでEnter改行した場合、以下のようなコードが入力される。

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

　ただの空pタグでは改行しないが、それがparagraph（段落）だとブロック単位で認識していれば改行するようだ。ちなみに以下のコードは改行しない。

<!-- wp:paragraph -->
<div></div>
<!-- /wp:paragraph -->

<!-- wp:division -->
<div></div>
<!-- /wp:division -->

　division（区分）タグに対しての評価が低いようだ。半角スペースを入れたり全角スペースを入れても同様だ。しかし以下のような特殊なスペース文字を用いると、たとえブロック形式でなくとも改行する。

<div> </div>　ノーブレークスペース (U+00A0)
<div>ﾠ</div>　半角ハングルフィラー (U+FFA0)
<div>ㅤ</div>　全角ハングルフィラー (U+3164)

　ノーブレークスペース（non-breaking space）はそのスペースのところで改行が発生しないようになる特殊なスペース文字だ。Windowsで[Alt + 0160]または[Alt + 255]で入力できる。ハングルフィラー（Hangul Filler）は韓国語で使われるスペース文字で、以上のUnicodeを用いて入力するか、直接コピペして入力する。

　これらのスペースは通常のものとは違い、空白除外ルールの規制を免れるので、divタグは内容を持っていると解釈され、通常のdivタグ要素と同じように振舞うことができる。もし既存のBlogger仕様記事の改行部分を、手動で修正していくつもりなら、divタグにこれらのスペースを加えていくのがもっとも簡単だろう。しかし同時に、そうする労力に見合った成果は期待できないのも、また自明の理である。

　結論：めんどくさいなら、諦めろ（笑）

ビジュアルエディターの装飾機能テスト

リスト

　さて、本題の装飾機能テストをしていこう。先までの章で「コード」装飾は充分に確認できた。次は「リスト」だ。

• リストは
• こんなふうに
• 改行するたびに
• 中黒点が（ウチは白いけどね）
• 入るよ

引用

　続いて「引用」だ。

引用はこんなふうに、誰か偉人などのありがた～いお言葉を、さも自分の言葉のように使ってしまわないように、「これは他人の言葉です」と明示するために、おっきな二重引用符（ダブル・クォーテーション・マーク）が表示されるよ。

詳細

　続いて「詳細」だ。下の▶ 詳細をクリックしてみてね。

詳細

詳細とはこんなふうに、ある文字や文章に説明文を追加することができる機能だよ。

カスタムHTML

　続いて「カスタムHTML」だ。

　カスタムHTMLではこんなふうに、外部サービスから提供される「埋め込みコード」や、特定の要素に対してカスタムスタイリングを行ったり、JavaScriptを使ってカスタムスクリプトを使ったりできるよ。今回はGoogleマップでサンフランシスコの名所「ロンバード・ストリート」を表示させているよ。場所に深い意味はないけど、世界一曲がりくねった道のように、俺の人生も書く記事も何もかも、やることなすこと全部遠回りしている感を隠喩しているってことにしておくよ。

スペーサー

　続いて「スペーサー」だ。

　スペーサーはこんなふうに、何もない空間を入れることができる機能だよ。単なる改行よりもスマートな感じがするね？　デフォルトでは高さ100pxに設定されているけど、自由に変えられるよ。

整形済みテキスト

　続いて「整形済みテキスト」だ。

整形済みテキストは、通常の段落ブロックでは無視される改行やスペースが、そのまま表示されるよ。だから「コード」みたいにコードを表示させたり、以下のようなアスキーアートを表示させるのに便利だよ。
 /\_/\               \)\)
( o.o ) ><(((('>    (-.- )
 > ^ <          [_]p(")(")_o

プルクオート

　続いて「プルクオート」だ。

プルクオートも引用スタイルの一つで、中央揃えになっているだけでなく、

こんなふうに引用元まで明示できるよ

テーブル

　続いて「テーブル」だ。

テーブルは	よくある表計算ソフト的な	表を生成して
各ボックスに好きな	文字を入力していけるよ	今回は３×３で作ったから
書くべきことが足りなくなって	自分のヴォキャブラリーが	試されてるよ

詩

　続いて「詩」だ。

詩は吟遊詩人のようなポエムを書くときに
文章を目立たせるだけのスタイルで
特に特別な機能はなさそうで
クラムボンは困っているよ

ボタン

　続いて「ボタン」だ。

カラム

　続いて「カラム」だ。

グループ

　続いて「グループ」だ。

その他

　その他、同じくグループのスタイルとして「横並び」「縦並び」「グリッド（格子状）」があるよ。それぞれ名前の通りの位置関係でブロックを並べられるんだ。

　後は「続き」という

　続きを読んでもらうためにワンクリック必要になるスタイルがあるみたいだけど、これはなぜか効かないね。しかもこれは一つの記事に対して一つしかいれられない仕様になっているよ。後は「ページ区切り」という（↓次へをクリックしてね）