こんにちは。管理人koheiです。
今回は、前回の投稿「ブログ運営1週目を振り返る」で触れた投稿エディタへの悩みに対してMarkdownプラグインを導入してみたプロセスを記事にしてみます。
「Markdownとはなんぞや？」という人はWikiなどで適当に知識つめつつ、是非以下などで体験してみてはいかがかと。
Stackedit
※GoogleDriveと連携もできている最強マークダウンエディタ。
IT系の人は知っている人も多いと思いますが、知らない人もIT系でない人も覚えておいて損はないはずです。
デフォルトの投稿エディタに対しての不満
まず、前回の悩みというのがこちら。
悩み①：投稿記事のエディタ画面に対しての課題
pタグを自動で設定してくれているようだが、プレビューで見るまで文章の間隔が掴めない
選択しているテーマの問題かもしれないが、本文にも見出しタグを利用する場合、見出しと本文の識別がつけずらい。ずばり見出しには見出しとわかるように背景色をつけたい。
はい、文章でどこまで正しく伝えられてるのかめっぽう自信もないので、次章に頑張ってキャプチャイメージ用意してみました。
プラグイン導入前の投稿工程に対する不満
私の場合、投稿記事は事前にテキストエディタで作成してから、おりゃっと管理画面の投稿エディタにコピペします。
そのあと強調ワードやリンクの設定、画像メディアの差し込みなどの調整をちょいちょいしてから記事の公開をしています。
おそらくそのような方法をとられているWordPressブロガーさん、多いのではないでしょうか。
イメージでいうとこんな感じ。
\
20181127_プラグイン導入前の投稿エディタ
で、この場合、テキストエディタには行間を作るために意図して改行を含ませていたりするのです。
しかしこれをプレビュー画面で確認すると、見事に\pタグに仕上がっているのです！！！
\
20181127_投稿文章のプレビュー画面
「わしは改行したいから改行コードいれとんねん。＜p＞タグとか気取らんでええから、黙って＜br/＞つけとかんかーい！！男は黙って＜br/＞や！」
となるわけですよ。
しかも投稿エディタ上で改行を足そうものなら、前後の行のフォントサイズに左右されて訳がわからなくなるイライラスパイラル。。。
導入してみたプラグインの紹介
そこで今回導入したのが「WP Editor.md」。
WordPressの管理画面 > プラグイン > 新規追加 を選択し、”markdown”で検索するとボロボロとHITします。
今回私がWP Editor.md」を選択した理由は以下です。
- 検索HITするMarkdownプラグインのなかでもそこそこの有効インストール数(3,000以上)の実績
- 最新更新が直近1カ月と検索HITするプラグインの中でもっともメンテナンスがされていそう
- 日本語サイトでの紹介実績が私が調べたところなさそうなので、紹介するにも良さそう
- ぶっちゃけMarkdownエディタなんてどれも大差なさそう（オイ）
プラグインの決定がすんだら、「今すぐインストール」ボタンをポチッとな！！
体感10秒ほどであっというまにインストールは完了します。
プラグイン導入後の投稿エディタ
さてプラグイン導入後のエディタイメージです。
\
20181128_プラグイン導入後投稿エディタ
ふむふむ。正直Markdownのルールはなんとなく分かっているので、エディタ上部のアイコンは正直不要ですが、まぁ忘れたときなどに便利かもしれません。
\
20181128_プラグイン導入後投稿エディタ_リアルタイムプレビュー
そしてもちろん、マークダウンエディタによくある、リアルタイムプレビューも搭載されていました。
ひとまずマークダウンエディタとしては十分使えそうですね！！
悩みは解決できたのか！！？
で、肝心のpタグ問題はどうなったかというと、、、
\
20181128_プラグイン導入後プレビュー画面
「な、、、なんやてーーーーっっっ！！」
プラグイン導入もむなしく、pタグ問題は依然解決されませんでした。。。
そもそもなぜにpタグなのかを疑問視し、調べてみた
しかし、こうやって試行錯誤するうちに、「どうしてpタグとして出力しようとしているのか」と考えるようになり、調べてみましたら理由があっさり分かりました。
▼参考サイト
【HTML】SEO的にNG？やってはいけない「改行」を”2つ”紹介するよ！
▼抜粋
連続brタグはNG！
空pタグもNG！
正しい文法で書かないとSEO的に不利！
どうしてなときは、marginで対応。
なんとこれも立派なSEO対応だったのですね！
さすがSEOに強いとされるWordPress！
そうとは知らない私は勝手にプンスカ怒ってましたよ。
でも、そうなるとやはり自分がやりたい
– 意図的な行間の作成
– 見出しヘッダには背景色
はスタイル、果てはWordPressのテーマカスタマイズでやるべきってことなんですね。
次はGooglePhotoの画像連携
今回はこんな感じでWordPressサイトの管理者目線での記事をつくってみました。
結果的に目的としていた悩みの解決にはなりませんでしたが、そもそもMarkdownの導入はブログ更新作業において大変効果的なことだと思ってますので、やってよかったと思います。
ちなみに今回の投稿もマークダウンで作ってますがはやり個人的に投稿エディタでの調整作業が少なくてすむのでやりやすいです。。
紹介したMarkdown自体も色々触ってみましたが、コード挿入なども結構使いやすいUIで実装されていたりで、おもにIT系の人には利用勝手が良いと感じます。
課題と思ったのは、Markdownでメディア挿入する際にメディアURLを記述しますが、WordPressに登録したメディアURLって動的に決まりそうだから、記事作成時に事前に記載できなさそう、という点です。
この点についてはメディア登録した画像URLを逐一確認していく必要がありそうです。
せめて登録した画像のURL一覧を簡単に取得できるプラグインがあれば、、、と思いましたが、現時点ではなさそう？？？
次回はGooglePhoto連携のプラグインについて導入やれたらやってみようと思います。
以上koheiでした。