Yahoo! ブログ かんたんモード 「引用」できれいにAAを貼る方法

Yahoo! ブログ かんたんモード 「引用」できれいにAAを貼る方法

以前も似たような記事書いた気がしますが、ずっと昔だしYahoo! ブログの「引用」を使わない方法だった気がするので書きます。
まず、普通に引用を使ってAAを張ってしまうと…。

　　　　　　　　　　　　　　　_,.. -‐ｧ
ｒ─-､ 　 ／￣|´::::::／ |__　　 　,. -─ｧ
|:::::::::::＼|:::::::::〈::::／＿/　 ｀'＜::::::／/
/::::::::＼r‐ｧ─┘ 　　　　 　　　 ヾ　/-‐ｧ
|_:::::::::::/-' ／　 ／　　 ,　　ﾊ　　｀ヽ:::::/
￣7´　./　　/ ｀メ.／|　 / |　./　　∨
／　_ノ|　　 |__＞ｧﾃｒ|__/　|_/イ /　!＼
〈　ヽ∧八. 　　〈.　|!r|　　　　l!|｀Y 　/￣
ﾊ　　|　':､ ＼.___ト ゝ'　 　 .　り /|イ
／　 ヽ/　　 ＼. ⊂⊃　 　 _ 　　 (） /
r‐ ､|＿ｒ‐ '7 　　 　 ＞､.ト ､..,,＿_,,.. イ 〈
|::::-/-ｒ＼:::|　　　, '"´￣＼＼_/ト-､/ ヽ!
￣7　 |ヽ-┘　　/::::::::::ヽ;::::ゝ-‐'::::';::Y／ /´￣｀ヽ
|_／ 　　　　 〈::::::::::::::::l::::::::::::::::::::!:::〉::7!　ｪ､_ﾉﾉ,）　　 ﾄ、
〉:::ｰ:::イ／￣｀ヽ:::|ｲ／|:ト-ｧ'ヽイ　　 /　 ＼_
/:::::::::_/´|_､　ヽﾝﾉ://::::::|:|イ::::::::|:| 　 /　　　　 ｀ヽ.
〈::::/´:::|::::|:::｀￣|:|:::|::::::::::::';';＿__// ／, -─- ､　 　＼
,＞､:::::';:::';::::::::://:::ト-､:::::::::::::::::/ ,'　/　　　 　ヽ.　 　 ）
／:::::::::＼ヽ::＼//::i::::',　 `ー-- '´　 ） | （）　（）　ｒﾉ　, '´
ｒ-r'":::::::::::::::::::::`ー‐‐'::/::::::ﾊ　　　　　　 / 　`ｒ､' '　 rｲ　ノ

行の最初のスペースが全部省かれ、めちゃくちゃになります (正確に言えば２行目以降の)。まずこれをなんとかしなくてはなりません。
スペースを他の文字に置き換えたら見栄え悪くなるし…っていうか寸法違うから結局ずれてめちゃくちゃに…。
ところが、この問題を解決すのは案外簡単なんです。スペースが並んでいるのかいないのかは関係なく、行の最初にスペースが来ないように処理されてるだけなんです。なので、一行一行最初にピリオドとか目立たない文字を入れればそれだけで解決できてしまいます。

.　　　　　　　　　　　　　　　_,.. -‐ｧ
.　　　　　 ｒ─-､ 　 ／￣|´::::::／ |__　　 　,. -─ｧ
.　　　　　 |:::::::::::＼|:::::::::〈::::／＿/　 ｀'＜::::::／/
.　　　　　/::::::::＼r‐ｧ─┘ 　　　　 　　　 ヾ　/-‐ｧ
.　　　　　|_:::::::::::/-' ／　 ／　　 ,　　ﾊ　　｀ヽ:::::/
.　　　　　　￣7´　./　　/ ｀メ.／|　 / |　./　　∨
.　　　　　　／　_ノ|　　 |__＞ｧﾃｒ|__/　|_/イ /　!＼
.　　　　　〈　ヽ∧八. 　　〈.　|!r|　　　　l!|｀Y 　/￣
.　　　　　ﾊ　　|　':､ ＼.___ト ゝ'　 　 .　り /|イ
.　　　 ／　 ヽ/　　 ＼. ⊂⊃　 　 _ 　　 (） /
.　r‐ ､|＿ｒ‐ '7 　　 　 ＞､.ト ､..,,＿_,,.. イ 〈
.　|::::-/-ｒ＼:::|　　　, '"´￣＼＼_/ト-､/ ヽ!
.　￣7　 |ヽ-┘　　/::::::::::ヽ;::::ゝ-‐'::::';::Y／ /´￣｀ヽ
.　　 |_／ 　　　　 〈::::::::::::::::l::::::::::::::::::::!:::〉::7!　ｪ､_ﾉﾉ,）　　 ﾄ、
.　　　　　　 　 　　 〉:::ｰ:::イ／￣｀ヽ:::|ｲ／|:ト-ｧ'ヽイ　　 /　 ＼_
.　　　　　　　　　 /:::::::::_/´|_､　ヽﾝﾉ://::::::|:|イ::::::::|:| 　 /　　　　 ｀ヽ.
.　　　　　　 　　 〈::::/´:::|::::|:::｀￣|:|:::|::::::::::::';';＿__// ／, -─- ､　 　＼
.　　　　　　　　　 ,＞､:::::';:::';::::::::://:::ト-､:::::::::::::::::/ ,'　/　　　 　ヽ.　 　 ）
.　　　　 　　　 ／:::::::::＼ヽ::＼//::i::::',　 `ー-- '´　 ） | （）　（）　ｒﾉ　, '´
.　　 　　 ｒ-r'":::::::::::::::::::::`ー‐‐'::/::::::ﾊ　　　　　　 / 　`ｒ､' '　 rｲ　ノ

左に寄ってしまうのはこれで解決できましたが、間が空いていて縦に広がって気持ち悪いですよね。これを解決する方法として、HTML作ってコピペというのをやろうと思います。
ここからはHTMLの知識が必要になるので初心者には難しいと思いますが、どうしてもわからない人は↓の例をそのままコピペしてAAだけ張り替えてください。

.　　　　　　　　　　　　　　　_,.. -‐ｧ
.　　　　　 ｒ─-､ 　 ／￣|´::::::／ |__　　 　,. -─ｧ
.　　　　　 |:::::::::::＼|:::::::::〈::::／＿/　 ｀'＜::::::／/
.　　　　　/::::::::＼r‐ｧ─┘ 　　　　 　　　 ヾ　/-‐ｧ
.　　　　　|_:::::::::::/-' ／　 ／　　 ,　　ﾊ　　｀ヽ:::::/
.　　　　　　￣7´　./　　/ ｀メ.／|　 / |　./　　∨
.　　　　　　／　_ノ|　　 |__＞ｧﾃｒ|__/　|_/イ /　!＼
.　　　　　〈　ヽ∧八. 　　〈.　|!r|　　　　l!|｀Y 　/￣
.　　　　　ﾊ　　|　':､ ＼.___ト ゝ'　 　 .　り /|イ
.　　　 ／　 ヽ/　　 ＼. ⊂⊃　 　 _ 　　 (） /
.　r‐ ､|＿ｒ‐ '7 　　 　 ＞､.ト ､..,,＿_,,.. イ 〈
.　|::::-/-ｒ＼:::|　　　, '"´￣＼＼_/ト-､/ ヽ!
.　￣7　 |ヽ-┘　　/::::::::::ヽ;::::ゝ-‐'::::';::Y／ /´￣｀ヽ
.　　 |_／ 　　　　 〈::::::::::::::::l::::::::::::::::::::!:::〉::7!　ｪ､_ﾉﾉ,）　　 ﾄ、
.　　　　　　 　 　　 〉:::ｰ:::イ／￣｀ヽ:::|ｲ／|:ト-ｧ'ヽイ　　 /　 ＼_
.　　　　　　　　　 /:::::::::_/´|_､　ヽﾝﾉ://::::::|:|イ::::::::|:| 　 /　　　　 ｀ヽ.
.　　　　　　 　　 〈::::/´:::|::::|:::｀￣|:|:::|::::::::::::';';＿__// ／, -─- ､　 　＼
.　　　　　　　　　 ,＞､:::::';:::';::::::::://:::ト-､:::::::::::::::::/ ,'　/　　　 　ヽ.　 　 ）
.　　　　 　　　 ／:::::::::＼ヽ::＼//::i::::',　 `ー-- '´　 ） | （）　（）　ｒﾉ　, '´
.　　 　　 ｒ-r'":::::::::::::::::::::`ー‐‐'::/::::::ﾊ　　　　　　 / 　`ｒ､' '　 rｲ　ノ

まず、かんたんモードの「引用」のHTMLソースを見ると次のようになっています。

<span class="Apple-style-span" style="color: rgb(102, 102, 102); font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 16px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><div><div><blockquote class="quote3" style="margin: 12px 0px; padding: 8px; border-width: 3px; border-style: solid; border-color: rgb(214, 247, 179); color: rgb(51, 51, 51); background-color: rgb(249, 250, 221); font-size: 1em; line-height: 1.6em; word-wrap: break-word; clear: both;"><br class="Apple-interchange-newline">ここに内容</blockquote></div></div></span><br class="Apple-interchange-newline">

HTMLの (CSSの) 知識のある人はわかると思いますが、文字のサイズが「font-size: 1em;」と1emになっているのに「line-height: 1.6em;」になっているため、間が空いてしまっているわけです。なので、「line-height: 1.6em;」を「line-height: 1em;」にし、ブラウザやワードで開いてコピペすればおkです。
あと、補足なんですが、Google クロームでコピーすると、ちょっとバグる時あるっぽいです。IEかFirefoxかワードでコピーしたほうがよいみたいです。


557