はてなブログ のエディタ画面の使い方と Markdown 記法

ブログ記述用に はてなブログ のエディタ画面の使い方と Markdown記法の一部をメモしておきます。
正直言って自分用です、ハイ。

最初に小技を 1つご紹介。Markdown で記述する際には「半角スペース」の入力が必要になる事が多いのですが、Windows を使っている場合は、一々「無変換」キーを押したり英数モードに切り替えて入力せずとも日本語入力モードのままで「Shift + Space」キーを入力すれば半角スペースとなります。知っていれば入力効率が結構上がるかも？（慣れればですけどね）

■　文字修飾

「太字」「斜体」「打ち消し」「アンダーライン」「文字サイズ変更」「文字色変更」については、はてなブログのエディタ上部にあるツールチップを使うのが簡単です。使い方は適用したい範囲をドラッグで選択してツールボタンを押すだけ。対応する htmlタグが自動的に挿入されます。

　 　 　 　 　 　 　 　 　 　 　 　 　 　

ツールチップ	挿入される htmlタグ	実行結果	備考
	<b> 太字 </b>	太字	<em> や <strong> タグも似た効果
	<i> 斜体 </i>	斜体
	<s> 打消 </s>	打消
	<u> アンダーライン </u>	アンダーライン
	<span style="font-size: 80%"> フォントサイズ </span>	フォントサイズ（80％）	80％～200％の4段階。％表記を「px」表記にしてもOK。
	<span style="color: #ff0000"> 文字色 </span>	文字色（赤）	色名やカラーコード直接指定でも可

色見本については以下のページが非常に便利。

■　見出し

・「＃」の個数で htmlタグの「<h1> 〇〇〇 </h1>」～「<h6> 〇〇〇 </h6>」に対応。
・ ブログエディタのプルダウンメニューを使う場合は「大見出し<h3>」～「小見出し<h5>」が使用可。
・「＃」の後には半角スペースが必要。

# 見出し 1
## 見出し 2
### 見出し 3
#### 見出し 4
##### 見出し 5
###### 見出し 6

上の記述の表示例：

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5

見出し 6

■　リスト表示

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・「-」「+」「*」のいずれかの後に半角スペースを置いてから項目記述。
・階層を付ける場合は先頭に1段階に付き半角スペース4個挿入。

- 親項目 A
    - 子項目 α
        - 孫項目 1
        - 孫項目 2
    - 子項目 β
- 親項目 B

上の記述の表示例：

• 親項目 A
  • 子項目 α
    • 孫項目 1
    • 孫項目 2
  • 子項目 β
• 親項目 B

■　番号付きリスト表示

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・番号の後に「.（ピリオド）」と半角スペースを置いてから項目記述。
・階層化は可能だがやり過ぎると見にくそう。

1. リスト A
    1. 子リスト α
    2. 子リスト β
        1. 孫リスト X
        2. 孫リスト Y
2. リスト B

上の記述の表示例：

1. リスト A
   1. 子リスト α
   2. 子リスト β
      1. 孫リスト X
      2. 孫リスト Y
2. リスト B
   
   

■　引用

・ブログエディタ上部ツールチップの「 」からでも使用可能。
・「>」に続いて半角スペースを置いてから引用する文章を記述。
・「>>」「>>>」でやろうと思えば2階層目、3階層目も可能。

> このように引用する文章が表示される
>> 2階層目

上の記述の表示例：

このように引用する文章が表示される

2階層目

■　リンク・ブログカードの挿入

・ブログエディタ上部ツールチップの「 」からリンクを張りたい URLをペーストすれば使用可能。
・直接エディタ上にURLをペーストしても同じ。

埋め込み：　[https://chateau-vulpes.com/:embed:cite]
タイトル：　[https://chateau-vulpes.com/:title]
URL　　：　[https://chateau-vulpes.com/]

上の記述の表示例：

埋め込み：カード風になります。　chateau-vulpes.com タイトル：　（新）タイトルいつ決めるのさ
URL　　 ：　https://chateau-vulpes.com/

ちなみに埋め込み時に「:embed:cite」の「:cite」を消しておくと のようにブログカード下の URL が消えてちょっとすっきりします。

■　画像挿入

　「はてなフォトライフ」にアップロードした画像を貼り付ける場合
　　　1.　ブログエディタ右のツールバーから「」をクリックして貼り付けたい写真を選択。
　　　2.　「選択した写真を貼り付け」をクリックし必要に応じて alt属性などを記入して貼り付け。

このような形式のコードが貼られる。⇒　[f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像]

　　　3.　サイズ調節、位置調節も可能。

幅150pxで左に文章を回り込みさせた場合　⇒　[f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像:w150,right]

ここに文章が入る。

幅150pxで右に文章を回り込みさせた場合　⇒　[f:id:ユーザー名:ファイル名j:plain:alt=サンプル画像:w150,left]

ここに文章が入る。
回り込みを解除させたい所で「　<br clear="all">　」を入れておくこと。

但し複雑なこと（URL埋め込みなど）をさせたい場合は htmlタグの方が分かりやすい。
自分で貼り付けた画像のURLを取得したい時は画像右クリックから「画像のURLをコピー」が楽。

■　水平線

・改行してから「---（上の場合）」「- - -（下の場合） 」を入力して更に改行。

---

---

■　脚注

・付けた脚注には自動的に番号が振られ、内容は全てブログ末尾にまとめて表示される。
・ブログエディタ上部ツールチップの「 」を使って以下のように記述。

脚注を付けたい文章　((ここに脚注を書きます))

上の記述の表示例：

脚注を付けたい文章　*1

■　コメントアウト

・下のサンプルの（）内にコメントアウトしておきたい文章を記述。
・途中に改行も入れたい場合は htmlタグ（<!-- 〇〇〇 -->）の方が便利かも。

[](コメントアウトしたい内容)

■　URL を自動リンクにさせない方法

・Markdown で http や https から始まるアドレスやメールアドレスなどを記述すると自動リンクになっ
　てしまいます。
・これを防ぐには、対象の文字列をバック･クォート（｀）で囲みます。
　例えば、https://chateau-vulpes.com/ と書くと自動リンクになってしまうものを、

`https://chateau-vulpes.com/`

と書くことで、https://chateau-vulpes.com/ のように自動リンクさせずに記述することができるようになります。

---

尚、表を作る時は素直に html を使う事にしました。自由度が格段に違います・・・。

Markdownライティング入門　プレーンテキストで気楽に書こう！ (技術の泉シリーズ（NextPublishing）)

*1:ここに脚注を書きます