【解説】はてなブログの書き方 Markdown記法

はてなブログで記事を書くのは初めてなので、よく使いそうな機能について、覚えたことをメモしていきます！

一番重要だと思ったことは、ブログを書くとき、ソースコードのシンタックスハイライト（キーワードに色が付く機能）を使いたい場合、見たまま編集モードではきの機能を使えないので、Markdown記法か、はてな記法を使う必要があることです。個人的なオススメは、一般的なMarkdown記法を使うことです。ここでは、基本的にMarkdown記法の場合の書き方について書いていきます。

Markdown記法の場合の注意点
見出しの書き方
箇条書きの書き方
目次の作り方
リンク
- リンクボタンを使ったリンクの実現方法
- Markdown記法でリンクを実現する方法
ページ内リンク
表の作り方
画像の貼り方
ソースコードの書き方
Google ColaboratoryのファイルをGist貼り付けする方法
数式の書き方

Markdown記法の場合の注意点

Markdown記法で記載するものは、ブロック要素とインライン要素に分けることができます。

ブロック要素は、段落、見出し、引用、リスト、コードブロック、水平線など、前後に空行があるような塊の要素のことです。一方、インライン要素は、強調、斜体、取り消し線、アンダーライン、リンクなど、基本的には改行を含まない要素のことです。

Markdown記法では、ブロック要素の前後には必ず空行を入れることに注意です！

見出しの書き方

大見出し、中見出し、小見出しを使うと、目次に自動的に反映されます。

はてなブログでは、普通に使ってると、H2タグは使えません。以下のように、H2タグを簡単に使える機能がなくて、H2タグを使うには、Markdown記法なら##を自分で記述するか、もしくは、HTMLで直接記述する必要があります。

以下は各見出しと、Hタグ、Markdown記法の対応付けです。

記事のタイトル：H1タグ（#）
H2タグはHTML編集で自分で作る必要あり（##）
大見出し：↑の見出しの書き方、H3タグ（###）
中見出し：H4タグ（####）
小見出し：H5タグ（#####）
標準：pタグ

以下は、ここの大見出しの記載例です。

### 見出しの書き方

箇条書きの書き方

箇条書きにしたい行で、箇条書きのアイコンをクリックすると、箇条書きが開始できます。箇条書きを停止したいときは、再度、箇条書きのアイコンを押せば終了できます。

箇条書きの注意点は、箇条書きはネストして書くことができますが、そのネストの途中で画像を入れると、箇条書きに合わせて画像が右側に寄ってしまうことです。

画像の前後に空行を入れると画像のネストは回避できますが、その後、箇条書きのネスト構造がリセットされてしまい、箇条書きのネストを継続できません。

以下は、箇条書きの構造化がリセットされる例です。

* 箇条書き1
  * 箇条書き1-1
  * 箇条書き1-2

<figure class="figure-image figure-image-fotolife" title="画像生成AIで生成された画像">[f:id:daisuke20240310:20240410203018j:w200:alt=画像生成AIで生成された画像]<figcaption>画像生成AIで生成された画像</figcaption></figure>

  * 箇条書き1-3

箇条書き1
- 箇条書き1-1
- 箇条書き1-2

箇条書き1-3

対策としては、見出しを正しく使い、必要以上に箇条書きを使わないことでしょうか。私のように、パワーポイントの箇条書きを文章の構造化に使ってしまう癖がある方は注意です！

Markdown記法の場合、箇条書きの項目の間に空行を入れると行間が広くなる（今、ここで書いてる箇条書きは空行を入れていない）
複数行を選択した状態で、箇条書きアイコンをクリックすると、まとめて箇条書きにしてくれる

以下は、箇条書きの改行を入れない場合と、改行を入れた場合の記載例と、その表示結果です。

改行を入れない場合

* 箇条書き1
* 箇条書き2
* 箇条書き3

箇条書き1
箇条書き2
箇条書き3

改行を入れた場合

* 箇条書き1

* 箇条書き2

* 箇条書き3

箇条書き1
箇条書き2
箇条書き3

目次の作り方

目次を入れたい場所で、目次のアイコンを押すだけで、目次が作成してくれます！

大見出し、中見出し、小見出しが、自動的に目次に反映されます。

リンク

通常は、実現方法が簡単なリンクボタンを使った方法を使えばいいと思います。

もっと柔軟な指定方法でリンクを実現したい場合、Markdown記法で直接リンクを記載します。例えば、「リンクテキストにタイトルを使いたいんだけど、ブログタイトルまで入ってほしくない！」などという場合です。

リンクボタンを使ったリンクの実現方法

この方法は、埋め込み、タイトル、URLの3種類の方法が使える。以下に記載例とその表示結果を示す（リンクボタンを押さなくても、URLをコピーした後に、Ctrl+Vとすると同じことが実現できます）。

埋め込みを使用した場合

[https://daisuke20240310.hatenablog.com/entry/2024/03/16/211436:embed:cite]

daisuke20240310.hatenablog.com

タイトルを使用した場合

[https://daisuke20240310.hatenablog.com/entry/2024/03/16/211436:title]

Optunaによるブラックボックス最適化 - daisuke20240310のブログ

URLを使用した場合

[https://daisuke20240310.hatenablog.com/entry/2024/03/16/211436]

https://daisuke20240310.hatenablog.com/entry/2024/03/16/211436

Markdown記法でリンクを実現する方法

基本は、[テキスト](URL)のように、テキストのところにリンクで表示させたい文字列を記述し、URLのところにリンク先のURLを書きます。

以下は記載例とその表示結果です。

[Optunaによるブラックボックス最適化](https://daisuke20240310.hatenablog.com/entry/2024/03/16/211436)

Optunaによるブラックボックス最適化

ページ内リンク

リンクの場合と同じように、[テキスト](アンカーリンク)のように、テキストのところに表示したい文字列を書き、アンカーリンクのところにリンク先のアンカーリンクを書きます。

以下は記載例とその表示結果です。

[リンク](#リンク)

リンク

ページ内リンクが動作しない場合の対処方法（スペースやピリオド「.」などを含む場合）について、別の記事に書いたので良かったら参考にしてください。

daisuke20240310.hatenablog.com

表の作り方

|と-を組み合わせて、表を作ります。1行目はタイトル行になり、2行目は区切りのために-だけの行を入れる必要があります（-の数は任意です）。

2行目の区切りの-を、:-とすると左寄せ、-:とすると右寄せ、:-:とするとセンタリングになります。

以下は、記載例とその表示結果です。

|タイトル1|タイトル2|タイトル3|タイトル4|タイトル5|
|:-|-:|:-:|-|-|
|aaa|000|***|`xxx`|--:|
|bbb|111|---|[tex: X_i]|:--|
|ccc|222|###|**xxx**|:--:|

タイトル1	タイトル2	タイトル3	タイトル4	タイトル5
aaa	000	***	`xxx`	--:
bbb	111	---	$X_i$	:--
ccc	222	###	xxx	:--:

画像の貼り方

通常は、右サイドバーにある「写真を投稿」を使って、画像を貼ります。以下はその手順です。

写真を投稿を押す
ローカルPCから使用する画像を選択する
キャプションを入力する（キャプションとは、表示される画像の下に付く説明文のこと）
必要に応じてalt属性を入力する（alt属性とは、何らかの理由で画像が表示されない時、画像の代わりに表示されるテキストのことです、検索エンジンに画像の内容を伝えることができるので、入力しておく方がいいと言われています）
画像が貼り付けられます
はてなブログでは、アップできる画像は、毎月300MBまでです（有料プランは3GBまで）
Markdown記法の場合、画像サイズを指定するには、[f:id:xxx:yyyymmddxxx:plain]や、[f:id:xxx:yyyymmddxxx:plain:alt=xxx]となっているところに、:wピクセル数を追加して、[f:id:xxx:yyyymmddxxx:plain:w200]や、[f:id:xxx:yyyymmddxxx:plain:alt=xxx:w200]のようにすればサイズが指定できます

以下は、貼り付けた画像の例です。

ソースコードの書き方

``` と ``` の間にソースコードを書きます。

以下は、ソースコードの記載例とその表示結果です。

print( f"hello world" )

なお、シンタックスハイライトを有効にしたい場合は、最初の ``` の後に、```pythonのように、言語名を書きます。以下は、ソースコードの表示結果です。

print( f"hello world" )

はてなブログで、シンタックスハイライトに対応している言語は、以下のページで確認できます。

help.hatenablog.com

また、横方向に画面に収まらないソースコードの場合、テーマによっては、折り返されて表示される場合があります。折り返さずにスクロールバーを表示させるには、CSSを変更する必要があります。

具体的には、はてなブログのブログ管理画面で「デザイン→ カスタマイズをクリック→{} デザインCSS」に進みます。

以下のように、テーマのCSSファイル（ここではデフォルトの「Smooth」のテーマのCSS）がインポートされている記述があります。

/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */

以下のように、末尾に追加すると折り返さないようになります。

pre, code {
    overflow-x    : scroll;
    white-space   : pre !important;
    text-overflow : clip !important;
}

Google ColaboratoryのファイルをGist貼り付けする方法

Google Colaboratoryのソースコードや結果を、ブログに貼り付けたいとき、画像で貼り付けてしまうと、ソースコードを選択できない（コピペできない）ので不便です。

Gistの貼り付けを行えば、簡単に（だいぶ面倒。。）Google Colaboratoryのファイルをブログに埋め込めるので、ユーザに優しいです（GitHubのアカウントが必要です）。

以下は、Gist貼り付けした例です。

artist_animation.ipynb

具体的な手順です。

埋め込みたいGoogle Colaboratoryのファイルで起動する
ファイルメニューの「コピーをGitHubのGistとして保存」をクリック
GitHub上？で、同じ内容のGoogle Colaboratoryのファイルが起動されますが、何もすることは無いので、このウィンドウは閉じます（なぜGoogle Colaboratoryの画面になる？公開する前に編集させるため？）
自分のGitHubにアクセスして、右上のアカウントのアイコンをクリックして、「Your gists」をクリックする
↑で作成したGistが一番上に確認できますが、Secretになっており、このままではブログ側で参照できないので、ファイル名をクリックする
Google Colaboratoryのファイルの内容が表示されるので、右上のEditをクリック
右上の「Make public」をクリック（これで公開されます）
Google Colaboratoryのファイルを埋め込めたい記事を編集できる状態にして、右のサイドバーの「＋」をクリックして、「Gist貼り付け」を有効にする
Gist貼り付けが表示されるので、GitHubのアカウント名を入力して、連携をクリックする
公開したGistが表示されるので、埋め込みたいファイルを選択して、「選択したアイテムを貼り付け」をクリックすると、埋め込みが完了する

数式の書き方

[tex: xxx]のように、xxxのところに、Tex記法を使って書きます。インライン要素の場合は、[tex: X_i] と書くと、 $X_i$ と表示されます。以下はブロック要素の記載例と、その表示結果です。

なお、align='center' は、センタリングを意味するので、センタリングしたくない場合は何も指定しません。class='scroll' は、折り返さないという意味で、これはデフォルトでそうなっているのか、記載しなくても表示は変わりませんでした。

<div align='center' class='scroll'>
[tex: \displaystyle
v_\pi(s) = \sum_{a,s'}\pi(a \mid s)p(s' \mid s, a)\{r(s, a, s') + \gamma v_\pi(s')\}
]
</div>

$\displaystyle v_\pi(s) = \sum_{a,s'}\pi(a \mid s)p(s' \mid s, a)\{r(s, a, s') + \gamma v_\pi(s')\}$

<div class='scroll'>
[tex: \displaystyle
v_\pi(s) = \sum_{a,s'}\pi(a \mid s)p(s' \mid s, a)\{r(s, a, s') + \gamma v_\pi(s')\}
]
</div>