Windows Live WriterからだとAAの貼付けがうまくできない件。

Posted by kumacchi on 2010年11月23日 , No comment

20100523

上の様なAAをブログに貼りつけたい時Windows Live Wrinterを使っているとうまく貼り付けることができない。なぜかというと、Windows Live Wrinterは全角のスペースを半角のスペース１個にまとめてしまう。なんでそんな余計なことをしてくれるのだろう。じゃあ全角スペースを半角スペース２個に全部置換してからと思ってやって見るが半角スペースはHTML的に無視される為ずれてしまうのでこれもダメ。

じゃあpreタグを使えばいいじゃないかということでやってみると、これはGoogle ChromeではうまくいくがIEやFirefoxではうまく表示されない。preタグで利用されるフォントをスタイルシートで制御できないようだ。Google Chromeは指定したように変わってくれるがIEは固定幅フォントから変更できない。Firefoxはpreを使わなくてもずれるようなので諦めるにしてもせめてIEとChromeだけでも正常に表示出来るようにしたい。Chromeだけだと実用的じゃない。

下のようなスタイルシートを定義しておいて、

.AA PRE,.AA{
    font-family: "ＭＳ Pゴシック";
    font-weight:normal;
    font-style:normal;
    font-size: 16px;
    background-color:#eeeeee;
    border:none;
    line-height:100%;
}

Window Live Writer(WLW)で下の様にソースを書いてやるとChromeではうまく表示出来る。

<div class="AA"><pre>
*“・*。. ｡.:☆ . *｡+ﾟ ★
｜ `*。 ;* †▲_*;.｡.: ∧ ∧ /*｡
,。∩ *. ﾟ*: （(‘A`);ﾟ’ +< ,,’∀’> つ *｡+ﾟ
+ (・ω・`)*。ﾟ･* ( 7 `*｡二つ *ﾟ*
`*。ヽつ*゜* . < ヽ＼+｡*・’
`・+。*・`゜⊃ +゜ *｡+ﾟ ∪`Ｊ
☆ ∪~。**’“・* 。
`・+。*・゜. | `*。
,｡ _,,∩,_ * もうどうにでもな～れ～☆
+ / ,’ 3 `ヽ* ｡+ﾟ
`*⊂ ,j *ﾟ *
ﾟと・+｡*・’ ﾟ +ﾟ
☆ ｀(ノ′ ｡*

</pre>

　　　*``・*。.　　　 ｡.:☆　　 .　　　　　*｡+ﾟ　★
　　 ｜　　 `*。　;*　　†▲_*;.｡.: ∧　 ∧　　/*｡
　 ,。∩　　　 *.　ﾟ*:　（('A`);ﾟ' +< ,,'∀'> つ 　*｡+ﾟ
　+　(・ω・`)*。 　 ﾟ･* (　 7　　`*｡　二つ　*ﾟ*
　`*。 ヽ　つ*゜*　.　　<　ヽ　　　＼+｡*・'
　 `・+。*・`゜⊃ +゜　　　*｡+ﾟ　　　　∪`Ｊ
　　☆　 ∪~。**'``・* 。
　　`・+。*・゜. 　|　　　　 `*。
　　　　　　,｡ _,,∩,_　　　　　*　もうどうにでもな～れ～☆
　　　　　+　/ ,' 3　`ヽ*　｡+ﾟ
　　　　　`*⊂　　　　,j　*ﾟ *
　　　　　　　ﾟと・+｡*・' ﾟ　+ﾟ
　　　　　　　☆ ｀(ノ′ ｡*

全角スペースを半角スペースに置換後半角スペースを  に置換して各行に<br>を入れて下のようにすると(つまりは全角スペースを  で置換する。)

<div class="AA">

      *“・*。.       ｡.:☆     .          *｡+ﾟ  ★<br>

     ｜     `*。  ;*    †▲_*;.｡.: ∧   ∧    /*｡<br>

   ,。∩       *.  ﾟ*:  （(‘A`);ﾟ’ +< ,,’∀’> つ   *｡+ﾟ<br>

  +  (・ω・`)*。    ﾟ･* (   7    `*｡  二つ  *ﾟ*<br>

  `*。 ヽ  つ*゜*  .    <  ヽ      ＼+｡*・'<br>

   `・+。*・`゜⊃ +゜      *｡+ﾟ        ∪`Ｊ<br>

    ☆   ∪~。**’“・* 。<br>

    `・+。*・゜.   |         `*。<br>

            ,｡ _,,∩,_          *  もうどうにでもな～れ～☆<br>

          +  / ,’ 3  `ヽ*  ｡+ﾟ<br>

          `*⊂        ,j  *ﾟ *<br>

              ﾟと・+｡*・’ ﾟ  +ﾟ<br>

              ☆ ｀(ノ′ ｡*<br>

</div>

~~下の様にはIEでもChromeでもうまく表示される。しかしここまでやるならもう普通にAAを画像で貼り付けたほうが早いと思う。~~

と思ったけどやっぱりAAによってはずれるので駄目だ。

      *“・*。.       ｡.:☆     .          *｡+ﾟ ★

     ｜     `*。 ;*    †▲_*;.｡.: ∧   ∧    /*｡

   ,。∩       *. ﾟ*: （(‘A`);ﾟ’ +< ,,’∀’> つ   *｡+ﾟ

+ (・ω・`)*。    ﾟ･* (   7    `*｡二つ *ﾟ*

`*。ヽつ*゜* .    < ヽ      ＼+｡*・’

   `・+。*・`゜⊃ +゜      *｡+ﾟ        ∪`Ｊ

    ☆   ∪~。**’“・* 。

    `・+。*・゜.   |         `*。

            ,｡ _,,∩,_          * もうどうにでもな～れ～☆

          + / ,’ 3 `ヽ* ｡+ﾟ

          `*⊂        ,j *ﾟ *

              ﾟと・+｡*・’ ﾟ +ﾟ

              ☆ ｀(ノ′ ｡*

とどのつまり、WLWでAAをずれないように貼り付けるのは基本的には諦めたほうが良さそう。どうしても貼りつけたければブログの画面から貼り付けたほうが良いだろう。またはもう画像にして貼りつけたほうが早いと思う。

WLWの設定画面で全角スペースをまとめて半角に変換しないように出来ればいいのだが今のところはないみたいだ。

追記：2010.11.27

解決しました。

【解決】Windows Live WriterからだとAAの貼付けがうまくできない件。 – KUMA TYPE

(Visited 81 times, 1 visits today)

タグ : Movable Type, MT, Windows Live Writer, WLW, スタイルシート