マークダウン記法を使ってWordPressの投稿を省力化する

Image [8]

「Windowsでマークダウンファイルをきれいに表示する Haroopad」 でマークダウン記法について書きました。簡単な記法をおぼえるだけで、きれいに整形された文章表現ができることからソフトウェアの使用説明や技術系記事の投稿サイトQiitaでも使われています。
どんどん対応するソフトやサイトが増えてくると思いますが、今日は毎日書いているblogのCMSであるWordPressで投稿するときにもマークダウン記法を使うようにしてみたので、それについて書きます。

今までののWordPressの投稿画面での書き方

今までは、WordPressの投稿画面からblogを書いていました。

まず、投稿するネタが決まったらそれをどのような記事にしようかと考えながら動作させてスクリーンショットを撮ります。スクリーンショットは主にWinshotで範囲指定してコピーし、それをEvernoteに貼り付けていきます。

全部のスクリーンショットを撮り終わったら今度はWordPressの投稿を新規作成して、テキストモードで文章を書きます。このとき、よく使うのは

<h2> 中見出しを書きます。エディタにはないので手書きで開始と終了を書きます。
太字 太字にしたい部分を選択してエディタの [ B ] をクリックします。
リンク 外部にリンクしたい名前を選択してエディタの [ link ] をクリックします。このとき、リンクを新ウィンドウまたはタブで開くを選択します。

これらのタグです。特に<h2>と太字は頻繁に使っています。

最後に画像をエディタ上に載せて、一つずつ貼り付けていきます。

今までの書き方はこんな感じでした。

マークダウン記法が使えるようにWordPressを設定する

マークダウン記法が使えるようにWordPressを設定する、なのですが実は私は何もしなくてもマークダウン記法で書いた文章をコピペすると、自動的に通常の書き込みと同じように表示されていました!
これは既にインストールしてあるプラグイン Jetpack の機能のようです。

Image

ダッシュボード Jetpack>設定 をクリックしてみると

Image [1]

このように Markdown という機能が有効になっていました。

ですので Jetpack を導入していれば今すぐ使えるのかもしれません。お試しください。もし、Jetpackを導入しているのにマークダウン記法が有効で無い場合は、上記の設定画面で 有効化 をクリックすると使えるようになります。

また、他にもWordPressでマークダウンを使えるようにするプラグインはあるようです。

WordPress投稿画面でマークダウン記法を使ってみる

たとえば

Image [2]

このように入力して、表示させてみると

Image [3]

ちゃんとマークダウンを理解して正しく表示されました!これは、、、便利かもしれません。

マークダウン記法でblogを書くと便利だなと思うポイントは、

太字や<h2>を書いてもWordPressの投稿画面では結果の表示をすぐに見ることが出来ません

Image [4]

Haroopad などのマークダウンエディタでは同時にプレビュー画面が出るので編集結果を確認しながら記事を書いていくことができます。

また太字にするボタンを押すのは画面の上部にあり、スクロールしてるとスクロールさせないと押せないなど、ちょっと面倒なのですが、マークダウンエディタなら **(実際は半角)を前後に書けば半角になり、手を止めずに記事を書くことができます。

実際に昨日の記事から Haroopad で書いているのですが、今までに較べてとても快適に速く記事が書けています!

マークダウンでWordPressのblogを書くときの注意点

マークダウンでは文章にlinkを付けるのもとても簡単に書けます。

このように書くと、

Markdown wikipedia

このように簡単にリンク付きのテキストになります。しかし今の画面にリンクされてしまいますので記事に戻るには戻るボタンを押してもらわないといけなくなります。

私がblogをでリンクを付けるときは 別タブあるいは別ウィンドウで開く ことにしたいのですが、マークダウン記法ではその書き方が今のところ見つかっていません。ですのでリンクは今までと同じ、WordPressのエディタで付けるようにしました。

また、画像を貼り付けるのはWordPressのアップロードして挿入する方法が便利ですのでそれを使います。

他にもう一つ、コードを貼り付けるときに ```(本当は半角のバックスラッシュ3つ) で囲みますが、

Image [5]

エディターではこのように正しく表現されるのですが、WordPressのJetpack附属のMarkdownの結果だと、

Image [6]

このように <?php の < が &lt; に変更されてしまいます。

これはちょっとよくわからないのですが、Jetpackのバグなのかもしれず、解決方法が分からないのでコードを囲むのも以前から使っている Crayon Syntax Highlighter を使おうと思います。

Image [7]

Crayonで囲むとちゃんと表示出来ます。

まとめ:記事のおおよそはマークダウンで書いて、最後の仕上げ的にWordPressのエディタをつかうのが良さそう

WordPressのエディタを使う部分もまだだいぶ残っているので「それじゃぁ、全部WordPressのエディタでいいんじゃない?」と思われてしまうかもしれませんが、そんなことはありませんでした。

2日間(今日の記事もマークダウン記法で書いています)、blogをHaroopadで書いてみて、この方法のはとても楽でした。

やなり、書くという行為をWeb上のエディタで行うと、スクロールしてしまったりプレビューが同時にみえないので、それがずっとストレスに感じていました。書きながら付けるタグはほぼ<h2>と太字なので、この部分はマークダウン記法でできます。ということは記事のおおよそはローカルで書けます。

全部書いてからコピーしたものを投稿画面にペーストして、画像を入れたり、リンクを貼ったり、コードをcrayonで囲ったりすれば終了です。

これからはマークダウン記法でblogを書いていきたいと思っています(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る