こんにちは、面倒くさがりのUtti@gotravelifeです。こんな性格なので効率化出来ることはできるだけ効率化したいと思っています。

その1つがブログを書くこと。文章書くのも編集するのも苦手なので、出来るだけ楽な方法をいつも模索しています。そこで少し前からくらいから導入したのがMarkdown記法です。

今回はMarkdown記法でMacとiPhoneでブログを書いている僕の方法を紹介していきます。

Markdownってなに? 導入のメリットは?

MarkdownとはHTMLの簡易版みたいなものです。ブログをちゃんとHTMLのルールに沿って書くことが、HTMLよりもかんたんに出来ます。

例えば従来、見出しは

<h2>見出し見出し見出し</h2>

なんて書かなければなりませんが、

## 見出し見出し見出し

だけで済んでしまいます。HTMLを正しく書くことはSEO対策の基本ですね。

今回の趣旨はMarkdownの解説ではないので、詳しくは調べてみてみてください。

個人的にブログ記事の見た目、文章構造を出来るだけきれいに整えたいので、以前はすべての記事をHTMLで書いていましたが、Markdownにすることによりコーディングの作業を大分簡略化することが出来ています。

また、Markdownで記事を書いておけば、記事を再編集する時に、HTMLと違い見やすく、再編集しやすくなります。そんな事もあり、SEOに有効だと言われる記事の再編集をするときは、過去記事も全てMarkdown形式に書き直していっています。

wordpressにMarkdownを導入する

それでは実際にMarkdownを導入していく方法を書いていきます。

まず大前提として、ブログの環境、つまり何のブログサービスを利用しているかという問題が有ります。何故ならブログサービスによってはMarkdownに対応していないからです。

このGO TRAVELIFEはwordpressというブログサービスを利用しています。他にははてなブログはMarkdownに対応しているようですが、すべてのブログサービスがMarkdownに対応しているわけではないようです。

今回この記事ではタイトルにもあるように、基本的にwordpressにMarkdownを導入する方法について触れていきます。

wordpressにMarkdownを導入するのに最も効率的な方法はJETPACKというプラグインをインストールしてMarkdownを有効にすることだと思います。

僕は現在このJETPACKをインストールしてMarkdownを利用しています。

JETPACKは他にも様々な機能を搭載していて、僕も利用しているのですが、もしMarkdown以外の機能は必要ないということであれば、JP MARKDWONというMarkdownだけのプラグインもあります。

dropboxに記事の下書きファイルを保存、様々なデバイスからブロクを書く

それでは実際に記事を書くときはどのようにすればよいのでしょうか。ここではMacとiPhoneを使って更新する、やり方を説明していきます。

まず記事下書きファイルを.mdのファイル形式で、保存先をdropboxの特定のフォルダにします。

そして記事ファイルをdropboxに保管することにより、Macからはもちろん、iPhoneやiPadからも瞬時に作業を切り替えられる環境を構築します。

最終的にMacで編集。最後に完成した文章をwordpressの管理画面からに貼り付けてアップするという形をとっています。

おすすめのMarkdown編集アプリ

Markdownを導入してから今日まで様々なエディタを試してきました。そんな中から個人的に気に入っているエディタをデバイス毎に紹介していきます。

MacのおすすめMarkdown編集アプリはMacDownとsublime text

MacではMacdownというアプリをメインで使用しています。

Macdownは非常によく出来ているアプリケーションですが、**無料です!

  • 左にMarkdownのソースコード、右側にプレビュー画面が表示されるという非常にシンプルな作り
  • 日本語対応、バグもほぼなし

といったところが気に入っています。

MacではHTMLで書かれた過去のエントリーを編集する時に、Markdownに変換していくという作業をしています。こういった作業はsublime textで行っています。

sublime textでは同じ文字列を瞬時に選択し、同時に編集できる機能があります。これがHTMLタグを削除してMarkdownにしていくには非常に便利です。

初めての方には慣れが必要かもしれません。ただ、web制作の仕事をしている方には定番の機能ですね。

sublime textにはMarkdownのプラグインがありインストールしているのですが、どうも日本語変換と相性が悪いようでメインでは使っていません。

iPhoneのおすすめMarkdown編集アプリはByword

iPhoneでもいくつかのアプリを試してきましたが、僕が気に入って今も使っているのがBywordというアプリです。

bywordの特徴は

  • dropboxによるファイル同期
  • 日本語利用でもバグがほぼ無く、動作が軽快
  • プレビュー機能
  • wordpressにアップ機能
  • iPhoneとiPadの両方で使えるユニバーサルアプリ

といった点。

最後のwordpressにアップする機能はあまり利用していませんが、その気になればbywordだけでもブログの更新が出来てしまいます。

気になる細かいところ、小手先のテクニック。

この項目では記事作成時に気になる細かい部分や使えるテクニックを紹介していきます。

wordpress (JETPACK利用時)独特のMarkdownルール

wordpress (JETPACK利用時)独特のMarkdownルールがあります。気がついているものだけでもメモしておこうと思います。

  • タイトルの#のあとには必ず半角スペースが必要
  • 打ち消し線の~文章~が有効にならない。

より詳細なwordpress + JETPACKでのMarkdown記法については下記ページが参考になります。

Markdownとhtmlの混在はOK

Markdownはhtmlと混在させて書くことが出来ます。

例えばyoutubeファイルをブログの記事中に貼ったり、アフィリエイトタグをブログの記事中に貼るときなどはhtmlタグをそのまま張っています。

ただし、1つの文章の中にMarkdown記法とhtmlタグが混ざってしまうと問題が発生する場合がありますが、行をわけてMarkdownの行とhtmlの行に分けて書けば問題は発生しません。

Markdownで書いテキストにclassとIDを振る

Markdownを利用していて困っていたのがMarkdownでは基本、HTMLと違い文章にclassやIDを付与出来ないのです。

しかしwordpress + JETPACKを利用していると一部の要素にはIDやclassが利用出来るのです。これをうまく使えばCSSと合わせて表現の幅が広がります。

例えば、リンクや見出しにはclassやIDを付与することが可能です。

[テキスト](URL){.btn}
##見出し1{#content1}

のような表記で

<a href="URL" class="btn">テキスト</a>
<h2 id="content1">見出し2</h2>

のようなhtmlになります。 僕は.btnというclassにはリンクがボタンになるようなcssを書いているので

ボタン

のような見た目になります。

また見出しにIDを付与することができれば、Markdownで書いていても、ページ内リンクを貼ることも出来ますね。

しかしすべての要素にclassやIDが付与できるわけではないようです。例えば強調表示には利用できないようです。

例えば以前は、強調表示に太い文字と太い赤い文字2種類を使っていたのですが、今では基本的に強調表示はただの太い文字のみにしています。

※ちなみに上の文章は下のようにHTMLでマークアップしています。

<strong>太い文字</strong>
<strong style="color:red;">太い赤い文字</strong>

chromeで見ているページのリンクを貼る

chromeでその時みているページのリンクを貼るのに便利なプラグインがCreate Linkです。

HTML方式はもちろん、Markdown形式でも現在見ているページのタイトルとリンクをボタン一つ押すだけでクリップボードに保管してくれるので、macならcommand + Vでリンクコードをかんたんに貼ることが出来ます。

なかなか覚えられないコードをスニペット登録しておく

MacにはClipMenuというコピーした文章を何件も保存したり、よく使うワードを保存してすぐに呼び出せるアプリを入れています。

非常に便利なアプリなのですが、これにMarkdownのコードをいくつか登録しています。

例えば僕は今でもリンクを書く時に先にURLを書くのか、リンクしたいテキストを書くのか混乱してしまうので

[テキスト](URL)

なんていう風に呼び出せるようにスペニット登録してあります。

まとめ

現在、wordpressテーマのリニューアルと共に、記事を書く方法をもっと効率化できないかと色々探っています。現状それなりに効率化したつもりなのですが、それでもまだまだ編集に時間がかかります。

理想はiPhoneだけで作業が完結することなのですが、やはり画像を貼ったり、アフィリエイトタグなどを挿入する作業はiPhoneでは非効率です。

ブロガーのみなさんは一体どんなフローでブログを更新しているのかとっても気になります。もっとこうしたら楽だよ、というのがありましたらぜひぜひ教えてください。

またMarkdownにもすっかり慣れ、最近では、あらゆるメモもMarkdownでとるようになってきました。文章自体は構造化して綺麗に残せるので良いのですが、markdown対応の全文検索可能なevernoteのようなクラウドアプリが見つかっていません。

何か良いのないんでしょうかね。。。