WordPress、はてなブログ、MovableType で複数のブログを運営しているのですが、とにかく思いついたことを勢いのあるまま文章にして打ち込んでいくとなると、マークダウン記法に勝るものはありません。ほぼマウスに手をやること無くガリガリと打ち込みできるので、かなりの量のテキストを短時間で書くことができます。
最近のCMSはどれもマークダウン記法に対応しているので、テキストを大量に書くのならマークダウン記法を使えるようになって損は無いでしょう。
ヨムナ流のテキスト量産環境と、ブログを書くために必要なマークダウン記法のチートシートをおいておきますね。
テキスト量産のための環境整備
ブラウザにリンクコピーツールを導入する
マークダウン記法はリンクを記述することもできるのですが、target="_blank"とか、rel="nofollow"といった細かい属性指定ができないので、リンクについてはアンカータグ（<a href="url">）を直接書き込むのがお薦めです。マークダウンはHTMLタグ混在でもちゃんと表示できますので、無理に全てをマークダウン化することはせず目的に合わせて部分ごとに都合の良い方を使ったほうが良いでしょう。
ただアンカータグをいちいち書くのは面倒なので、ブラウザに拡張機能を導入してリンクを作っています。
Firefox用のリンクコピーツール
何年も前から愛用しているのは、Make Link :: Add-ons for Firefoxです。
以下の設定を適当な名前で登録しておくと便利です。
<a href="%url%" target="_blank" rel="nofollow">%text%</a>
Chrome用のツール
Chromeには、Create Link – Chrome ウェブストアを導入しています。
同じように以下の設定を登録してあります。
<a href="%url%" target="_blank" rel="nofollow">%htmlEscapedText%</a>
リンクコピーツールについて
どちらもかなり古くからある拡張機能なので、最近ではもっと高機能なものがあると思います。ただこの2つは、右クリックしてコピースタイルを選択するという操作方法が同じで、かつ軽量なのでもうずっと手放せません。テキストを選択してコピーした場合は選択した部分が、何も選択しないでコピーした場合はページのタイトルが、アンカーテキストになります。
マークダウンエディタを導入する
マークダウンエディタは、Atomを使用しています。
ブラウザからCMSの入力画面に直接打ち込んでもいいのですが、プレビューがいちいち重かったりオフラインでの作業ができなかったりするので、Atomで作成しDropboxに原稿を保存しています。
特に自分の場合は仕事の都合もあって、デスクトップは Windows、ノートは MacBook というチャンポン状態ですのでWinでもMacでも動くAtomはかなり重宝です。
Atomの設定
Atomは、インストールしたデフォルトの状態で問題なく使えるとは思いますが、初めてマークダウンを扱う人用に、初心者が引っかかる３点だけ説明しておきます。
ファイルの拡張子
マークダウンファイルの拡張子は.mdです。ファイルを作るときに原稿名.mdというように拡張子まで打ち込んでおきましょう。その状態でファイルを開くと、マークダウンモードで編集をすることができます。
プレビューの方法
マークダウンのプレビューは、’ctrl + shift + m’ で見ることができます。かなり便利です。ただ、プレビューを開きっぱなしだと環境によっては重くなります。
表示フォント
表示フォントが簡体字になってしまっていますので、フォントの設定をします。
メニューバーの[File]から、[Open Your Stylesheet]を選択します。スタイルシートのファイルが開きますので、ここにお好みのフォントを設定します。参考までに僕のスタイルシートをおいておきます。なお、コードを書く人は、GitHub – adobe-fonts/source-han-code-jp: Source Han Code JPを頭に置いたほうが良いでしょう。
.tree-view {
// background-color: whitesmoke;
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo";
}
.markdown-preview {
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo";
}
.tab-bar {
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo";
}
.status-bar {
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo";
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo";
}
CMSにマークダウン用のプラグインを導入する
はてなブログ と Movabletype の場合
はてなブログ と Movabletype は、デフォルトでマークダウンが選べるようになっています。いずれも、記事入力画面でマークダウンを選択するだけですぐに利用できます。
はてなブログなら、[設定] - [基本設定タブ] - [編集モード] 欄で Markdownモード をデフォルトの入力モードにすることもできますね。
WordPress の場合
プラグインを入れる必要があります。
JP Markdownか、Jetpack by WordPress.comが良いと思います。
JP Markdown は、Jetpackからマークダウン機能だけを抜き出した軽量プラグインなのですが2015年6月で更新が止まりました。こことは別のサイトで利用していますが今のところ不具合はありません。このサイトでは Jetpack をインストールしマークダウンの機能だけを有効化して利用しています。
マークダウンの使い方
使い方のコツ
マークダウンを使いはじめると、どうせなら全部マークダウンで記述してやろうと思いがちですが、ブログ記事を書く場合はかえって効率が落ちることがあるので HTML 混在をお薦めします。
特に、以下のコードについてはマークダウン記法にこだわらない方が良いでしょう。
- リンク
- 属性の指定ができないためブラウザにツールを入れて効率化する
- 画像や動画などの貼り付け
- CMSの機能をツールバーなどから呼び出して貼り付ける方が速い
- 取り消し線
- 基本仕様のマークダウンでは
<strike></strike>に対応しないので、CMSの機能をツールバーなどから呼び出して HTML で修飾する
- 基本仕様のマークダウンでは
- 注釈・脚注（はてなブログの場合のみ）
- はてな記法が使えるので、マークダウン記法は使わず二重括弧でくくる
こんな感じの自分ルールを作ってしまえば、かなり効率がよくなります。
見出しと段落と改行
とりあえず、見出しと段落と改行と太字だけできれば記事は書けるのでその部分だけ簡単に説明します。リストやコードの書き方などは、下掲のチートシートを見ればわかりますので説明は省略します。
タブは半角スペース2個に設定
まず、タブキーを打つとスペース2個が入力されるようにエディタを設定しておきましょう。Atom はデフォルトで、タブキー ＝ 半角スペース2個 になっていますので特に何もしなくても良いはずです。
見出し
見出しは、行頭につける # の個数でレベルが決まります。
## 見出し２ という具合に、「#２個・半角スペース・テキスト」 とタイプすると、<h2>見出し２</h2>と変換されます。
なお、文字として # を表示したい場合は、エスケープ記号の\をつけて、\# と入力します。
段落と改行
<p></p>は、改行を２回です。すなわち打鍵は、ENTER２回ですね。
<br>は、半角スペース２個 + 改行です。打鍵は、TAB、ENTER となります。
なお、マークダウン記法で単純に１回の改行をしただけでは、HTML に変換される際に改行されずひと続きの行として表示されます。
強調
太字にするには、**太字**というようにアスタリスク２個ずつで囲みます。
アスタリスク以外にもアンダースコア2個ずつで囲むと同じことができますが、テンキー付きのキーボードを使用している場合だと「テンキーからの入力は半角変換」といった設定にしている人が多いと思いますので、アスタリスクのほうが変換の手間がなくて便利だと思います。
右手がポジションから離れるのを嫌う場合や、変換キーを上手く使いこなしている人は、どちらでも使いやすい方でいいと思います。
マークダウンのチートシート
自分用に作った早見表を、ちょっと体裁整えてPDFにしましたので宜しければどうぞ。
間違いが有りましたら指摘ください。
おしまい。
おすすめの関連記事
WordPress で highlight.js を使用してシンタックスハイライトを導入 – 無料テーマ Xeory の改造
バズ部謹製の 「Xeory-無料WordPressテーマ」に、highlight.js を導入してシンタックスハイライトができるようにしてみました。また、子テー…
コメント