はてなブログで未だにaa記法が使えないことに気づいてる人はどれだけいるのだろうか

2017年9月24日

当ページのリンクには広告が含まれています。

はてなブログの編集モードの1つ「はてな記法」では、その名の通りはてなダイアリーなどで使われている「はてな記法」を使うことができます。Markdownとも似ていますが、それのはてな版のようなものです。

はてな独自の記法

例えばウクレレ記法というものがあります。

[uke:C Dm G G7 C]

これでウクレレのコードが表示されます。
↓

…こんなのあるの、はてなぐらいですよね…。そのほかの記法は以下のページに一覧があります。

はてな記法一覧 – はてなダイアリーのヘルプ

そして、これらはてな記法ははてなブログでも編集モードを「はてな記法」にすることで使えます。

編集モード – はてなブログヘルプ

はてなブログで使えないaa記法

便利で変なはてな記法ですが、その中に「aa記法」と言うものがあります。これはAA（アスキーアート）をキレイに表示するための記法で、これを使うとフォントなど調整されて、うまく表示されるようになります。

アスキーアート（AA）を簡単にきれいに表示する（aa記法） – はてなダイアリーのヘルプ

が、これをはてなブログで使うと、うまく適用されません。以下のようになります。

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

なんだこれは…。
ここのソースを見てみると、以下のようになっています。

<pre class="code" data-lang="" data-unlink="">　　 ∩＿＿＿∩
　　 | ノ　　　　　 ヽ
　　/　　●　　　● |　クマ──！！
　 |　　　　( _●_)　 ミ
　彡､　　　|∪|　　､｀＼
/　＿＿　 ヽノ　/´&gt;　 )
(＿＿＿）　　　/　(_／
　|　　　　　　 /
　|　　／＼　＼
　|　/　　　 )　 )
　∪　　　 （　 ＼
　　　　　　 ＼＿) </pre>

data-langが空になっており、クラスも普通のコードのみで言語ごとのものが入っていません。

でははてなブログでaa記法は使えないのか？というとそれも違います。今現在のはてなブログ標準のcssを覗いてみると、以下の記述があります。

pre.lang-aa{font-family:Mona,IPA MONAPGOTHIC,MS PGothic,ＭＳ\ Ｐゴシック,MS Pｺﾞｼｯｸ,MS Pゴシック,sans-serif;font-size:12pt;line-height:18px;padding:0;background:transparent;border-radius:none;-webkit-border-radius:none;-moz-border-radius:none;box-shadow:none}

つまり、aa記法はcssとしては用意されているんです。単にaa記法を使った時にlang-aaが付かないという不具合なんですね。

ではaa記法ではなく自分で<pre class="code lang-aa">～</pre>を使えばいいじゃないか、とやってみます。

<pre class="code lang-aa" data-lang="" data-unlink="">　　 ∩＿＿＿∩
　　 | ノ　　　　　 ヽ
　　/　　●　　　● |　クマ──！！
　 |　　　　( _●_)　 ミ
　彡､　　　|∪|　　､｀＼
/　＿＿　 ヽノ　/´&gt;　 )
(＿＿＿）　　　/　(_／
　|　　　　　　 /
　|　　／＼　＼
　|　/　　　 )　 )
　∪　　　 （　 ＼
　　　　　　 ＼＿) </pre>

結果↓

　　 ∩＿＿＿∩

　　 | ノ　　　　　 ヽ

　　/　　●　　　● |　クマ──！！

　 |　　　　( _●_)　 ミ

　彡､　　　|∪|　　､｀＼

/　＿＿　 ヽノ　/´>　 )

(＿＿＿）　　　/　(_／

　|　　　　　　 /

　|　　／＼　＼

　|　/　　　 )　 )

　∪　　　 （　 ＼

　　　　　　 ＼＿)

(ﾟДﾟ*)ｶﾞﾊｯ

ソースを見てみると、各行に<br>が入ってしまっているようです。これと<pre>の改行が重なってしまい、1行空いて表示されてしまいます。なので、ソース内の改行をなくして代わりに<br>を付けてあげれば…

<pre class="code lang-aa" data-lang="" data-unlink="">　　 ∩＿＿＿∩<br>　　 | ノ　　　　　 ヽ<br>　　/　　●　　　● |　クマ──！！<br>　 |　　　　( _●_)　 ミ<br>　彡､　　　|∪|　　､｀＼<br>/　＿＿　 ヽノ　/´&gt;　 )<br>(＿＿＿）　　　/　(_／<br>　|　　　　　　 /<br>　|　　／＼　＼<br>　|　/　　　 )　 )<br>　∪　　　 （　 ＼<br>　　　　　　 ＼＿) </pre>

結果↓

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

やったね！

…でも、面倒すぎて使いたくはないですね…。