初心者に分かり易い簡単な「はてな記法」の使い方

（約 4,800文字の記事です。）


「要するにどうやってはてな記法を使うの？」というのをストレートに書いた記事がなかなか見つからなかったので、ここではこの記事を書きながら、実際のはてな記法の使い方をご紹介。

更新履歴

2020/09/05 Googleアドセンスのためにはマークダウン記法がおすすめ
2020/01/14 一部わかりにくい表現などを修正。

将来的にGoogleアドセンスを考えているならば「マークダウン記法（Markdown記法）」一択

2020/09/05追記 将来的にGoogleアドセンスを考えているならば「マークダウン記法」一択だ。というのも、大見出しN番目とM番目に広告を自動挿入させる、というようなスクリプトがあるのだが、なんと、はてな記法ではそれが動作しないのだ。はてな記法以外では動作するが、この記事を見ている段階で「見たまま編集」に戻る人はいないはずだ。だからマークダウン記法一択なのだ。

はてなブログでマークダウン記法（Markdown）を試す（はてな特有の注意点なども） - 3DCGで何をどう作るか考え中

私は今後、主要な記事をマークダウン記法にて書き直す作業が発生する。何百記事もあるよ（泣）

まず感想

ほとんど見たままモードと同じ使用感で、より快適になる。
はてな記法なんか言われると身構えてしまうが、たいしたことじゃないよ。

安心してGo!

基本的には公式サイトのヘルプを見るべきですが、まずは当記事をサッと眺めて「できること」を確認しましょう。

まずは編集モードを「はてな記法」にして始める

毎回はてな記法を選択するのは大変なので「常にはてな記法」からスタートさせる設定にしましょう。
画像をご覧下さい。

最後に画面の一番下にある「変更する」ボタンを忘れずにクリックすること。

この記事の見方

実際に編集画面で打ち込んだ様子を画像（スクリーンショット）で表示させてます。
ブラウザで見える編集後の見え方と画像とを比較してご覧下さい。

では早速いってみよう。

まずは大見出しの入れ方

こんな感じで書いてます。

中見出し

小見出し

半角アスタリスクが増えただけだね。

どうやって半角アスタリスクを文字として表示させるの？

頭に半角スペースを入れるだけでOK。
*
同様に半角ハイフンの場合も頭に半角スペースを入れるだけ。
-

要するに何でも行頭なら頭に半角スペースを入れるとそれ以降は文字扱い。
なお、文の途中の* や-は特に何もしなくても普通に文字列扱い。

プログラムのソースコードの表示

スーパーpre記法 >|| ～～ ||<を使えばいいらしい。

class Foo
  def bar'baz' # return baz
  end
end

こんなことも可能。
test

HTMLコードをそのまま文字にする

<hr />をそのまま書くと水平線になるけれど、

---

この画像のようにするとHTMLタグも文字として表示できる。
（アンド エル ティー、を半角英字で入力するとタグ全体がただの文字になる。）

ここまでで普通のブログを書く分には十分じゃないかな？

はてな記法でも画面上部のメニューが使えるので、無理矢理キーボードからタイプしなくてもいいし。
番号付きリスト表示もいちいちタイプするよりも数行選んでボタンをワンクリックの方が早い。なので覚えなくてもいい。

（後日追記：リスト表示は複数行をまとめて選択して複数行に一発で記号を入れるという「見たまま編集」と同じことはできません。
最初の1行にだけ記号が貼りつくだけ。複数行に入れたいなら繰り返すしかない。不便ですが仕様です。）

もちろん見出しもボタンから選べるけど、見出しは頻繁に使うと思うのでキーボードからアスタリスクを入れた方が早いだろう。

画像の挿入

これまで通り、ファイルD&Dでもいいし、クリップボード内の画像をペーストしてもいい。

ファイルD&Dならばそのファイル形式でアップロードされる。だがCTRL+Vなどクリップボード内の画像をペーストするとPNG形式の画像としてアップロードされる。
例えばjpegとPNGとではjpegの方が一般的には軽いので閲覧者のスマホの通信量を減らせる。
思いやり、気遣い（笑）

画像ファイルリンクのの末尾が j ならばjpeg、p ならばPNG形式です。豆知識。
私もついついCTRL+Vをする事があるが、pの時にはpng画像は削除して再度jpegをD&Dしてたりします。（閲覧者の立場として）見るときには軽い方がいいもんね。

画像サイズの変更は？

見たままモードではドラッグして画像サイズを変更できたけど、はてな記法ではさすがにドラッグは出来ない。

画像リンクの閉じカギ括弧の直前に、:w480や、:h360などを追加すればいいわけね。

こんなばかでかい画像も、

こんな感じに小さく表示される。これは高さを240ピクセルに制限した例。

指定方法はこちらのサイトが参考になる。
http記法でリンクする任意の画像サイズや回り込みを指定できるようになりました - はてなダイアリー日記
リンク先ははてなダイアリーの例だが、はてなブログでも使える。

その他

画面右側のこのボタンを押すと簡易プレビューできる。


ただ、処理が若干重くなるので、本気のプレビュー（画面上部のプレビューボタン）の前に簡易チェックする感じで使うといい。常用はオススメしない。

リアルタイムプレビューは頻繁にエラーを起こすので常時ONは止めるべし

記事が飛んでバックアップも取れていないときには全滅します。かなりの頻度で遭遇しました。プレビューは画面上部のプレビューボタンから見た方がいい。そうすれば少なくともサーバにバックアップは作成されるはず。

導入後のメリット

今までは見たままモードではてなブログを付けてきたが、イライラすることも多かった。フォントや見出しの指定直後の挙動が不安定。改行後になぜか半角スペースが自動で入る。そこで「はてな記法」を試した結果、快適。

改行が見た目そのまんまなので楽

見たままモードと違って、改行による文字間の幅もエディタ上での見え方の通りになる。SHIFT+ENTERという考えがなくなって、普通のテキストエディタと一緒。改行の数がそのまま縦方向の空きの調整になる。

これ以上の細かい使い方

基本的にはまずは公式サイトのヘルプを眺めて確認した方がいいと思う。

他、参考サイトのご紹介。さすがにここまで使い切れる気がしないが、後で役に立つかもしれない。

社内向け「はてな記法講座（初級編）」を公開します - kiyoblo（@kiyohero）

はてなブログのはてな記法モードでHTMLが使えることを今更知った - karaage. [からあげ]

はてな記法とMarkdown記法との違いも調べたので備忘録として。
「はてな記法」と「Markdown記法」の比較 - Milkのメモ帳

凄い楽になった！！！

見たままモードでは、大見出しを付けた直後の改行のあとにもそのモードが生きていて、平文のつもりが見出しになったりとイライラした。 改行を2回以上入れるとなぜか間に半角スペースが自動挿入されていてイライラした。
画像サイズもサイズ変更したつもりが四隅をドラッグしても画像そのものが移動したり消えたりして不便だった。
水平線を入れるためには一度HTMLモードに切り替えてから <hr />コードを入れたりしていた。いつも見たままモードとHTMLモードとの往復が発生する。

だが、はてな記法でそれらともおさらばだ。

とても楽に書けるようになるので、はてなブログを書くのが継続できそうだと思った人は、是非ともはてな記法で書いて欲しい。

なお、過去に公開した記事はずっとその記法が維持されるので、見たままモードで編集した過去の記事は全て「はてな記法では編集できない」。なので、早めにはてな記法に移った方がいいかもしれない。

今回の創作活動は約1時間15分（累積 約670時間）

（後日追記）

はてな記法の不便なところ

箇条書きや番号付きリストをまとめて複数行に適用できない。

最初の一行にだけ適用される。お思い出し機能専用か。

これは盲点だった。残りの行には ＋ や - をキーボードで入れた方が早いな。

CTRL+Zで元に戻らない操作もある。

例えば間違ったリンク挿入などの時に戻れない。間違った画像挿入の時も然り。
タイピングした内容は戻れるが、半自動的な内容はアンドゥできない

はてな記法もパーフェクトではないが、こればかりはしょうがない。

アドセンスで大見出し単位で手動広告を設定するスクリプトが動かない

これは既知の問題であったらしい。はてな記法以外だと問題ないらしい。というわけで私はMarkdown記法に乗り換えました。このページもMarkdownで書き直しました。不思議（笑）

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

Amazonベーシック モニターアーム シングル ディスプレイタイプ ブラック