小粋空間  -  a cheap joke and a play on words site

WordPress テーマ（テンプレート） XHTML 1.0 Strict

当サイトで配布中の WordPress テーマ（テンプレート）をバージョンアップしました。新しいテンプレートは下記のリンクよりダウンロードしてご利用ください。

WordPress テーマ（テンプレート）・3カラム版

注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります。

主な変更点は下記の通りです。

１．XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素（p 要素など）を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう（このサイトは XHTML 1.0 Transitional ですが）。

この変更に伴って下記の修正も実施しました。

• form 要素に fieldset 要素追加
• textarea 要素に初期値設定（記事ページ）

２．フォントサイズ変更

やや大きめのフォントサイズにしました。項番５と関連しています。

３．各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事（アーカイブ）名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。
なお、アーカイブページはまだ不具合が残っていますので追って修正したいと思います。

４．float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による float 解除に修正しました。

関連記事：CSS の after 擬似要素で回り込みを解除する

５．フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

• NOTE：フォントサイズ指定手法 / 続フォントサイズ指定手法

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事：Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

６．line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

参考サイトは下記です。ありがとうございました。

• Lucky bag::blog：line-height の値には単位なしが良いとされる理由

７．pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

８．ヘッダの ID 属性値変更

ヘッダの ID 属性値を「banner」から「header」に変更しました。

９．画像用CSS設定削除

本文に画像の挿入を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

１０．その他

大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています（文書構造にデザインを示す単語を用いるのが適切でないことは理解しています）。