おもこん

おもこんは「思いつくままにコンピュターの話し」の省略形です

はじめての「はてなブログMarkdown」（上級編）

はてなブログ、ダイアリー Webアプリ、テクニック Markdown

上級編では、ブログをより分かりやすく、楽しくする技術を紹介します。 はじめてMarkdown記法を勉強する方は「入門編」から読んでください。

目次

上級編

目次を作る

まず、目次を作る機能です。 目次を置きたいところに、

[:contents]

と書きます。 これは、はてな記法という書き方ですが、Markdown記法でも使うことができます。

この記法は、本文にある見出しから自動的に目次を生成します。 目次には次の3種類が使えます。

  • 大見出し（#3つから始まる見出し）
  • 中見出し（#4つから始まる見出し）
  • 小見出し（#5つから始まる見出し）

その他の見出しはこの機能のサポート対象外です。

目次がどのように表示されるかは、このブログの目次を参考にしてください。

表を作る

Markdownで表を作ることができます。 統計や科学技術では、表を使うことによって、簡潔でわかりやすい説明をすることができます。 表ではハイフン（-）と縦棒（|）とコロン（:）の3つの文字を使います。 次の例を見ていただければ、だいたい書き方が分かると思います。

編集画面

|都道府県|人口（単位千人）|
|:-------------:|---------------:|
|東京都|14,010|
|神奈川県|9,236|
|大阪府|8,806|
|愛知県|7,517|
|埼玉県|7,340|
|千葉県|6,275|
|兵庫県|5,432|
|北海道|5,183|
|福岡県|5,124|
|静岡県|3,608|

プレビュー

都道府県 人口（単位千人）
東京都 14,010
神奈川県 9,236
大阪府 8,806
愛知県 7,517
埼玉県 7,340
千葉県 6,275
兵庫県 5,432
北海道 5,183
福岡県 5,124
静岡県 3,608

ポイントになることをまとめます。

  • 1行目は表の各列のタイトルです。両端と項目の区切りに縦棒（|）を使います。縦棒の使い方は2行目以降も同じです。 項目の内容と縦棒の間に半角空白を入れても構いません。半角空白は無視されます。
  • 2行目は、タイトルと内容の区切りを表すとともに、各列の「左寄せ」「右寄せ」「センタリング」を示します。
    • 「左寄せ」左端にコロン（:）を書き、その他はすべてハイフン（-）にします。
    • 「右寄せ」右端にコロンを書き、その他はすべてハイフンにします。
    • 「センタリング」左端と右端にコロンを書き、その他はすべてハイフンにします。
  • 2行目のハイフンの数は任意です。最小1個でも大丈夫です。 Markdown原稿を見やすくするには縦棒が揃うように、空白やハイフンを調節すると良いでしょう。
  • 3行目以降は内容を表します。

※　例で示した表は、総務省統計局の人口推計の統計表第2表からとってきたもので、2021年10月1日時点における、人口上位10位までの都道府県を示したものです。

リンクをお洒落にする

リンクは既に初級編で説明しましたが、実はその表示方法が複数あります。 リンクボタンを使うと簡単に表示方法を選べます。 先程の総務省の人口推計のリンクを用いて使い方を説明します。

  • リンク先のURLを確認する。 コピペすれば一番簡単です。
  • リンクを貼り付けたいところにカーソルを持ってくる。 （文字列の選択は必要ありません）。
  • リンクボタン（編集タグと本文入力枠の間にあるボタンで、見出しの3つ右にある、チェーンのアイコンのボタン）をクリックする。
  • ダイアログが現れる。 URLの入力枠にリンク先のアドレスを入力（またはペースト）する。
  • 入力枠の右側にある「プレビュー」ボタンをクリックする。
  • 下の枠に、「埋め込み」「タイトル」「URL」の3つの選択肢が示される。 そのうちのひとつをクリックで選び、「選択した形式でリンクを挿入」をクリックする。

この操作で編集画面に挿入されるリンクは、はてな記法の「自動リンク記法」のひとつ「http記法」です。 編集画面とプレビューを次に示します。

埋め込み
[https://www.stat.go.jp/data/jinsui/2021np/index.html:embed:cite]

タイトル
[https://www.stat.go.jp/data/jinsui/2021np/index.html:title]

URL
[https://www.stat.go.jp/data/jinsui/2021np/index.html]

「埋め込み」のプレビュー

www.stat.go.jp

「タイトル」のプレビュー

統計局ホームページ/人口推計/人口推計（2021年（令和3年）10月1日現在）‐全国：年齢（各歳）、男女別人口 ・ 都道府県：年齢（5歳階級）、男女別人口‐

「URL」のプレビュー

https://www.stat.go.jp/data/jinsui/2021np/index.html

プレビューを見れば分かるとおり、一番デザインの優れているのは「埋め込み」です。 「埋め込み」では、カード型のリンクとその下にリンク先のアドレスのホスト部分が現れます。 アドレスのホスト部分は「サイテーション citation」（ 引用という意味）と呼ばれます。 サイテーションで表示されるのはホスト部分（www.stat.go.jp）だけですがそのリンクはhttps://www.stat.go.jp/data/jinsui/2021np/index.htmlになっています。

はてなでは、このカード型の部分を「ブログカード」と呼び、ヘルプで説明しています。 それによれば、記事のタイトル、概要、アイキャッチ画像がひとつのカードになったものがブログカードです。

サイテーションが邪魔であれば取り去ることができます。 html記法の:citeを削除してください。

[https://www.stat.go.jp/data/jinsui/2021np/index.html:embed]

html記法の:embedが「埋め込み」を表示するオプションです。 embedは「埋め込む」という意味の英語です。

なお「埋め込み」の技術的バックグラウンドになっているのはOGP（Open Graph Protocol）です。 OGPについては、The Open Graph protocolに説明があります。

数式を表示する

数式は「はてな記法」の「tex記法」を用いて書くことができます。 「tex記法」の書き方は、

[:tex〜〜]

で、「〜〜」のところにTeX書式の数式を書きます。 TeXの数式の書き方については、次の資料を参考にしてください。

いくつか例を示します。

まず、2次関数です。 TeXではy=ax^2+bx+cと書きます。 累乗はハット記号^を用います。 「はてなブログ」のMarkdownでは、ハット記号を脚注を表す記号として用いるため、エスケープが必要です。

[tex:y=ax\^2+bx+c]

y=ax^2+bx+c

このようなエスケープは強調を表すアスタリスクやアンダースコアでも必要です。

[tex: \sum\_{k=1}^{n} a\_{k} = a\_{1} + a\_{2} + \dots + a\_{n}]

\sum_{k=1}^{n} a_{k} = a_{1} + a_{2} + \dots + a_{n}

[tex: a\*b\*c]

a*b*c

ここで、次のような疑問を持つ読者もいるかもしれません。

Markdownでは+記号は「順序なしリスト」を表す特別な文字だからエスケープが必要なのではないか？

その通りです。 ですが、順序なしリストを表す+は行頭でしか現れません。 したがって、行の途中で出てくる+はMarkdownはそのまま+として表示します。 そのため、数式中ではエスケープが必要なかったのです。

ハット、アスタリスク、アンダースコアは行の途中で出てくる可能性があり、Markdownがそれを変換してしまうかもしれません。 （変換されないこともあります。アスタリスクやアンダースコアが1個だけなら、強調にはなりません。そのときは変換されません）。 変換されるような形のハット、アスタリスク、アンダースコアにはエスケープが必要です。 これらの記号は常にエスケープしておけば安全です。

この他に面倒なのは、<記号です。 これは、>記号とセットでHTMLタグを表します。 そのため「tex記法」の中で<x>などと書くと、それがHTMLタグと解釈され、そのまま表示されません。 また、<は1個だけ現れると、HTMLではないと認識され、（HTMLの）エスケープである&lt;に変換されてしまいます。 これを避けるには、TeXの\lt（不等号を表すコマンド）を用います。

編集画面

[tex:x{\lt}y]

プレビュー

x{\lt}y

最後に、一番困るのが&です。 これは、HTMLのエスケープ文字で使われます。 Markdownはエスケープでない&を、その文字自体として出力するため、&amp;に変換してしまいます。 これを避けるには<pre>タグを用いる方法があります。

編集画面

<pre>
[tex:
\begin{align}
(a+b+c)^2 &= (a+b)^2+2(a+b)c+c^2 \\
                  &= a^2+b^2+c^2+2ab+2bc+2ca
\end{align}
]
</pre>

プレビュー


\begin{align}
(a+b+c)^2 &= (a+b)^2+2(a+b)c+c^2 \\
                  &= a^2+b^2+c^2+2ab+2bc+2ca
\end{align}

Markdownはブロック要素のHTMLの中では変換を行いません。 そのため&はそのまま「tex記法」に渡されます。 それ以外のハットなどもエスケープの必要が無くなります。

同様に<div>タグを使うことも考えられます。 divタグでは枠で囲まれずに出力されます。

編集画面

<div>
[tex:
\begin{align}
(a+b+c)^2 &= (a+b)^2+2(a+b)c+c^2 \\
                  &= a^2+b^2+c^2+2ab+2bc+2ca
\end{align}
]
</div>

プレビュー

\begin{align} (a+b+c)^2 &= (a+b)^2+2(a+b)c+c^2 \\ &= a^2+b^2+c^2+2ab+2bc+2ca \end{align}

preタグはブロック要素ですので、インラインで数式を表現したいときには使えません。 しかし、実際問題としてはインラインの数式で&を使うことはほとんどないでしょうから、問題は無いでしょう。

脚注

オリジナルのMarkdownには脚注はありませんが、GFM（Github Flavored Markdown）は脚注をサポートしています。 「はてなブログ」のマークダウンでも脚注を使えます。

脚注を加えたい本文テキストの後に[^文字列]を入れ、脚注を書きたい場所に[^文字列]:〜〜と書きます。 〜〜の部分は脚注の文章です。

編集画面

Markdown[^1]を「はてなブログ」で使ってみよう。
まず、「編集モード」タブをクリックし、「Markdown」を選択する。
・・・・・

[^1]:Markdownは軽量マークアップ言語

プレビュー（脚注はこのブログの最後に現れます）。

Markdown1を「はてなブログ」で使ってみよう。 まず、「編集モード」タブをクリックし、「Markdown」を選択する。 ・・・・・

脚注が現れるのがブログ末なので、使いにくさもあると思います。 ケースバイケースでの使用になるでしょう。

HTMLのspanタグとスタイルシートを使った装飾

文字列に装飾を施すことができます。

  • イタリック体にする
  • アンダーラインをつける
  • 色を変える

HTMLのspanタグとスタイルシートを使います。 HTMLとスタイルシートの詳細は「とほほのWWW入門」を見てください。

編集画面

この部分を<span style="font-style:italic;">イタリック体</span>にします。

プレビュー

この部分をイタリック体にします。

編集画面

この部分に<span style="text-decoration:underline;">アンダーライン</span>をつけます。

プレビュー

この部分にアンダーラインをつけます。

編集画面

この部分を<span style="color:red;">赤く</span>します。

プレビュー

この部分を赤くします。

おわりに

以上で「はじめての『はてなブログMarkdown』」を終わります。 入門編から4回にわたって解説してきましたが、いかがだったでしょうか？ 質問などは、コメントでお寄せください。

また、「はてなブログ」のMarkdown全体をまとめた「はてなブログのMarkdown徹底解説」もありますので、参考にしてください。 長いブログをお読みいただき、ありがとうございました。

  1. Markdownは軽量マークアップ言語↩