3DCGで何をどう作るか考え中

ZbrushとBlenderの使い方、ヒント、コツなど。たまにZbrushプラグイン開発も。

はてなブログでマークダウン記法(Markdown)を試す(はてな特有の注意点なども)

(約 5,200文字の記事です。)

f:id:yamato-tsukasa:20200902083443j:plain

今まではてな記法で書いてきたが、マネタイズも考えたブログ運営を検討したところ、はてなブログ上の制約・仕様により、特定の自動化スクリプトが機能しないことが分かった。だが過去の「見たまま編集」には戻りたくない。そうだ!はてなブログにはマークダウン記法という手段が残されていたのだ。

というわけで今回は最低限の機能をマークダウン記法で執筆するためのテストです。基本的に編集画面のスクショと実際の見え方とを交互に乗せてます。見れば分かる仕様です。

いくつか罠もあったのでそれも書きます。

はじめに

以下の記事でははてなブログの編集画面上で上の方にあるボタン類のことを「はてなボタン」と呼びます。

f:id:yamato-tsukasa:20200904113933p:plain

このはてなボタンで入力されるコードと、一般的なマークダウン記法とが異なる場合があるので注意。(実害はないのですがそれを知らないと混乱します。)

目次の挿入

これははてなボタンを押せばいい。コードが挿入される。

「続きを読む」

f:id:yamato-tsukasa:20200904114114p:plain

これははてなボタンを押せばいい。コードが挿入される。なお、この「続きを読む」コードははてなブログ専用コードで一般的なマークダウン記法にはない模様。

大見出し

f:id:yamato-tsukasa:20200904114226p:plain

大見出しだとこうなる。半角シャープ3連打+半角スペース。

はてなブログでは見出しはh1からではなくh3からスタートという仕様らしいのでシャープが3連発からスタートらしい。

中見出し

中見出しは半角シャープ4連打+半角スペース。

小見出し

くどい。小見出しは半角シャープ5連打+半角スペース。

段落と改行

空改行は何個入れても2個止まり=段落分け

f:id:yamato-tsukasa:20200904114438p:plain

あいうえお。(空改行を5連発!)

かきくけこ。空の改行を何個入れても合計2個分しか入らない。なので複数改行で段落分けになる。

このルールは次の文章が見出しなどでも適用(例えばこの後から改行を5連発!だが次の見出しは1行空けて下に続いているはず)

改行コード1つは半角スペースになる罠

単なる改行だけだとこのように半角スペース1個でつながってしまう。

f:id:yamato-tsukasa:20200904121512p:plain

あいうえお かきくけこ

これは慣れないと結構な罠。

任意の改行は<br />タグがオススメ

正式なMarkdown記法では「半角スペース2個+改行コード」ということになっている。だが、半角スペースも改行コードも見えない。だから扱いづらい。結論としてはbrタグをIMEなどに登録してタグ直打ちが一番分かりやすかった。

f:id:yamato-tsukasa:20200912154717p:plain

あいうえお
かきくけこ

でもこちらのほうが
わかりやすい

brタグ+改行コードが一番分かりやすい。

強制改行は半角スペース2個+改行コード?

これは分かりにくい例。

f:id:yamato-tsukasa:20200904114743p:plain

次のあ行とか行とさ行の間にそれぞれ半角スペース2個+改行を入れてみた。

あいうえお
かきくけこ
さしすせそ。

引用

これは簡単で、頭に半角の>+半角スペースを置くだけ。後はその段落が引用行になる。<br />タグで続けるか、改行のたびに頭に>を入れてメールの返信みたいにしても複数行を引用行にできる。

f:id:yamato-tsukasa:20200912155150p:plain

引用します

これは

どうかな?

上のように引用符の間の改行やbrタグがあっても無視されて、一つの引用ボックスに入る。もちろん段落分けは有効のまま。

引用になる?
どうでしょう

このように引用符の行内に改行タグがあれば実質1行扱いなので途切れるまで引用扱いになる。こちらも改行自体は有効だ。

なので複数の文章の引用については、引用符>とbrタグでつなぐか、Eメールでの返信のように全ての行頭に引用符を付けるかの二択になる。何かの符号で囲めばいいわけではないのが面倒。



このように、Markdown記法では見た目の改行と実際の改行・段落分けが異なるので慣れるまでは注意が必要。


f:id:yamato-tsukasa:20200904115913p:plain

半角の>と半角スペース。基本的に>一つで1段落を引用表現にする。

引用文です。

>が頭にあれば後は「段落が変わるまで」は全て引用として扱われる。

あああ
いいい ううう

えええ
おおお
かかか

こんな具合です。

太字

f:id:yamato-tsukasa:20200904120130p:plain

マークダウン記法では半角*(こめじるし、アスタリスク)が2連発、あるいはアンダーバー2連発でもいい。お好きな方でOK。

これが太字になります。このこめじるし2個の前後には半角スペースは不要で、もし入れるとしっかり文字として空白が入ります。注意。

太字化はMarkdownの**ではなくてーーや__の利用か、はてなボタンのBタグの利用をお勧めする。アスタリスクははてな記法の見出しで使われているのでマクロなどの機械的な置換でトラブルの原因になる可能性がある。

なお、はてなブログのボタンを押すと<b>タグで挟まれる。HTMLによる修飾だ。

このように例えマークダウン記法にしていても、はてなボタンを押すとHTMLコードを挿入する場合がほとんどだ。斜体、打消し線、下線などについてもはてなボタンの挙動とマークダウン記法とは一致しない。が、斜体、打消し線、下線は利用頻度が低いので私は多分憶えない(笑)はてなボタンによるHTMLタグ表現でいいと思う。

はてなボタンは入力支援機能であり、クリックする段階で既にキーボードタイピングに無関係だからHTMLタグとマークダウン記法の混在はあまり気にしない方がいい。最終的には全てHTMLに変換されて表示されるわけだから。

こだわってもしょうがない。太字はよく使うのでこれだけは憶えることにするが<b>タグでも別に何の問題もない。

打消し線とか斜体とかは「はてなボタン」で

f:id:yamato-tsukasa:20200904113933p:plain

コードを憶えてもいいけど頻度が低いのでマウスで選択してからはてなボタンを押したほうが楽だろう。なので今は憶えないことにする。HTMLタグが挿入されます。

箇条書

f:id:yamato-tsukasa:20200904122656p:plain

これも忘れたら、文字列を1行だけ選んではてなボタンを押せばいい。その後先頭の記号をコピペすればいいだろう。なお複数行選んでも最初の1行にしかコードが挿入されない。仕様です。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • たちつてと

今無理に憶える必要はない。

2020/09/07 追記
箇条書きははてなボタンではアスタリスクになる。だがMarkdown記法ではハイフン+半角スペースだし、私もハイフンと半角スペースの利用を推奨する。というのも、アスタリスクははてな記法では大見出しに相当するので、マクロなどの機械的な文字列置換処理でトラブルの種になる。避けたほうがいい。(そして確かはてな記法でも中点の箇条書きはハイフンだった気がするのだが…。)

ハイフン+半角スペースでもこの通り。なのでこちらのほうがいいだろう。

  • abc
  • def
  • ghi


f:id:yamato-tsukasa:20200904120630p:plain

数字付き箇条書の先頭は全部、半角「1.」+「半角スペース」を付ければ勝手に数字が再割り当てされる。

  1. あいうえお
    1. かきくけこ。
    2. 頭に半角スペース4つで1階層を作れる。
      1. 頭に半角スペース8つで2階層に至る。
      2. 頭に半角スペース4×N階層という発想はなかなか出てこない。
  2. さしすせそ
  3. たちつてと

頭に半角スペース4×N階層という発想はなかなか出てこないので、これだけは憶えた方がいい。なぜか半角スペース2個ではだめで、3個だと機能するが、正式には4個で1つのTABキー相当になるらしいので、素直に4個入れよう。

プログラムなどのソースコード

SHIFT+@キーで入力される「`」(バッククォートという)、これを3連発したものを行頭と行末に入れる。1行の中に入れるとThis is a test coddeこんな感じ。

3連発バッククォート、改行、ソースコード、改行、3連発バッククォートにすると、上下幅の広い表示になる。こっちのほうが使いやすいかも。

This is a test code

ちょっと幅広ですね。

エスケープ文字(半角の円マーク、¥)をつければなんとかなる

Markdown記法で使う記号そのものは、その記号の前に円マークをつければなんとかなる。例えば大見出しを示す### も、

### こんな具合。

他にもコメントにしないで> を示すのも同様に、

> こんな具合。

なお編集画面上の文字の見た目は円マークじゃなくてバックスラッシュになります。

また、逆の半角の不等号は &えるてぃーコロン を半角文字で入力すればいい。

< こんな具合。

これはHTML形式で表示するための制限事項であり、深く考えずに半角で&えるてぃーコロンと入力しよう。あまり使う機会もないだろうし、面倒ならば全角文字として「>」を入力すれば問題ない。乱暴だが見えればいいことのほうが多い。

おわりに マークダウン記法は「ルールに沿ったシステマチックな書き方ができる」

TeXやLaTeXに近いね。書き手がある程度適当に書いても最終出力は定式化した様式で表示されるので、見出し間の前後の空白を改行によって調整されないから、ある意味統制の取れたスッキリした表現になる。

はてな記法よりもちょっとハードルが高いかな?とも思ったが、結局は慣れの問題。あとは少し日本語入力やスニペットツールを変更すれば十分に使える。

というわけで当ブログは今後はマークダウン記法で書いていこうと思います。

あぁ、ブログ中に「見たまま編集」「はてな記法」「マークダウン記法」の大三元が揃うとは……。管理が面倒になるときが来るのは嫌だなぁ(笑)





今回の創作活動は約2時間30分(累積 約1,890時間)
(613回目のブログ更新)

筆者はAmazonアソシエイト・プログラムに参加しています。(AmazonアソシエイトとはAmazon.co.jpの商品を宣伝し所定の条件を満たすことで紹介料をAmazon様から頂けるという大変ありがたい仕組みのこと。)
以下のリンクを経由してAmazonで何かを買うと1~3%ほどのお小遣いが私に寄付されます(笑)