エンジニアがWordPressでマークダウンを書く欠点を考える

Table of Content

はじめに

この記事は、WordPress6.0.2で検証・執筆しています。

今日のお話はタイトルの通りです。
まず前提として結局、凝ったことをやろうとするとdivタグを書いたり色々いじったりする必要があるので、デザインを頑張る=見やすい・見ていて楽しい画面を作りたいならマークダウンは合っていません。
誤解を恐れずに言えば、MarkdownとWordPressのビジュアルエディタの相性は最悪と言えます。
ビジュアルエディタとマークダウンはそもそもの目的が違うため、当然と言えば当然です。

なお、デザインをしやすくなるのがマークダウンだと理解されている場合は誤解です。
HTMLタグを簡単に書けるのがマークダウンなので、デザインではなくレイアウトをしやすくなるのがマークダウンであると認識すべきです。

ビジュアルエディタ(ブロックエディタ)とクラシックエディタ(コードエディタ)の違い

まずは前提知識の確認から。
技術者なら人に聞く前にWordPress落としてとりあえず新規投稿画面開け、なんて言われんでもやっとるわ!とブチキレられそうなもんですが、ちゃんと前提の話はしておきましょう。
実際のプロジェクトでも認識が合ってないとおかしくなりますからね。

ビジュアルエディタとは

端的に言うと、ビジュアルエディタは名前の通り、画面を見ながら画面自体を書き換えてデザインができるモードです。
通常の一般的なブログ、たとえばアメーバやらライブドアやらFC2やら、いわゆる無料でも使えるレンタルブログ的なやつのもっとデザインしやすいようにしたエディタ [1] 【無料でも使えるレンタルブログ的なやつのもっとデザインしやすいようにしたエディタ】記事が書きやすい、という観点ではどうだろう🤔 と考えてもらうのが良いかなと思います。
段落ごとに細かい設定(デザイン)ができるのが使い勝手の良いと感じたポイントです。

クラシックエディタとは

まず前提として、プラグインが必要です。

スポンサードリンク

執筆時点のWordPressの最新版はクラシックエディタに対応していません。
無料ブログのような軽くてツールからガチャガチャできるアレコレが欲しい場合は必須のプラグインと言えるでしょう。

なお、マークダウンを書くクラシックエディタは公式では対応していません。
以下が必要になります。

当然ですが、公式のクラシックエディタのような安定感(特に他プラグインとの連携)はありません。
どうしてもマークダウンじゃないとダメな場合に使うようにするのが良いと思います。

LINE風会話のようなフキダシを作る

マークダウンでフキダシは書けますか?

マークダウンでは書けませんが、CSSなりWordPressプラグイン等でショートコードを書けば使えます。

このフキダシはプラグインをビジュアルエディタで使ってますよ。

カスタマイズはできますか?

はい。プラグインはカスタマイズの幅が広く、設定も分かりやすいです。

プラグインだけではできないデザインはCSSを使うと良いでしょう。

後日コードエディタで書いたフキダシのチートコードをまとめて記事にしようと思いますので、そちらも参考にしてみてください。[2] … Continue reading

結局ビジュアルエディタの方がいいの?

そもそも今回ビジュアルエディタにしたのはなぜか?というとクラシックエディタ(Markdown用コードエディタ)で上記のようなデザインを作るために、デザインを頑張らないとダメでした。
楽するためのマークダウンなのにデザインを頑張るのは本末転倒なので、あっさりとビジュアルエディタを使う事にしました。
私は修行僧ではないので、目的を達成するために使いやすいツールを選別して使っていく事にしました。

解説

まず、フキダシプラグインは非常に優秀で、LINE会話風画面を作りたい場合などはコードエディタ(マークダウンエディタ)でも対応しています。
特にフキダシは先述の通り、かなりデザインを頑張らないとダメなんですが、デザインを頑張らなくてもショートコードで色々対応できるように拡張されたWordBalloonならこの問題は解決できました。

マークダウンエディタから挿入機能は使えないので焦ったんですが、作者のページに行くと「作ったフキダシのショートコードをコピーする機能があるよ」という神アドバイスをいただいたので、こちらの通りにやってみたらできました!

https://docs.back2nature.jp/word-balloon/ (プラグイン作者のYAHMANさんによる解説ページです。)

当該ページをピンポイントに案内しようと思ったんですが、他のページにもタメになる情報が多かったので、トピックスのトップページを置いておきます。

ビジュアルエディタを使用する際の注意

マークダウンエディタとビジュアルエディタの互換性?はないようです。
おそらく通常の機能は使えますが、プラグインなどで拡張した部分についてはデータが欠損するので、途中で変更しようとすると色々と失敗します。
ビジュアルエディタで書いたものをコピーするとHTMLタグごとコピーできるので、ビジュアル→クラシック変換はできますが、逆は不可でしょう。[3] … Continue reading

【補足】記事中の注釈

【補足】記事中の注釈
1 【無料でも使えるレンタルブログ的なやつのもっとデザインしやすいようにしたエディタ】記事が書きやすい、という観点ではどうだろう🤔
2 【WordPressでのブログ記事の書き方】よく考えたら、どうやって記事を書いているのか?という話を聞いたことも書いたこともないですね。Qiitaをはじめエンジニアコミュニティではチートコードは探せば見つかりますが、アフィリエイターには有料級の情報になるかもしれません。
3 【ビジュアルエディタ←→クラシックエディタへの変換】全部検証したわけではありませんので絶対ではないですが、データを欠損するのは事実なので気をつけましょう。

シェアする