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

f:id:c-miya:20170924213003p:plain

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

はてな独自の記法

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

[uke:C Dm G G7 C]

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

CDmGG7C

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

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

はてなブログで使えない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ゴシック,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>

結果↓

   ∩___∩
   | ノ      ヽ
  /  ●   ● | クマ──!!
  |    ( _●_)  ミ
 彡、   |∪|  、`\
/ __  ヽノ /´>  )
(___)   / (_/
 |       /
 |  /\ \
 | /    )  )
 ∪    (  \
       \_)


やったね!

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

けっこう前からある問題

この問題自体、結構前からあります。

4年前の記事で言及されていますが、特に改善は無いようですね。

…というか、この記事の時点(& 私が数か月前に確かめた時)ではaa記法の時はクラス名が「lang-」となっていたはずなんですが、今は「lang-」自体付かないようになっています。おそらくスーパーpre記法の対応している言語以外は付けないように変更したんですね。

…aa記法は直ってないようですが。

一応でも不具合報告しておいたほうが良いんですかね?aa記法なんて使っているはてなブロガーがどれだけいるのか分かりませんが…。AAを画像化して使っているひとはけっこう見ますけど、あれも何だかモニョモニョしますね。