ワイヤード・パンチ

元・大阪人が、岡山の山奥でも生きていけることを証明するためのブログ。

記事をHTMLではなくMarkdownで書くことにした。

image

今までブログの記事を書く際、htmlに変換する作業も行っていました。しかし、その作業自体に時間がかかってしまううえに、あとからの修正もしづらく、さらに検索率が高くなる効果があるわけでもなかったので、これからはMarkdown記法で書くことにしました。

広告

これまでの記事の書き方。

image

まずはEvernote上にプレーンな状態で内容を書き上げます。そこに、Evernoteに備わっている太文字機能などを使って、どこを強調するべきか印をつけていきます。ところが、そんなことしても実際にhtml化されたときに、strongタグがつくわけではありません。

image

プレーンなテキストを今度はBracketsなどのHTMLエディタにコピーし、htmlの形式へと書き換えていきます。ただし、htmlへの書き換えには多大な時間がかかってしまうため、jadeという記法で書いています。これなら面倒なタグ囲いが必要ないため、htmlそのままよりは書く時間が減らせるはずです。

image

HTML2Jade – HTML to Jade Online Realtime Converter

しかし、jadeのままでは投稿できないため、htmlに変換する必要があります。ツールでやればすぐに済むので、上記のサイトなどを利用します。出来上がったhtmlコードを投稿画面に貼り付けて投稿しましょう。

HTMLモードの問題点。

Tumblrで記事を投稿する際は、リッチテキスト、HTML、マークダウン、この3つのモードを使用できます。リッチテキストではhタグによる見出しが利用できないうえに、先ほど作ったhtmlコードを使いたいので、選ぶモードはHTMLです。

実際に投稿し、サイトにも表示されました。ところが、間違いが発覚し、修正せざるを得なくなることもあります。

image

すぐに編集画面に戻りますが、コードがおかしくなっていることに気づきます。1つの章を囲うために使っているsectionタグや、見出しのために使うh3タグなど、上の写真のようにリッチテキストモードで使えないタグがある場合、改行されずに横一列に勝手に並べられてしまいます。さらに、以前の記事にも挙げたように、全文の前後にいらないpタグが入るのも面倒です。

あとから把握しやすくなるよう、sectionできっちり章立てしていたのに、これでは意味がありません。また、適切なタグの使い方をしていれば検索率が上がるという意見を信じて、html5の時代にふさわしいsectionタグなども積極的に使ってきましたが、正確なタグの使い分けで効果があるのは人間の見やすさに対してだけであって、検索にほとんど影響はないと思われます。

また、これはTumblrのせいではありませんが、jadeからhtmlに変換する際、どのツールを使ってもなぜかインデントが半角スペース2つになってしまいます。個人的にはこれは、修正しづらくて大嫌いです。タブ1つの方がよっぽど扱いやすいし見やすいのに、なぜスペース2つにこだわるのか。でかく見えるのでバイト数も大きいのかと思ったのですが、測ってみたらタブ1つでも1バイトだったので、スペース2つにした方が容量の無駄です。ますますスペース2つでやる意味がありません。

Markdownの利点。

上記のように、TumblrのHTMLモードには欠点をかかえているため、マークダウンモードに乗り換えることになったのです。

マークダウンの詳しい書き方については他のサイトを見ていただくとして、たとえばh3タグだったら「###」と書けば対応しています。シャープの数だけ階層も変わるので、一目で把握しやすいです。

sectionタグに当たるものはありませんが、sectionをきっちり使ったところで検索的には効果がないですし、「###」と「###」の間にあれば1つの章だと把握できるので、構造も掴みやすいでしょう。

amazonアソシエイトのタグなど、どうしてもマークダウンで書けないものがあっても、HTMLタグをそのまま書けば対応してくれるのも便利です。画像のアップロードの際もいったんリッチテキストに戻らないといけませんが、アップロード後に出来上がるタグをmarkdownでそのまま置いといても、問題ありませんでした。

余談。

マークダウン記法については前々から知っていたものの、sectionなどHTML5から出来たタグをきっちり使う方が良いと勝手に信じ切っていたのが、ほんともったいない。過去に書いた記事をわざわざmarkdownに置き換えるのも面倒なのでしませんが、これから書いていくものに対しては、どんどん使っていく予定です。