AA（アスキーアート）をWord Pressで表示させる方法

Table of Contents

　　　　　　　　／￣￣￣＼
　　　　　／　　　　　　　＼
　　　　　　/　　 ─　　　─　　ヽ
　　　　　 |　　（●）　（●）　　|
　　　　　　＼　　（__人__）　__,／　　えっと、今日はですね・・・
　　　　　　／　　　｀ ⌒´　　　＼
　　　　＿/((┃))＿＿＿＿_＿i　|　ｷｭｯｷｭｯ
　..　／ /ヽ,,⌒) ￣￣￣￣￣（,,ノ＼
　／　 /＿＿＿＿＿＿＿＿＿ヽ.. 　＼

　　　　　　／￣￣￣＼
　　　　　／　─　　 ─ ＼　　　
　　　　　 /　　（●）　（●）　ヽ
　　　　 |　　　　（__人__）　　 |　　　Word Pressでアスキーアートを
　　　　＼　　　｀ ⌒´　 __,／　　　　表示させる件についてです。
　　　　／　　　　　　＼
　　　　　 |￣￣￣￣￣￣￣￣|　　ﾄﾝ
　　　　_（,,)　 WordPressﾃﾞ　(,,）_
　　／　|　ｱｽｷｰｱｰﾄｦ表示　|　＼
　／　　 |_＿＿＿＿＿＿＿__」　　　＼

今日はいつもと少し違う書き方で記事を投稿してみました。

ご存じの方は多いと思いますが、このキャラクターはやる夫っていう2chのアスキーアートです。
最近、このアスキーアートを使った”やる夫で学ぶ”というスレッドがとても気に入っています。特に以下の内容がお気に入りです、しかも分かりやすいです。

やる夫が儲けるようです

また、やる夫については、以下のサイトが参考になります。

やる夫とは(Wikipedia)

アスキーアートって今までWord Press上に貼り付けた事が無かったのですが、実はそのまま貼り付けただけではレイアウトが崩れてしまい、上手く表示させる事が出来なかったようです。そこで今回はWord Pressへのアスキーアートの貼り付け方について調べてみました。

Word Pressへのアスキーアート挿入方法

いくつかのサイトを拝見させていただきまして、Word Pressにアスキーアートを挿入するにはDIVタグを使うのが良いようでした。具体的には、以下のコードを挿入する事により、アスキーアートが正しく表示されるようになります。

アスキーアート挿入ボタンをクイックタグへ追加する

アスキーアートを書き込む度に上記コードを貼り付けるのは面倒なので、クイックタグにこのアスキーアート挿入コードを追加してみました。
クイックタグを編集する場合には、以下のPATHに保存されている”quicktags.js”を、WEBサイトの文字コードに対応したテキストエディタで開いてください。

wp-includes > js > quicktags.js

このファイルはJavaScriptですので、書き込む前に、メタ文字をエスケープする必要があります。今回のコードですと、具体的には、シングルクォーテーションとセミコロンの前に\を挿入します。

クイックタグのフォーマットに合わせると、以下のようになります。

このコードをクイックタグの適当な部分に貼り付ける事で、アスキーアートボタンがWord Pressの投稿画面に表示されます。

ただし、管理画面から見ると、アスキーアートは正しく表示されませんので注意してください。

しかし、やる夫は愛着のある可愛い顔をしていますね。個人的にかなり好きです。

　　　　　　　　　　　／￣￣＼
　　　　　　　　　　／　　 _ノ　　＼
　　　　　　　　　　|　　　（ ●）（●）
　　　　　　　　　　|　　　　（__人__）　　
　　　　　　　　 |　　　　　｀ ⌒´ﾉ　　　学生時代に打ち込んだものは？
　　　　　　　　 |　　　　　　　 }
　　　　　　　　ヽ　　　　　　 }
　　　　　　　　　　　ヽ､.,＿＿ __ノ
　　　_, ､ -― ””::l:::::::＼ｰ-..,ノ,､.ﾞ,i ､
　　/;;;;;;::ﾞ:’:､::::::::::::|＿:::;､>､_　l|||||ﾞ!:ﾞ､-､_
　丿;;;;;;;;;;;:::::i::::::::::::::／:::::::＼ﾞ” ﾞ||i l＼>::::ﾞ’ｰ､
. i;;;;;;;;;;;;;;;;;;;;;;|::::::::::::::＼::::::::::＼ .||||i|::::ヽ::::::|:::!
　　　　＿＿＿_
　　　　／　　　　＼
　　／　　─　　 ─＼　　　　　
　／　　（●）　（●）　＼　　RPGです。
　|　　　　（__人__）　　 | 　　　
　＼　　　　｀ ⌒´　　／　　　　　
,,…..イ.ヽヽ、___ ーーノﾞ-､.
:　　| 　’;　＼_____ ノ.| ヽ　i
　　 |　　＼/ﾞ（__)＼,| 　i　|