つばさのーと

つばさの日常を綴るのーと

【初心者向け】Markdown記法ではてなブログを書くために覚える12個の記述ルール

f:id:tsubasa123:20161130213340j:plain

こんにちは、つばさ(@tsubasa123)です。

はてなブログには「見たままモード」「はてな記法モード」「Markdownモード」の3種類の編集モードが用意されています。

慣れればMarkdownの方が楽、という声をよく聞くので私もMarkdown信者になろうかな、と。それにあたって自分でも書き方をまとめておこうかな、と。何番煎じなのかな、と。

改行と段落わけ

文末に半角スペースを2つ入れると改行(HTML的には<br>タグ)、改行を1つ以上いれると段落分け(HTML的には<p>タグ)になります。

入力例

ラブライブ! School idol project』(ラブライブ スクールアイドルプロジェクト)は、[半角スペース][半角スペース]
学校で結成された架空のアイドルグループの奮闘と成長を描く日本のメディアミックス作品群。[改行]
[改行]
アスキー・メディアワークスランティスサンライズの3社によるプロジェクト。[改行]
[改行]
[改行]
[改行]
2010年に開始した雑誌『電撃G's magazine』の読者参加企画を皮切りに、[半角スペース][半角スペース]
作中のアイドルグループが歌う楽曲のCD、[半角スペース][半角スペース]
作中のライブシーンを担当声優が再現するライブ公演、[半角スペース][半角スペース]
テレビアニメや劇場アニメといったアニメ化、[半角スペース][半角スペース]
スマートフォンゲームや携帯型ゲームといったゲーム化など、[半角スペース][半角スペース]
メディアミックス展開していった。[改行]

出力例

ラブライブ! School idol project』(ラブライブ スクールアイドルプロジェクト)は、
学校で結成された架空のアイドルグループの奮闘と成長を描く日本のメディアミックス作品群。

アスキー・メディアワークスランティスサンライズの3社によるプロジェクト。

2010年に開始した雑誌『電撃G's magazine』の読者参加企画を皮切りに、
作中のアイドルグループが歌う楽曲のCD、
作中のライブシーンを担当声優が再現するライブ公演、
テレビアニメや劇場アニメといったアニメ化、
スマートフォンゲームや携帯型ゲームといったゲーム化など、
メディアミックス展開していった。

見出し(h1~h6)

見出しの設定は「#」を利用します。「#」の数でh1~h6までの指定が可能です。「#」の後ろには半角スペースを1つ入れるのを忘れないでください。

入力例

## 君のこころは輝いてるかい?
### 恋になりたいAQUARIUM
#### 元気全開DAY!DAY!DAY!
##### トリコリコPLEASE!!
###### Strawberry Trapper

出力例

君のこころは輝いてるかい?

恋になりたいAQUARIUM

元気全開DAY!DAY!DAY!

トリコリコPLEASE!!
Strawberry Trapper

URLリンク

リンクの設定はリンクテキストとリンクURLをそれぞれ、[]と()で囲みます。target="_blank"でリンクを設定したい場合は、直接HTMLに記述する必要があるので注意が必要です。注意ってほどでもないですが。

入力例

[ラブライブ!Official Web Site](http://www.lovelive-anime.jp/)

出力例

ラブライブ!Official Web Site

はてなブログでのURLリンク

これはMarkdown記法ではなくはてな記法なのかもですが、カード式の埋め込み等、3種類の記述方式も用意されています。

入力例

[http://www.lovelive-anime.jp/:embed:cite]
[http://www.lovelive-anime.jp/:title]
[http://www.lovelive-anime.jp/]

出力例

www.lovelive-anime.jp ラブライブ!Official Web Site http://www.lovelive-anime.jp/

画像の埋め込み

画像の入力方法はURLの設定方法と似ていて、リンクテキストとURLの前に「!」マークを記述します。

入力例

![ラブライブ!](http://www.lovelive-anime.jp/uranohoshi/js/sunshine_member3.hyperesources/01.png)

出力例

高海千歌

YouTubeTwitterの埋め込み

これらもURLを指定するだけで簡単に埋め込めるようになっているみたいです。はてなブログ、できる子。

入力例

[https://www.youtube.com/watch?v=LxS4fg4g8FQ:embed]
[https://twitter.com/LoveLive_staff/status/801248156562247680?lang=ja:embed]

出力例

リスト・番号付きリスト

リストの表示は「*」、「+」、「-」のどれかを利用します。
番号付きリストを表示したい場合は「1.」「2.」のように、数字とドットを利用します。数字は連番で入力しなくても出力時に連番が振られます。ですが、まぁ、見にくくなるので連番を指定するようにしたほうがよさそうです。

どちらも「#」の時と同じように、記号(番号付きの場合はドット)の後ろには半角のスペースを忘れないようにしましょう。

また、リストを入れ子にして利用したい場合は半角スペース4つ、もしくはタブを1つ挿入します。

入力例

* 高海 千歌(たかみ ちか)
* 桜内 梨子(さくらうち りこ)
* 松浦 果南(まつうら かなん)
    + 黒澤 ダイヤ(くろさわ だいや)
    + 渡辺 曜(わたなべ よう)
    + 津島 善子(つしま よしこ)
* 国木田 花丸(くにきだ はなまる)
    - 小原 鞠莉(おはら まり)
* 黒澤 ルビィ(くろさわ るびぃ)


1. 青空Jumping Heart
2. 決めたよHand in Hand/ダイスキだったらダイジョウブ!
3. ユメ語るよりユメ歌おう
4. 夢で夜空を照らしたい/未熟DREAMER
5. 想いよひとつになれ/MIRAI TICKET


出力例

  • 高海 千歌(たかみ ちか)
  • 桜内 梨子(さくらうち りこ)
  • 松浦 果南(まつうら かなん)
    • 黒澤 ダイヤ(くろさわ だいや)
    • 渡辺 曜(わたなべ よう)
    • 津島 善子(つしま よしこ)
  • 国木田 花丸(くにきだ はなまる)
    • 小原 鞠莉(おはら まり)
  • 黒澤 ルビィ(くろさわ るびぃ)

 

  1. 青空Jumping Heart
  2. 決めたよHand in Hand/ダイスキだったらダイジョウブ!
  3. ユメ語るよりユメ歌おう
  4. 夢で夜空を照らしたい/未熟DREAMER
  5. 想いよひとつになれ/MIRAI TICKET

引用

引用の設定は「>」記号を利用します。

入力例

>高海 千歌(たかみ ちか)
>『サンシャイン!!』の主人公。高校2年生。一人称は「私」。セミショートヘアの頭頂部にアホ毛があり、向かって右側の一部を三つ編みにして黄色のリボンで結び、向かって左側に三つ葉のクローバーのヘアピンを付けている。趣味はソフトボールとカラオケ、特技は鉄棒、卓球及び習字、好きな食べ物はみかん、嫌いな食べ物はコーヒーと塩辛。

出力例

高海 千歌(たかみ ちか) 『サンシャイン!!』の主人公。高校2年生。一人称は「私」。セミショートヘアの頭頂部にアホ毛があり、向かって右側の一部を三つ編みにして黄色のリボンで結び、向かって左側に三つ葉のクローバーのヘアピンを付けている。趣味はソフトボールとカラオケ、特技は鉄棒、卓球及び習字、好きな食べ物はみかん、嫌いな食べ物はコーヒーと塩辛。

表組み

表組みを表示する場合は「|」記号で作りたい行列の分だけエリアを作成します。

どうやら一行目が自動的に見出し(HTMLでいうところの<th>タグ)になり、二行目のコロンとハイフンでその列の文字の配置を決めることができるようです。

ちょっと使い勝手が悪そうな印象ですが、覚えておいて損はないかと。

入力例

|左寄せ|中央寄せ|右寄せ|
|:-|:-:|-:| 
|←|☆|→|

出力例

左寄せ 中央寄せ 右寄せ

強調

文字を強調したい場合は、文字の前後を「**」「__」とアスタリスクかアンダースコア2つで囲みます。

入力例

**μ's**のファンであり、今まで平凡な日々を送ってきた自分も__輝きたい__とμ'sに憧れてスクールアイドルを結成した。

出力例

μ'sのファンであり、今まで平凡な日々を送ってきた自分も輝きたいとμ'sに憧れてスクールアイドルを結成した。

打消し線

文字に打消し線を追加する場合は、文字の前後を「~~」とキャレット?2つで囲みます。

入力例

~~少々おっちょこちょいな面があるが、~~持ち前の明るさと積極性で周囲の人を巻き込んでいく。

出力例

少々おっちょこちょいな面があるが、持ち前の明るさと積極性で周囲の人を巻き込んでいく。

水平線

これはあんまり使うことはないかもですが、一応。HTMLタグでいう<hr>タグです。「*」「-」「_」を3つ以上並べます。

入力例

---

出力例


さいごに

結構いろんなことができるようで、結構長くなってしまいましたが、Markdown記法は慣れればHTMLを直接記述するよりは間違いなく効率アップしそうです。

ただ、リンクの設定やらなんやら、一部の属性はMarkdown記法からは指定できないようなので、これだけで全部を書きあげることは難しそうという印象です。

ドラフトまではMarkdownモードで書いて、そのあと見たままモードで調整して、必用ならHTMLをちょっと書いて、みたいな使い分けができればブログライフが少しは捗りそうな気がしました。まぁ、精進あるのみです。

ではでは、最後までお付き合いいただきありがとうございました。