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

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

2009-02-27 (金) 3:20
Hobby
WordPress

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

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

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

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

やる夫が儲けるようです

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

やる夫とは(Wikipedia)

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

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

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

<div style='font-size:12pt;line-height:18px;font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif;'>ここにアスキーアートを挿入</div>

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

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

wp-includes > js > quicktags.js

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

<div style=\'font-size:12pt\;line-height:18px\;font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif\;\'>ここにアスキーアートを挿入</div>

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

edButtons[edButtons.length] =
new edButton('ed_code'
,'アスキーアート'
,'<div style=\'font-size:12pt\;line-height:18px\;font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif\;\'>'
,'</div>'
,'a'
);

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

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

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

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

参考リンク

今回参考にさせていただいたサイトです。

WordPressでAAを正常表示する方法

Comments:0

Trackbacks:1

Trackback URL for this entry: http://pnpk.net/cms/archives/1714/trackback
Listed below are links to weblogs that reference: AA（アスキーアート）をWord Pressで表示させる方法 from http://pnpk.net

trackback from いも@ぶろぐ 09-05-06 (水) 15:51

チラ裏日記@携帯電話でも見れるようになったよ！（携帯電話持っていないけど・・）

wordpressのプラグインいじりをしたFTP鯖をたてて置くと
すんごく簡単にブラウザ経由でプラグインを導入することができる。
携帯電話えからみると

自宅サーバの連続稼動時間
——…