Markdown記法ではてなブログを書くときのカスタマイズまとめてみた

こんにちは、イエロー（@inahime_poke）です。

前の記事で書いたように、はてなブログでMarkdownを使いはじめました。めっちゃ便利です。ただ、はてなブログの「見たまま」とは一部勝手が違います。例えば、複数改行、フォントの色や大きさの変え方、動画やTwitterの埋め込み方などがそうです。

ぼくが実際に困ったことをもとに、Markdownではてなブログを書くときのカスタマイズについて書いていこうと思います。

おことわり

ぼくはただのMarkdown愛好家みたいなもんです。もっといえばただの趣味です。HTMLもCSSもごく初歩的なところしか知りません。

まとめは作りましたが、質問されても的確な答えが出せるとは限らないことを予めご承知おきください。ただしまとめた情報について、出典を明示するよう心がけましたのでそちらのリンクへ飛んでもらえればと思います。

基本的なMarkdown記法については、先人の知恵を借りましょう。すっごく便利です！とりあえずこれがあれば書きたいことはほとんど書ける。

改行をいじる

基本的にMarkdownでは複数の改行ができません。したがって、文字と文字の間の余白が十分に取れず、不満に思う方もおられるかと思います。ここでは2通りの方法を挙げておこうと思います。

複数改行をする

1つ目がこちら。やや力技になりますが、どうしても必要なときは<br />タグを使うと改行できます。

この方法ならいくらでも余白を取ることができますね！ただ毎回この手順を踏むのは、ちょい煩雑なんですよねー。改行のたびにHTMLタグ使うってちょっと困る。そんなわけでもう1つの方法が次に紹介する方法です。

行間を調節する

改行が1回しかできないなら、改行の行間を大きくすればいいんじゃない？ってことでCSSで行間を調節しましょう。

ここに載ってたCSSコードを、PC用とスマホ用に貼り付ければ終わり。ご丁寧に貼り付け方まで乗せてくれています。

フォントの色や大きさを変える

Markdownは基本的にプレーンテキストで書かれることを想定しているのが出発点なので、フォントをいじるって項目があまりありません。そこでそのカスタマイズをいくつか紹介。

「強勢」の斜体を変えて赤字にする

Markdownでは、「*」が強勢を表します。しかし欧米言語ならともかく、日本語において「強勢を斜体で表す」ってことあんまりないですよね。でも強勢は使いたい。「じゃあ強勢を斜体じゃなくて赤字にしちゃおう」ということで、CSSいじってしまいます。

em {
font-style: normal; /* 斜体にしない */
color: #ff0000; /* 文字を赤色にする */
}

ちなみにスマホ用はちょっと違います。はてなブログだと設置場所は「記事下」です。

<style type=text/css>
.entry-content em {
font-style: normal; /* 斜体にしない */
color: #ff0000; /* 文字を赤色にする */
}
</style>
出典：http://www.nishishi.com/css/text-overunderlines-2.html （アレンジ）

次に見るように、文字の色を変えようとするといちいちHTMLタグを使わないといけないので、強勢で1色でも簡単に設定できるようにしておくと圧倒的に便利です。「#ff0000」だと赤色になりますが、他の色がいいということならばコードを指定してみましょう。

HTMLとCSSで指定する

Markdownではこのように文字の太さを変えることはできますが、HTMLで直接指定する方法

※単純に1色しか使わないのであれば、先ほど紹介した「「強勢」の斜体を変えて赤字にする」がオススメです。

まず最初の方法がこちら。※出典はこちらのサイトです

• 大きさを変える
  <span style="font-size: 20px">大きさを変えたい文字</span>
  「: 20px」の数値をいじれば、自由に大きさを変えることができます。
• 色を変える
  <span style="font-color: #ff0000>色を変えたい文字</span>
  「: #ff0000」の数値をいじれば、自由に色を変えることができます。
• 大きさと色を同時に変える
  <span style="font-size: 20px; color: #ff0000;">大きさと色を変えたい文字</span>
  両方変えたいときはこちら。要領は同じです。

CSSで定義する方法

おすすめの方法がこちら。毎回HTMLタグで色を呼び出すのってめんどくさいですよね！？赤なら「red」って入力できたら楽ちんです。なので、その方法を採用します。

先ほどと違うのは、色をいじるときにHTMLで直接色を指定するのではなくて、CSSで定義した色を呼び出してきます。以下の一節を見て以来、「確かにCSSで色を決めといたほうがいいなあ…」と思うようになりました。

そして多くのマニュアルサイトが「CSSで設定したほうがいいよ？」「あとあと楽なのよ？」とCSSで設定することを推奨していたにも関わらず、その有りがたい助言を「覚えるのが面倒そう・大変そう」という先入観から見事にスルーして、数ヵ月後･･･その助言に従っておくべきだったと痛感することになったのが管理人のパターン。
出典：http://pointsite-net.info/html-css-moji/

手順1. CSSで色を定義する

以下のコードだと、「red」が「#ff0000」、「gray」が「#C0C0C0」ですよーって定義していることになります。

/*文字の色*/
.red {
color:#ff0000;
}
.gray {
color:#C0C0C0;
}
出典：http://pointsite-net.info/html-css-moji/

他にも定義したければ、コード追加すればいいと思います。

手順2. HTMLタグで書く

<span style="font-size: 20px; color: red;">大きさと色を変えたい文字</span>
両方変えたいときはこちら。要領は同じです。

※手順1をすっ飛ばして「<span style="font-size: 20px; color: red;">大きさと色を変えたい文字</span>」と書いても、色が変わりませんのでご注意ください！

あれこれ埋め込む

はてなブログの「見たまま」モードのように、ブログにいろんなものを埋め込みたいですよね！↓こんなやつ

はてなブログ以外でも、基本的な発想はリンクの埋め込みと同じです。[埋め込みたいURL:embed]でいけます。

ちなみにリンクの埋め込みのときに[リンク先のURL:embed]って記述するんですけど、この「:cite」の部分を省けば、埋め込みのときに出てくる邪魔なURLを消すことができます。ちなみにぼくは全部消してます（）

動画を埋め込む

こちらに記載がありました。[動画のURL:embed]でいいらしい。簡単すぎワロタｗｗ

Twitterを埋め込む

上記参照元と同じです。[ツイートのURL:embed]でいけます。

【ゆるぼ】Markdownに自信ニキ

— イエロー (@inahime_poke) 2016年11月10日

Markdownを使ってはてなブログを書くことは十分可能です！

随時更新予定ですが、暫定的には以上です。

Markdown自体は、互換性もあってすぐれた記法だと思っています。あとはブログのデザインをMarkdown記法にどう合わせるかですよね。で、その時のカスタマイズって、なんだかんだ探してみればけっこう転がってます。この記事がその一助になれていたらいいなーと思います。

以下、関連記事です。

きょうの　ぼうけんは　ここまで
イエローでした～