はじめに
ネットを巡回していると楽しそうなサイトが見つかりました。
AAまとめサイト
2000年代に流行り始めた記号や文字を組み合わせて作るお絵かき
AA、アスキーアート。
最近はSNSとかが広まって
ブログとか5チャンネルなどに書き込むことが少なくなり
若者でAA使う人めっぽうに減ってしまいましたね。
このサイトでは数々のアニメやゲーム、既存作品などをAA化した
ライブラリーサイト。新しい作品のAAも数多く取り揃えており
探しやすいです。
んで。
WordPressでAAを貼り付けてみたい
WordPressでブログの記事の思ったことを書き込むときや
記事末端のまとめのあとに一つAAをぺっと貼り付けたいときがあります。
上記のまとめサイトからお気に入りのAAを見つけて貼り付けようとすると…
＿………..–――≧―–＜::::::::::: く
. く:.￣:.￣:.:.:.￣￣:::::¨¨::::::―-:::::::＼＜r‐ . ∨:..r―ﾐ::::::::::::::::／´}::__::::::::::::≧‐zヽ:＼ }とx ｀{ ｀Y´}’ :..:::´….:::}7´ /:} ＼:::丶:＼ /（ .: >ぅ_ { ヽ:::::::::/ _ じ {:j ヽ::::::::＼ r┴‐’ ィz乂ノﾍ.}廴ﾄ.{ {::::∨￣ヽｨ |´ ﾉイ::::::＼
. 乙メ-ヘ/ :::ト、_.} ::∧＼::::::::::::::〉ハ{..: ^＼::::/ .. / :廴__＜￣ ＞七∨ ＼トﾄ､ー‐ ‘ノ ::/::::::::. く:/
| : :{v― .｜ ｀¨丁=ﾐ.んﾍノ≧）
∨ .∧ /xz==ﾐ | |こ } i.|::: :: {
. 〉 ﾍﾊ ,, ′ | |ﾉ /::. {xト-’
厶イ.| }/⌒, xxx } .: |.イ::::: ∧
. }_} | ＿ // .::: |:::::､ ∧ . ノ//::{xx ｨ'-´ ﾉ // ..::::::∧ ::::＼ ∧ . （ん' :::z… ｀¨¨´ ..イ/..:／ {::::＼ ::::＼ 廴 .. /ヽ:V:::/::::/＞ –≦Lノ´≦‐ ｀ﾌ ― ミ::::…. } . {‘:::l|.:∨ i/rト{:ヽ{／´..: ／ …: ／ ＼::: / f=､i{::::∨ムV／…::／/ ＜´＼ > ―――‐ ∨ . !.::.{:.ヽ:::V く :::〈 ::/ .ノ ／イ丁¨￣ミヽ:ト､ . !.::.ﾍ:: }:|i∧_r＼ ヽ,x≦＼／o |__L.. :::::::::::::::|:/ .. |､:.:.:ヽ::/ V く 〉 ＼:::::/＿∠二二≧z.､::::::|′
左がもとのAA。
右がコピーしてWordPressの編集画面にそのまま貼り付けたもの。
フォントサイズや、フォントそのもの、幅に至るまでCSSがWordPressでプリセット
されたものになるので、原画よりもずれずれになってしまいます。
崩れを抑える改善策
①コードブロックで貼り付ける
WordPressの編集画面にある「コード」ブロック。
プログラムの記述などを貼り付けて公開するときに使うもので
等幅フォントになり、記述通りの表現ができます。
ではこれに貼り付けてみましょう
いちおう形にはなってきましたがまだ上下幅の余白が。
テーマによってはここで貼り付けてきれいに形が整う場合がありますが、
私が使っているテーマでは一筋縄では行きそうにありません。
ここで貼り付けてうまく行った人はここまでで解説終了です。
これで駄目だったら次に進んで下さい。
②コードブロックのCSS記述を書き加える
コードブロックに貼り付けても原画通りに表示されないということは
テーマ側に付加された「コードブロックのCSS」記述が問題を起こしているので
それを編集して修正しましょう。
F12でCSSを確認してみましょう。
マウスカーソルに乗っけたら反応するボタンを押して「コードブロック」を選択。
<per class=”wp-block-code”>
<code>…</code>
↑の記述にクリックして＋ボタンからCSSを書き込んでいきましょう。
修正する項目は以下のとおりです。
・フォントを変える（font-family: ‘Saitamaar’, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’, ‘IPAMonaPGothic’ !important;）に。
・フォントサイズを弄る（font-size: 14px;）ぐらいに。
・行間を狭くする（line-height: 12.8px;）ぐらいに。
・文字幅を狭くする（letter-spacing: -3.5px;）ぐらいに。
・コードブロックの枠線を消す（border: none;）
編集し終えたコードはコピーしてテーマの追加CSSに貼り付ければ出来上がり。
＿...........--――≧―--＜::::::::::: く
. く:.￣:.￣:.:.:.￣￣:::::¨¨::::::―-:::::::＼＜___r‐`
. ∨:..r―ﾐ::::::::::::::::／´}::__::::::::::::≧‐zヽ:＼
}と`x ｀{ ｀Y´}' :..:::´....:::}7´ /:} ＼:::丶:＼
/（ .: >ぅ__ { ヽ:::::::::/ __ じ {:j ヽ:::__:::::＼
r┴‐' ィz乂_ノﾍ.__}廴ﾄ.{ {::::∨￣ヽｨ |´ ﾉイ::::::＼
. 乙メ-ヘ/ :::`ト、_.} ::∧＼::::::::::::::〉ハ{..: ^＼::::/
.. / :廴__＜￣ ＞七∨ ＼トﾄ､`ー‐ 'ノ ::/::::::::. く:/
| : :{v― .｜ ｀¨丁=ﾐ.んﾍ_ノ≧）
∨ .∧ /xz==ﾐ | |こ } i.|::: :: {
. 〉  ﾍﾊ ,___, ′ | |_ﾉ /::. {x_ト-’
厶イ.| }/⌒, xxx } .: |.イ::::: ∧
. }__} | ` ＿ // .::: |:::::､ ∧
. ノ//::{xx ｨ'-´ ﾉ // ..::::::∧ ::::＼ ∧
. （ん' :::`z... ｀¨¨´ ..イ/..:／ {::::＼ ::::＼ 廴
.. /ヽ:V:::/::::/＞ --≦Lノ´≦‐ ｀ﾌ ― ミ::::.... }
. {':::l|.:∨ i/rト{:ヽ{／´..: ／ ...: ／ ＼::: /
f=､i{::::∨ムV／...::／/ ＜´＼ > ―――‐ ∨
. !.::.{:.ヽ:::V く :::〈 ::/ _.ノ ／イ丁¨￣ミヽ:_ト､
. !.::.ﾍ:: }:|i∧_r＼ ヽ,x≦＼／o |__L.. :::::::::::::::|:/
.. |､:.:.:ヽ::/ V く 〉 ＼:::::/＿_∠二二≧z.､::::::|′
,....zz== ､ ト..、 _
／:／ ノ ト､:＼_.. ‐ニ::|
/: :{/l| .. ...-―┴‐ ミニ..イ |:|
{ : : Ⅵ___,..／: : : : : ＿:｀ミ: ､: ＼! |:|
7:7ｧ┬ｧ'／´: : : : : : ｀＼: : ＼: : ｀ﾐ: ー――:ノ
l://:::::/:/: : :i : : ヽ- ､: : : ヽ: : :ヽ : : ヽミ二´.....／
ﾏﾆﾆ.l l:::::/: i′ ∧ l: : { ＼/. .Ⅵ . Ⅵヽ: V三彡' ＿_
Ⅵ｢￣:::::|. .l|. . ! Ⅵ､ .ヽ._ノ__ヽ、|.l . .li|: :|li |イ ￣ . l
ⅥＶ:::::::|| . . ｀ト-_z ﾄ､ドV r=ミⅥ!!. .l.||: :lﾊl：| _ノ ｜
ヽ､V::::l ! {. {/ r‐ﾐ ｀ ' ﾋz.ﾘﾉ || ﾘ|小/ ﾉ：|イ { |
ヽ.ヽ:l l、.ヽﾄ､Vzﾘ 从iﾘ/ｲ ：| ハ !
＼ﾐトヽ. .＼ ' _ ／/// /′ ./ ｜ i
＞ミトミz≧..__'¨´.イ|::/77 /z‐＜ヽﾐヽ. l |
_.イ´.........∧-｀ミヾヽ:ト-v1///,ｲ′........＼,≧z|_ 斗┐
／...............⌒ヽﾄ、 ＼N⊥|/://:ﾄ､.......}....../′ ｀宀.ﾊ__
／..._...............----|ハ. ｀{ﾊ__|ム.....!}≧zﾑ斗 ､__ ヽ￣｀ヽ
／.／´........................./j ヽ `く／ｨj...|_ソ'´... ｀_｀≧zz＜_￣｀ヽ、
／.................................／.＼､ _ _ _}≦ｨ壬zz......._ノ⌒ﾆ.ﾉ,∠￣iﾄi ￣ヽ・＼
/、........... ／ .........＞┬弋¨¨´＼zzz=---‐ ´ i' ┴ ﾉ_.／lﾄ､ ヽ.__〉
/ 丶 .. ／ __... -‐ /ﾂ .......＼ i _ ..-く. ,ニﾌ｢riﾍ∨|.ﾊ ﾄｨ,､
.′ ￣ ¨7i￣ ／ /_/イ! .......{ヽ.__ .. ≦´........ ､..ヽ_'ブ..∧ﾆｲ..ﾘ..∧ /｀７7
i / ヽ / |,イ｢ __.....｢r┴} } l|.... く ＼ノ..........|!i{{／........l / //
| / ＼ / |! l |, （(_j}斗三三zﾍトz､_.＼･r`ﾆ7....j／...............|/ 〃
l .′ / ､ |／ ,〉 /l|r_j {｢__,.l!.|.........../[､ ･`く.........iril.........|ー'′
∨ /i ｀ | ／ .ｲ::::ト---Ⅵi..Ⅵ......//7ｨ〉､__/｀ ７!.lﾄ--┘
V / l __ ′ ／:/! ＼ Ⅵ...V!...{{／ 《_/ // j|
∨ l（{.ﾘ ／::: / |／⌒ヽ.７＝-┴ ´ ヽﾆ ′
V l ／ ./ l ___ / /￣7!
V fﾆﾐ . イ / ｜´: : : :.,i:｀ヽ. / //
ヽ `ｰ' ＞ ´ / ｀ ー 7′ 廴:.:.:.:./z=┴ﾐx / //
＼_＞ ´ }｀. .-. .7 くZブ0.0／.....＼ j二ィ７￣￣了
/ト : :__/ ￣｀＼>― '¨ﾄ､ ^^}｣_|__ -‐┘
/,､ /{ | 〉┬=_rﾍ
／rｫヽ_斗i ′ ｢/7マ|
|...,ﾆ...|...ｰ'.〉 {7ﾆ=ﾘ
lﾄ､ｰ'/:(_)/ `ｰ ´
|! ｀ir‐.´|
| j|.......|
| ／_|.＼.|
ﾄ∠rv勹[、
ﾄLノ｢＞ﾍ!
|_{￣_.z=´〉
廴三彡'´
メデ子まつり！
