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

         / ̄ ̄ ̄\
         /        \
      /   ─   ─  ヽ
       |   (●)  (●)  |
      \   (__人__) __,/   えっと、今日はですね・・・
      /   ` ⌒´   \
    _/((┃))______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ゴシック","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ゴシック","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ゴシック","MS Pゴシック",sans-serif\;\'>'
,'</div>'
,'a'
);

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

00122

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

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

            / ̄ ̄\
          /   _ノ  \
          |    ( ●)(●)
          |     (__人__)  
             |     ` ⌒´ノ   学生時代に打ち込んだものは?
              |         }
              ヽ        }
            ヽ、.,__ __ノ
   _, 、 -― ””::l:::::::\ー-..,ノ,、.゙,i 、
  /;;;;;;::゙:’:、::::::::::::|_:::;、>、_ l|||||゙!:゙、-、_
 丿;;;;;;;;;;;:::::i::::::::::::::/:::::::\゙” ゙||i l\>::::゙’ー、
. i;;;;;;;;;;;;;;;;;;;;;;|::::::::::::::\::::::::::\ .||||i|::::ヽ::::::|:::!
       ____
    /      \
   /  ─    ─\      
 /    (●) (●) \   RPGです。
 |       (__人__)    |    
 \     ` ⌒´   /      
,,…..イ.ヽヽ、___ ーーノ゙-、.
:   |  ’; \_____ ノ.| ヽ i
    |  \/゙(__)\,|  i |

参考リンク

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

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

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です