ブログ記事のAA対応を WordPress版

昨日の続き。

<結論:CSSを設定する>

指定箇所

wp_content/themes/default/style.css
.commentlist p{}
.widecolumn .entry p {}
.narrowcolumn .entry p {}

指定要素

font-size:12pt;
line-height:18px;
font-family: 'Mona','IPA MONAPGOTHIC','MS PGothic','MS Pゴシック','MS Pゴシック','MS Pゴシック',sans-serif;

# style.cssを直接編集してもよいが、上記ファイルをライト可能にしてから、外観→編集→スタイルシート(style.css) で編集するのがWordPress流か。

検証

検証用のAAは、葱板プチAAスレまとめサイトのテンプレより。

オリジナルイメージ

AAのサンプル画像

検証AA(誤り)

【AAがずれて見える方へ】
■ AAは、Windows+IE、フォント「MS Pゴシック 中(12ポイント/16ピクセル)」(IE標準)
   の状態で、最適表示になります(ズレのないAAが見られます)。

                         |   結  .| パエリア |    奏     .|   美月 . |
※右のAAのズレない環境が標準です。 |   _  .|  ㍉ヽ +.|    _     .|.  _  .|
                         | ’´ `´ ヽ .|    );;}  |  ’´ `´ 、ヽ  |,’´ ,^ ^ヽ |
                         | ! 〈ノノハ)))〉| <二ン ..|/(((从リ))ミ\..|i fiハヾリ〉|                                |ノ (リ;゚ヮノリ .| . 介/ .   |レ'リi、ヮ゚;リツヽ、j ||i!(|!゚д゚ノi|.|
これでうまく表示されるだろうか……と問う前に、私の環境でうまく表示されていない(ぉぃ)。
調査の結果、半角アポストロフィーを入力/コピペする際、なぜか全角アポストロフィーになってしまっている様子。
半角:'
全角;’
というわけで、半角アポストロフィーを正しく入力する(’を、&apos;に置き換える)と、以下のようになる。

検証AA2(本物)

【AAがずれて見える方へ】
■ AAは、Windows+IE、フォント「MS Pゴシック 中(12ポイント/16ピクセル)」(IE標準)
   の状態で、最適表示になります(ズレのないAAが見られます)。

                         |   結  .| パエリア |    奏     .|   美月 . |
※右のAAのズレない環境が標準です。 |   _  .|  ㍉ヽ +.|    _     .|.  _  .|
                         | '´ `´ ヽ .|    );;}  |  '´ `´ 、ヽ  |,'´ ,^ ^ヽ |
                         | ! 〈ノノハ)))〉| <二ン ..|/(((从リ))ミ\..|i fiハヾリ〉|                                |ノ (リ;゚ヮノリ .| . 介/ .   |レ'リi、ヮ゚;リツヽ、j ||i!(|!゚д゚ノi|.| この操作にて、私の環境での表示は上手くいった。 みなさまの環境ではいかがでしょう? なお、元々のページがまだ治っていないが、文字の変換に失敗したことがAAずれの原因と推定されるため、さらしageしておくことにする。(注:異なるテクノロジを用いた複数回の変換を実施しているため、責任を問う者でもなければ問えるものでもありません。)

検討・調査

1. CSSファイルをいじる方法 vs divタグで直接指定する方法

 ホームページなどを作成する際にはCSSファイルの編集が正統な方法だが、今回はdivタグに直接指定する方法を中心に検討した。

 (1) アスキーアートは、意味づけ/レイアウトによる体裁の変更が許可されない
  意味によってタグ付けをしていく、HTML-CSS形式の利点は、大幅なレイアウト変更に対して本文の変更がまったく必要ないことが利点であるが、アスキーアートは、特定の表示環境に特化した技法/文化であることから、そもそもCSSの思想と相容れない。

 (2)WordPressではAddQuicktagsプラグインを用いることで、タグの個別スタイル指定が簡単にできる。
 通りすがりT氏のヒントからのリンク先で採用している、AddQuicktagsを用いる方法。本来めんどいはずの作業が簡略化されるので、アスキーアートを使いやすくなる。

 (3) WordPressのCSSファイルを読み切れそうになかった
  実は、これが本音(笑)
  WordPressでは、rtl.css(RTLスタイルシート)とstyle.css(スタイルシート)があり、記事で使われているのは後者。

が、検討の結果、結局CSS指定する方式にした。理由は以下の通り。

 (1) 文章中にアスキーアートを用いる場合、そこだけレイアウト変更されているとアスキーアートが浮く。
  アスキーアートがCSSの思想と相容れないのは上記の通りだが、周囲のコメントはCSSで規定されなければならないところ、アスキーアートを特別扱いすると結局浮いてしまう。
  したがって、アスキーアートを用いる可能性のある部分すべて(エントリ、および、コメント)を固定のCSS指定にしてしまう必要がある、との考えに至った。

 (2)本文はともかく、コメントでタグ指定は期待できない。
 コメント欄のAAに長いstyleタグは打てない。

 (3) WordPressのCSSファイルを結局読み切った orz
  今回の変更とあわせて、記事のスペースを広く取る変更を実施した。
  (広いAAを貼るスペースを確保したかったため。狭い画面使っている方には申し訳ないですが)

2. フォント指定の差違

以前の調査結果は以下の通り

font-family: “MS P ゴシック”, “IPA モナー P ゴシック”, “モナー P ゴシック”;
font-size: 12pt;
line-height: 121%;

であり、今回との差違は、フォント指定とline-heightの絶対/相対である。
フォント指定については、完全に私の誤り。
line-heightについて、相対指定は普通の「変化するスタイル」にはもってこいなのだが、今回はAAが対象なので、上記の理由から絶対指定のほうが筋が良い。

参考サイト

WikipediaのAA解説
WordPressでAAをきれいに表示してみたいMOMENTS)および関連リンク

タグ: , ,