ブログ記事にAA アスキー・アートを貼らないか?いや、「やらないか?」

ども~♪

ご覧の通り、このブログは
アスキーアート(以下AA)を
多用してます

テキストだけだと伝わりにくい
感情表現の一つとして
顔文字とか絵文字なんかが
一般的ですけど、私は断然
AA派!!

でもね、AAをブログ記事に貼り付けるには
少しブログに手を加えないといけないので
ちょっと今日はその手法をご紹介♪

ちなみに、普通ブログ記事にAAをそのまま
コピペするとこんな風になると思います

****************************************
         / ̄\
         |     |
          \_/
       ノ L__|__
       ⌒:::\:::::/::\                                 ,. -‐”””””””'””¨¨¨ヽ
      / <●>::::<●>\                                (.___,,,,,,,,…….. -ァァフ|
     /    (__人__)   \                                |i i |     }! }} //|
     |       |::::::|     |    よしっ!俺を使え!               |l、 {    j} /,,ィ//|  むり・・・
     \       l;;;;;;l    /l!|                             i|: !ヾ、_____ノ/ u {:}/|
     /     `ー’    \ |i                            //, ‘/u     ヽハ  、 ヽ
   /          ヽ !l ヽi                            〃 {_{\    /リ| l │ i|
   (   丶- 、       しE |    ドンッ!                   レ!小l●   u ● 从 |、i|
    `ー、_ノ       ∑ l、E ノ >                           ヽ|l⊃ 、_,、_, ⊂⊃ |ノ│
               レY^V^ヽ                          /⌒ヽ__|ヘ u ゝ._)  j /⌒i !
                                           \ /:::::| l>,、 __, イァ/  /│
                                             /:::::/| | ヾ:::|三/::{ヘ、__∧ | 
                                            `ヽ< | |  ヾ∨:::/ヾ:::彡’ |
****************************************


なんだか、行間が広くてキレイじゃないですよね?

ぐちゃぐちゃだし・・・

それをこのようにしようってワケです!!

****************************************

         / ̄\
         |     |
          \_/                                       むり・・・
       ノ L__|__
       ⌒:::\:::::/::\                                 ,. -‐”””””””'””¨¨¨ヽ
      / <●>::::<●>\                                (.___,,,,,,,,…….. -ァァフ|
     /    (__人__)   \                                |i i |     }! }} //|
     |       |::::::|     |    よしっ!俺を使え!               |l、 {    j} /,,ィ//|  

     \       l;;;;;;l    /l!|                             i|: !ヾ、_____ノ/ u {:}/|
     /     `ー’    \ |i                            //, ‘/u     ヽハ  、 ヽ
   /          ヽ !l ヽi                            〃 {_{\    /リ| l │ i|
   (   丶- 、       しE |    ドンッ!                   レ!小l●   u ● 从 |、i|
    `ー、_ノ       ∑ l、E ノ >                           ヽ|l⊃ 、_,、_, ⊂⊃ |ノ│
               レY^V^ヽ                          /⌒ヽ__|ヘ u ゝ._)  j /⌒i !
                                           \ /:::::| l>,、 __, イァ/  /│
                                             /:::::/| | ヾ:::|三/::{ヘ、__∧ | 
                                            `ヽ< | |  ヾ∨:::/ヾ:::彡’ |

****************************************

やり方は「2ステップ」です。

1.CSSに追記
2.コピペに<span>タグを追加

これだけです。

それでは、早速やってみましょう!

●マズはCSSをテンプレートに追記

下記のCSSをブログのCSSの最後に
追加してください
※なるべく最後にしましょうね!!

/*AAをずれないように貼るココから
——————————————————————-*/
.aa{
font-family:&quot;MS Pゴシック&quot;,&quot;Mona&quot;,&quot;mona-gothic-jisx0208.1990-0&quot;,sans-serif;
font-size:10px;
line-height:11px;
}
/*AAをずれないように貼るココまで*/

※大作AAが貼りやすいようにフォントを小さくしてます
※適宜フォントサイズ(font-size)と行高(line-height)を調節してね

このCSSは大抵のブログサービスで使えます
取りあえず、私は・・・
FC2
Seesaa
ココログ
Ninja
Livedoorブログ
Jugem
アメブロ
などで試してみましたけど大体OKでしたよ♪

●あとはAAを貼り付けるときSpanタグを追加するダケ!!

実例としては貼り付けたいAAを<span class=”aa”>と</span>で
囲むだけでOKです
(実例って<div class=”aa”>と</div>でもかまわないよ・・・)

例えばこんな感じ・・・

****************************************
<span class=”aa”>
:::::::::::::::::::::::::::::    ,.-ヽ
::::::::::::::::::::::   ____,;’ ,;- i                          へ、     /;へ\
::::::::::::::::::   ,;;'”  i i ・i;                        // _l::|___l::|_ヽヽ
:::::::::::::::  ,;'”:;;,,,,,, ;!, `”’i;          / ̄ ̄ ̄ ̄\,,     |l/-、 -、:::::::::::::::`:|
:::::::::::  ,/'”   ””,,,,””–i         /       __ヽ   /::::::|  ・|・  | 、::::::::::::\
:::::::::  ;/  .,,,,,,,,,,,,,,,,,   ;i’⌒i;       |       |   |、   /::/ `-●-′ \::::::::::ヽ
:::::::  i;”     ___,,,,,,,   `i”.       |       ∩─| |  |/ ── |  ──   ヽ:::::::::|
::::::: i;    ,,;'””” `’;,,,   .”`i;      |      ∪  `l   |. ── |  ──   .|::::::::|
::::::: |  ”””i ,,,,,,,,,,  `’–”””       ヽ __/  _.ノ    | ── |  ──     |::::::_l_
::::::: |.    i'”   ”;                |――― 、”.      ヽ (__|____  /::::| 新 |
::::::: |;    `-、.,;””              /  ̄ ̄ ̄ ̄^ヽ∞=、   \          /::,/|   |
::::::::  i;     `’—–j           | |      |  |っ:::::)   l━━(t)━━━━┥ | 品 |
                                                      ̄ ̄
</span>
****************************************

どうですかね?

ブログにAAを貼り付ける手法は他にもイロイロ
あるでしょうけど、この方法ならAAを貼り付けた以外の
場所に影響を与えることなく描写できるので
オススメです。
(記事全体が文字間隔詰まってくると読みにくいしね)

まぁ、こうやってCSSに文字間隔を縮める記述をしておいて
<span class=”aa”>と</span>で囲めば記事中にキレイに
AAを貼り付けることは出来るんだけど、問題はコメント欄だよね・・・

まさか閲覧者さんに「AA貼り付けたかったらタグも・・・」なんて
お願いは出来ませんよね?

そ・こ・で!!

FC2ブログの場合ならHTML編集の欄に
<%comment_body>ってのがあると思うので
これを↓のように置き換えてみてください

<span class=”aa”><%comment_body></span>

こうしておくと、コメント欄はAAをそのままコピペするだけで
きれいにAAを張ることが出来ますよ!!!
(当然文字間隔狭くなるけどね)

さて

AAをブログに貼り付けられるようになったからといって
特段なにか利点があるわけでもないんだけど
面白いでしょ?

表現にも幅が出来ますしね♪

私のオススメは記事部分は毎回Spanのタグを
AAと一緒に貼り付けて、記事本体の文字間隔を
確保しつつ、コメント欄は今回紹介したように
HTMLに直接Spanを記述しておいて、お客さんが
好きなようにAAを貼れるように・・・ってスタンスですね。

だって、コメント欄は文字間隔が狭くなって
多少読みにくくなっても、コメント欄を読むのは
ブログ運営者ですからね♪

ふふふ・・・

どうですか?

ちょっと興味が沸いたら
あなたもCSSを追記して
ブログにAAを貼り付けてみませんか?

                  -へ へ へー-
               ノ ̄           \._
             ,-‘´  ̄i┴∧   /^\   `‐、
           ///__/  i ヽ  V/l \\ ‘, ヽ
          / r┴’ / / `∧  /^\< ̄ヾヘ ヽ
         / // /    / ,、∨,、  \ヽ  \\ \
        / ∠..ノ /  /  / ∧ヽ|/∧ヽ  ヽ\  ヽ ヽ ゝ
        l  r’ / ,’  /  /l /´`”゙`´ ‘, ! 、   ‘, ヽi ヽ
        / | { l   リ ,’ 从     リ |  〉  }  }l  i
        l  レヘ |\トヘ匕.._,.   、__/厶∠L/ l } | |
        l l ヽト、 弋 ‐t-iー、    ,、t-ヵ‐、 | l ∧ l l
         \ヽ.| ll  ` ‐-┘       ゝー ‘´・j/ l / |
         / i .l l.l Z彡7           // /  i
         / 、l l l i’, ミ彡彡{    ,      /!イ/ / ヽ
        /l l l l l ヽマ三彡7        /|ス//」 |l
        l l l .l l l  l\辷/   -‐    /l | l |  i
        / l l ,’l l l |ll l `‐、    _,イ l l l  l ヽ  丶、
       /. l  ,’,’ l |l |ll. l   ー-‐ ´ l l |l |l | l l \   ‘,
     / l l /,’,’,’. l l |ll   ゞ:.:彡      l l |l l| l l | 〉:j  〉
      /:/| =fjfjfjfjfjfjfjfjfjfjfjfjfjfjfjfjfjjfjffjfjfjfjfjfjfjfjfjfj=|/
     ´ / |  |                        |ノ(
       /   /./|                        | ヽ\
    / .:ノ  ..|   .    やらな.いか?          | } jノ
     -///   .|                        | j/
    ニ .-/    .|                        |
   . / / r‐┴、                      /´ヽ
        (` ー、 ヽ                   / /ヽ }
        r’ー-、 ゝ’,                   (_./ /  |
        〉- ..__`゙)                   ゝ-´__ -‘

ふぅ・・・

最近「やらないか」と「バラライカ」を
聞き間違える末期なまったりでした



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

何か見つかるかもね

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る