前回の対応でカスタマイズしたところ、「ビジュアル」ビューと「テキスト」ビューを切り替えているとAAがずれることに気づきました。対応として自動で体裁を整えてくれる機能をオフにするプラグイン「PS Disable Auto Formatting」を導入してみたりしましたが、あまり改善はされず。むしろ自動的に一行にされてしまって悪化。

これだと自動で体裁を整えることができないため、毎回毎回手作業でタグを修正する必要が出てきます。もちろん、タグの体裁にこだわらなければ問題は発生しないのですが、編集時に見た目が悪いと後々面倒となるので先に対策します。

参考：

• http://www.tabinomichi.com/?p=157

AAをずれないように表示するためには参考URLのように、スタイルシートで修正するのが一番賢いやり方のようです。プラグインとして使用したかったのですが、そういったプラグインは過去存在したようですが公開停止となっていて現在では存在しません。そのため前回の記事で参考URLに従って設定を行いました。ただこの方法でDIVタグを設定するとビューを切り替えた時にタグがめちゃくちゃになってしまうのです。どのようにずれるかといえばこんな感じ。

[html]<div style=”font-family:’ＭＳ Ｐゴシック’,’ＭＳＰゴシック’,’MSPゴシック’,’MS Pゴシック’;font-size:16px;line-height:18px;”>AA</div>[/html]

そこで、まず対策としてpreタグを使用してずれないようにします。preタグは正確には整形済みテキストの略らしいので、やっていることとしては間違いではないかなと。qタグやblockquioteタグを使用することも考えましたが、今回のAAを表示するために使用するには適していないかなと思います。変更点は参考URLの「div」となっている箇所を「pre」に置き換えるだけです。ね、簡単でしょ？

[html]<pre style=”font-family:’ＭＳ Ｐゴシック’,’ＭＳＰゴシック’,’MSPゴシック’,’MS Pゴシック’;font-size:16px;line-height:18px;”>AA<pre>[/html]

参考：

• http://www.htmq.com/html/pre.shtml

やっと戻ったな
　　　　　　　　　　∧＿∧
　　　 ∧＿∧ 　（´<_｀ 　）　落ち着く
　　　（　´_ゝ`）　/　　 ⌒i
　　 ／　　　＼　 　　　|　|
　　/　　 　/￣￣￣￣/　|
＿_(__ﾆつ/　 FMV　 / .| .|＿＿＿＿
　　　 ＼/＿＿＿＿/　（u　⊃

表示の確認が取れたのでこれでAddQuicktagに追加して対応完了としたいところですが、もう一工夫加えます。スタイルシートにAA用のクラスを登録しておき記事の作成時に直接タグにデザインしないようにします。タグはAddQuicktagでボタンひと押しで追加できるのですが、AA用のクラスを登録することによってデザインを変更したい時にブログ全体のAAを一括でデザイン変更できるメリットが有ります。記事ごとに直接スタイルを指定していると、デザインを変更する時に全ての記事を置換するか、手作業で修正する必要があるためです。

タグはこのように修正。
[html]<pre class="AA-Style">この間にAA</pre>[/html]

スタイルシートはこのように修正。
[css]
.AA-Style { font-family: ‘ＭＳ Ｐゴシック’,’ＭＳＰゴシック’,’MSPゴシック’,’MS Pゴシック’;
font-size: 16px;
line-height: 18px;
}
[/css]

作業はWordpressで使用しているテーマに依存するので、テーマ編集からスタイルシートを確認して個別に修正します。あとは修正したタグをAddQuicktagに登録して作業完了です。

昔HTML弄ってたから簡単なHTMLとCSSなら何とか。
　　　　　　　　　　∧＿∧
　　　 ∧＿∧ 　（´<_｀ 　）　兄者デザインセンスないからな…。
　　　（　´_ゝ`）　/　　 ⌒i
　　 ／　　　＼　 　　　|　|
　　/　　 　/￣￣￣￣/　|
＿_(__ﾆつ/　 FMV　 / .| .|＿＿＿＿
　　　 ＼/＿＿＿＿/　（u　⊃