ワードプレス(WP)でAA(アスキーアート)をできるだけ正確&手軽に表示する

WPでできるだけ正確にAAを表示してみたいと思います。 AAは主に2ちゃんねるで発達している文化なので、 2ちゃんねるのスレッドと同じように表示すればよいです。

スポンサーリンク

ダッシュボードの外観→テーマ編集でスタイルシートを追加します。

/*  ##################################
    AA用
    ################################## */
#content pre.aa{
	padding: 1em;
	background-color: white;
	font-size: 12pt;
	line-height: 18px;
	font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック",sans-serif;
}

こんな感じで、font-familyが肝です。padding と background はお好みで。 AAの表示には 以下の理由でpreタグを使います。

  • 等幅フォントでなければ崩れるAAがある。
  • WPの「ビジュアル」エディタで文字をペーストするとpreタグで囲まれる為。

実際に記事にAAを追加する際は、

  1.  「ビジュアル」にてAAをペースト
  2.  「HTML」にてpreタグにaaクラスを追加

でOKですが、再び「ビジュアル」で文字編集を行うとAAが壊れます。 どうやら「ビジュアル」の自動整形がAAを壊してしまうようです。

そこで「ビジュアル」の自動整形をオフにするプラグインを導入します。 このプラグインは「ビジュアル」で自動追加されるpタグに影響はないので、 今まで通りの使い勝手を維持してくれます。

PS Disable Auto Formatting

上記プラグインをインストール後、設定→自動整形にて「記事内容の自動整形」を停止します。

以上です。 エディタを「HTML」に切り替えてaaクラスを追加するのが手間ですが、 AAの使用頻度がそれほど多くないのであれば、最もシンプルな方法かと思います。

       ∧  ∧
       |1/ |1/
     / ̄ ̄ ̄`ヽ、
    /        ヽ
   /  ⌒  ⌒    |
   | (●) (●)   |
   /          |
  /           |
 {            |
  ヽ、       ノ  |
   ``ー――‐''"   |
    /          |
   |          | |
   .|        |  | |
   .|        し,,ノ |
   !、          /
    ヽ、         / 、
     ヽ、  、   /ヽ.ヽ、
       |  |   |   ヽ.ヽ、
      (__(__|     ヽ、ニ三
ムーミンがこの記事に興味を持ったようです

 

 

スポンサーリンク