Just Keep Going

技術的なこととか、雑文とか

はてなブログで使うMarkdown記法をまとめてみた

現在登録しているはてなブログですが、今までは「はてな記法」で書いていました。

ただ、はてなブログでしか使えない「はてな記法」を覚えるなら、 汎用的に使われている「Markdown記法」を覚えようという結論に至ったので、「Markdown記法」で基本的な書き方についてまとめたいと思います。

「Markdown」とは何か

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。

Markdown - Wikipedia より

Markdownの書き方

見出し(h1~h6)

見出しとなる文章の前に#をつけます。見出しのレベルは#の数と比例します。

# 見出し1
## 見出し2
### 見出し3
…

段落(p)

空行を一行開けると分けられた文章がそれぞれ段落(<p>タグで囲まれた状態)になります。

段落1

段落2

段落3

改行(br)

下記のように段落のあとに空行を入れずに改行した場合は、段落分けされず一行として表示されてしまいます。

段落1
段落2

段落の中に改行(<br>)を入れたい場合は、改行したい部分で半角スペースを2つ以上入れます。

段落1  (←ここに半角スペースが2つはいってる)
段落2

水平線(hr)

文章などの区切りとして水平線を使いたい場合は、-*もしくは_を一行の中に3つ以上入れると水平線となります。

---
***
___

強調(em、strong)

強調を表現する場合は、*もしくは_で、強調したい文字列を囲みます。
囲む記号の数が1つで<em>、2になると<strong>で囲まれます。

*強調*
**強い強調**

引用(blockquote)

引用を使う場合は>を文章の先頭につけます(先頭につければその後、半角スペースなどで改行をいれていくこともできます)
>の数を増やすことでどんどん入れ子にしていくことも出来ます。

>引用です
>>入れ子になります。

コード(code)

<code>のように文章の中でタグやコードを表示する時に使います。`(バッククォート)で文字列を囲みます。

`文字列`

囲みたい文字列の中にバッククォートが含まれる場合は、``(バッククォート2連続)で囲むことで表示することができます。

`` `バッククォート` ``

整形済みテキスト(pre)

改行や空白をそのままの状態でテキストを表示する場合に使用します。はてなブログにちょっとしたソースコードを載せる時など便利だと思いました。 バッククォート3つ```で表示させたい文章を囲みます。

 ```
 <?php
      echo "hello world";
 ?>
 ```

また最初の```の後に、phpなどの言語名を書くとSyntax Highlightで表示することもできます。

 ```php
 <?php
      echo "hello world";
 ?>
 ```

結果

<?php
     echo "hello world";
?>

リンク(a)

リンクの書き方はいくつかありますが、まずはURLなどをそのままリンクさせる自動リンクの書き方です。
URLの前後をタグのように<>で囲みます。

<http://example.com>

文字列などにリンクを貼り付けたい場合は、下記のように[]()を使います。

[リンクはこちら](http://example.com)

title属性をリンクで使う場合は下記のように記述します。

[リンクはこちら](http://example.com "サンプルサイト")

複数リンクがあった時に、後でまとめてリンク先を指定したい場合は[1]のように適当なID名を振っておいて、後で対応するID名にURLを指定して書くことも出来ます。

[google][1]
[yahoo][2]

[1]: http://www.google.com
[2]: http://www.yahoo.co.jp

画像(img)

画像を表示する場合は、リンクの書き方と似ているのですが先頭に!をつけて、alt属性、画像のURLという順番に記述します。

![サンプル画像](sample.jpg)

もちろん下記のように画像を[]で囲って、リンクを貼ることも可能です。

[![サンプル画像](sample.jpg)](http://example.com)

リスト(ul、ol)

通常のリスト<ul>を作成する場合は、*+-のいずれかを先頭に並べることで表示することができます。記号の後には半角スペースが必要です。 入れ子にして表示したい場合は先頭に半角スペースを2つ以上入れることで可能になります。

- リスト1-1
- リスト1-2
- リスト1-3
  * リスト2-1
  * リスト2-2

番号付きリスト<ol>を作成する場合は、1.のように半角数字とピリオドを先頭につけます。数字は連番じゃなくても自動的に振られます。

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト

テーブル(table)

テーブルも簡単に作ることが出来ます(こちらはもともとは無い機能らしいです。はてなブログでは使えます)
最初に見出しとなる列を書き、次に-を挟み、内容となる部分を書いていきます。 -は各列1つで十分ですが、いくつ書いても問題ありません。列と列の間は|を使って区切ります。

名前|性別|年齢
----|----|----
太郎|男  |24
花子|女  |19

セルの中で中央寄せや右寄せを使いたい場合は-の中に:を入れます。:の位置で左右寄せ、両端につけると中央寄せとなります。

名前|性別|年齢
----|:----:|----:
太郎|男  |24
花子|女  |19

今回は以上となります。

この記事を書くことによって自分の中でも基本的な書き方はある程度理解することが出来たかなと思います。
あとは、慣れていくだけですね。

それでは


参考にさせて頂いた記事
文章作成やメモ書きにも便利、Markdown記法|Web Design KOJIKA17
はてなブログで使えるMarkdown記法 - undefined