晴れ時々晴天なり

韓国ドラマやアニメの事が中心の雑記ブログです。

はてなブログの「Markdownモード」について編集画面からではわからない記法まとめ

スポンサーリンク

はてなブログの編集モードには「見たまま」「はてな記法」「Markdown」の3種類ががありますが、僕は「Markdownモード」で記事を書いています。

はてなブログを利用するようになって始めてこの記法を知りましたが、まぁ簡単。
そして、HTMLタグもそのまま使えるので最近はMarkdownモードで書くようになりました。

ただ、編集画面上では、これといった記述方法の説明がありません。

そこで僕が良く使う記法を中心に「Markdown記法」を紹介したいと思います。
※編集画面のメニューから設定出来るものは省略しています。

Markdown記法まとめ

Markdown記法まとめ

見出しタグ<h1~h6>

記述例

# 見出し1<h1>
## 見出し2<h2>
### 見出し3<h3>
#### 見出し4<h4>
##### 見出し5<h5>
###### 見出し6<h6>

まずは見出しタグですね。
こちらは編集画面でも設定出来ますが、見出しのはじめに#を入れます。
はてな記法の場合、頭に*を入れることで同様の処理となりますが、*1個で<h3>扱いとなりh1、h2を使いたい場合にはHTMLで記述する必要があります。
その点、Markdownでは自由にhタグを利用出来るのですごく便利です!

<h>タグについての記事はこちら
www.aritai.net

強調<em><strong>

記述例

*強調する文字*<em>
**より強調する文字**<strong>

次に強調表示です。
編集画面の上段メニューにある<b>タグ(太字)とは違います
記事内で強調したい文章の前後に*を入れます。

*1つで強調<em>、*2つでより強調<strong>扱いとなります。

コード <code>

こちらはプログラムのソースコードを記事内に書く場合に使用します。
例えば、はてなブログの場合、記事内にURLを書くと、自動リンクが適用され勝手にリンクされますよね!

こんな感じ
http://www.aritai.net/

これを防ぐためにURLの前後に`を入れます。

記述例
`http://www.aritai.net/`

結果
http://www.aritai.net/

応用編

スペースや改行をそのまま表示させたい場合には上下に```を入れます。

結果

<p>
  <a href="http://www.aritai.net/">晴れ時々晴天なり</a>
</p>

画像サイズ <width>

カツヲ

例えばこの画像、横幅が300pxです。
コードは[f:id:kasakasa7970:20160113193805g:plain]

この画像のサイズを変更したい場合、plainの後ろに:w希望サイズを入力するとサイズを変更することが出来ます。

150pxにしたい場合
[f:id:kasakasa7970:20160113193805g:plain:w150]

結果

カツヲ

画像alt属性の名前を編集する場合はこちら
www.aritai.net

その他

段落 <p>

段落を入れたい場所に空行を入れる。

記述例

今日はとっても良い天気

明日も天気にな~れ

結果
今日はとっても良い天気

明日も天気にな~れ

改行 <br>

文章の最後に半角スペースを2つ以上入れる。

記述例

今日はとっても良い天気■■(半角スペース2つ)
明日も天気にな~れ

結果
今日はとっても良い天気
明日も天気にな~れ

水平線 <hr>

記事に区切り線を入れたい場合は半角のアンダーバー_を3つ続けて入力して下さい。

記述例
___(半角アンダーバーを3つ)

結果


おまけ

Markdownではありませんが、目次を付ける時に記述する[:contents]の書き方をいつも忘れてしまうので自分用のメモとして記載しておきます^^;
目次って便利だなぁ~

まとめ

Markdownには他にもtableやリスト等たくさんの記法がありますが、tableタグはHTMLが使えるので、そのままHTMLタグを使用した方が簡単だと思います。
今回紹介した以外にも便利な記法があるかもしれませんが、僕がよく使っているMarkdown記法を紹介しました。