僭越ながら今更はてな記法の便利さに覚醒してしまった15の夜

Wordpress時代もはてなブログに移ってからも、もっぱらMarkdownでブログを書いていた。むしろ「Markdown便利すぎて本文をHTMLで書くという選択肢はないな」くらいに思っていた。

ところが、先日「Vancouver」というはてなブログテーマを作成したときに【半ば強制で(？)】はてな記法で書かなければいけないところなんかに出くわした。(テンプレートなどは「はてな記法」で記されていて、Markdown用がない)
そういうわけで、分からない部分はGoogle先生にもいろいろお世話になった。

画像の回り込みをはじめとして、はてなでブログを書くときには、「はてな記法」が便利なときがある。
Markdownでブログを書く場合にも、併記できる記法もいくつかある。目次が自動で生成される機能なんていうのも新参はてなブロガーゆえ、最近知ったのであった。

そういうわけで、Markdownは他のWebサービスでも使えるしそれなりに便利だからMarkdownを辞めるつもりは毛頭ないけれど、「はてな記法」の便利な使い方を、僭越ながら自分用に残しておきたいと思う。

画像系

はてなブログのエディターで画像とかリンクを挿入するとその時点で「[　]←こういうカッコ に囲まれたやつ」が挿入されるが、こういうのは「はてな記法」の一種だ。はてなブログのエディターは優秀なので、画像を挿入するとfotolife記法で挿入される。

fotolife記法

ブログのエディターで画像を挿入すると、[f:id:x93mg:20160509184251j:plain]のように表示されるけれど、この:plainを:imageに変えて、続けて以下のような指定をすることで、画像サイズの調整や回り込みの指定ができる。

• small
  長辺60pxの画像を表示
• medium
  長辺120pxの画像を表示
• h●●
  写真の高さを●●pxにする
• w●●
  写真の幅を●●pxにする
• left
  写真を左寄せにして文字を右に回りこませる
• right
  写真を右寄せにして文字を左に回りこませる

そうすると、このような感じで画像の大きさを指定したり、回り込みを指定してあげることもできる。回り込みを解除したい場合には<br clear="all" />を挿入すると、回り込みが解除され、次の段から書くことができる。

自動リンク系

はてなブログでは「http://〜」とURLを打つと自動でリンクを貼ってくれるけれど、そのほかにもいろいろな自動リンク系の記法が存在する。すべてを紹介するには膨大だけれど、ここでは主なものを挙げておく。

目次記法

[:contents]と記述すると、その記事の見出しにあわせて自動で目次を作成してくれる。前後には文字や空白を入れず、1行で指定することが注意点だ。

id記法

id:x93mgのように記すと、はてなユーザーにリンクし、自動トラックバックを送信する。

question記法

question:1462375267のように記すと、人力検索はてなにリンクし、自動トラックバックを送信する。

ちなみに「question:1462375267:title」のように:title付きで記すと「なんで人力検索はてなの人はユーモア欠乏症なの？」とタイトルが表示される。

bookmark記法

b:id:x93mgのように記すと、はてなブックマークにリンクする。

このbookmark記法の応用例としては、

b:id:x93mg:20160510
b:id:x93mg:favorite
b:id:x93mg:asin
b:id:x93mg:t:おっさん
b:t:ヒントくん
b:keyword:アイドルカレッジ

という感じで書いていく。ヒントくんを読み逃した場合にも大活躍するだろう。

keyword記法

キーワードは、二重の角カッコ「[[　]]←こういうやつ」で囲うだけ。あら簡単。

例えば [[朝鮮民主主義人民共和国国防委員会第一委員長]] と入力すると、「朝鮮民主主義人民共和国国防委員会第一委員長」というリンクが自動生成される仕組みだ。

wikipedia記法

[wikipedia:〜]のように書くと、Wikipediaの該当記事に自動でリンクを貼ってくれる。

例えば [wikipedia:欧陽菲菲] と入力すると、「wikipedia:欧陽菲菲」とリンクが貼られる。

google記法

[google:〜]という記法を使うと、Googleの検索結果に自動リンクする。

google:タカダ・コーポレーション
google:image:ガリガリガリクソン
google:news:グレート義太夫

こんな感じで、:imageを付けると画像検索、:newsを付けるとニュース検索になる。ちなみに報告しておくと「グレート義太夫」のニュースは大したニュースではなかったのでご了承ください。

入力支援系

意識しなくてもある程度ブログを書いていると「あっ、これはこういう意味ナノダナ…」とか推測できるようになるけれど、便利なのに一生知らないままでいるであろう誰得記法も存在するので、少し紹介していこう。

見出し記法

見出しは、Markdownなら#に続けて書いていくけれど、はてなブログの場合は*(アスタリスク)に続けて見出しを書いていく。

*大見出し(h3)
**中見出し(h4)
***小見出し(h5)

name属性付き見出し記法

はてな記法では、見出しにname属性をつけることができる。例えば

*bear*美味しいビールの飲み方

とすると、タイトルのname属性にbearが付く。で、これが何が便利かというと、例えば自分のブログ記事にリンクを貼りたい時にhttp://brian.hatenablog.jp/entry/test-entry#beerのようにすると、その記事の見出しのところにリンクが貼れるというわけだ。イチイチHTMLで書いていると面倒だけれど、これは便利。Markdownだとそういった機能はなるべくそぎ落としてシンプルにしているから、name属性はつけられない。

name属性をつける場合は、「*wine*」「*alcohol*」など記事に即した一意のものになるよう、同一記事で被らないようにしておこう。

リスト記法

箇条書きで書く時にお世話になるリストも、簡潔に書き記すことができる。

*くだもの
- りんご
- ばなな
- あえぐれ・まるめのす

*やさい
+ とまと
+ きゅうり
+ らとぅーが・かたろーにゃ

こんな感じで書いていくと、

くだもの

• りんご
• ばなな
• あえぐれ・まるめのす

やさい

• とまと
• きゅうり
• らとぅーが・かたろーにゃ

このように箇条書きで書くことができる。「+」記号でもリスト表記できる点は知らなかったのでメモメモ。

表組み記法

あんまりブログ記事で表組み(テーブル)を使うことはないかもしれないけれど、備忘録として。
半角の縦棒|(キーボードの「￥」もしくは「＼」とShiftキー同時押し)で区切ることで、文章中で簡単にテーブルを記述することができる。

|*名前|*出身|*年齢|*愛称|
|アリシ・トゥプアイレイ|サモア|35|チョコ|
|碧山 (本名：ダニエル・イヴァノフ)|ブルガリア|29|サラミ|

のようにすると、

名前	出身	年齢	愛称
アリシ・トゥプアイレイ	サモア	35	チョコ
碧山 (本名：ダニエル・イヴァノフ)	ブルガリア	29	サラミ

これで好きな選手の愛称も分かりやすく図示することができるので、今夜も安心して眠れそうだ。

スーパーpre記法 (シンタックス・ハイライト)

はてな記法は、整形したテキストをそのまま表示する「pre記法」、整形したソースコードをそのまま表示する「スーパーpre記法」、整形したソースコードをハイライト表示する「スーパーpre記法 (シンタックス・ハイライト)」が存在する。
「ブログでこんなところをカスタマイズしました！」なんていうのを紹介するときには、おそらくシンタックス・ハイライトが一番利用頻度が高いと思う。

>|php|
require_once 'michael_jackson.php';
$speech = 'This is it!';
for($i = 0; $i <= 10; $i++){
  print $speech;
}
||<

require_once 'michael_jackson.php';
$speech = 'This is it!';
for($i = 0; $i <= 10; $i++){
  print $speech;
}

ん？なんかいい加減なコードを書いたらハイライトもいい加減になった。

コードはいままでGistで表示していたけれど、標準でこんな機能付いていたのか。
ちなみにpre記法は>| 整形したい |<、スーパーpre記法は>|| $briancat = 'イケメンになりたい'; ||<みたいに記述する。
着色具合が怪しいので、ちゃんとプレビューで正常に表示するか確認してから使うのがいい。

続きを読む記法

いわゆる「<! -- more -->」みたいなのは、「=」4つ→====を書けば、記事一覧で「続きを読む」を表示させることができる。

私と松坂桃李、どっちがおかずクラブなの？
====
・・・・

私と松坂桃李、どっちがおかずクラブなの？→お前ダヨ！
続きを読む

このように「=」の下の部分はボタンを押してから読むような設定になる。ちなみに上のボタンはサンプルです。

aa記法

aa記法とは、AA(アスキーアート)を綺麗に表示する記法。誰得やねん。

 >|aa|
　　 ∩＿＿＿∩
　　 | ノ　　　　　 ヽ
　　/　　●　　　● |　クマ──！！
　 |　　　　( ●)　 ミ
　彡､　　　|∪|　　､｀＼
/　＿＿　 ヽノ　/´>　 )
(＿＿＿）　　　/　(_／
　|　　　　　　 /
　|　　／＼　＼
　|　/　　　 )　 )
　∪　　　 （　 ＼
　　　　　　 ＼＿)
||<

はいクマー。

tex記法

TeXてふは何かと便利。まあ、基本的にブログに数式書くことなんて一生来ないと思っているけども、一応紹介しておこう。

[tex:x^2 + y^2 = z^2]
[tex:e^{i\pi} = -1]

x² + y² = z²

ウクレレ記法

もう本当に誰得感がハンパないウクレレ記法。開発したの誰だよ。

[uke: |: C _ Am F G7 1 - C :| ]
[uke: 2 - C G7 C]

ちなみに解説ページには転調機能やウクレレの弾き方なども解説されている。

ウクレレは探せば2千円台で買えるので、これからウクレレブログを始めようというかたはぜひ「はてなブログ」をオススメします。

まとめ

今回はすべて紹介しきれなかったので、興味があるひとははてな記法一覧で確認しておこう。

はてなの関連サービスでしか使えないというところもあるので、凝ったブログ記事を書くでもないのであれば正直そんなに必要ないような気もするけれど、今更ながら記法の便利さに覚醒してしまった、15日の夜なのであった。

今日のひとりごと

唐揚げづくりにハマっている。今夜も鶏肉祭り。ヤッター！

そうだ！読者になろう！

読者になる

ブックマークもお忘れなく！

Bookmark!