3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する（WordPress 用テーマ版）
当サイトで配布中の WordPress 用テーマ（3カラム版）の、固定レイアウトの(X)HTMLマークアップについて、中央カラムをマークアップの前方に移動する方法です。
この内容は、「3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する」を元にしたものです。元記事では WordPress でのテーマ編集方法が分かりにくいため、このエントリーで説明致します。
以下、インデックスを例に、テーマ変更前と変更後の(X)HTMLマークアップ修正内容を示します。この記事のカスタマイズを行う前に、「3カラムレイアウトで中央カラムを（X）HTMLの最初に記述する」で、カラムレイアウトの仕組みを事前に知っておいてください。
１．変更前
まず、赤色で示す include 命令を、<div id="content"> に対応する div 要素の終了タグ直後に移動します（変更後のイメージをご覧ください）。
<?php get_header(); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
<div id="content">
<div class="blog">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry" id="post<?php the_ID(); ?>">
<?php the_date('Y.m.d', '<p class="date">', '</p>') ?>
<h2 class="entry-header"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry-body">
<?php the_content('Read more »'); ?>
</div>
<p class="entry-footer">Posted at <?php the_time('h:i') ?> | Category: <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?></p>
</div>
<?php endwhile; else: ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn\'t here.'); ?></p>
<?php endif; ?>
<p class="content-nav"><?php posts_nav_link(' | ', '« Previous', 'Next »'); ?></p>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>２．変更後
次に、青色で示す div 要素を追加してください。
<?php get_header(); ?>
<div id="wrap">
<div id="content">
<div class="blog">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry" id="post<?php the_ID(); ?>">
<?php the_date('Y.m.d', '<p class="date">', '</p>') ?>
<h2 class="entry-header"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<div class="entry-body">
<?php the_content('Read more »'); ?>
</div>
<p class="entry-footer">Posted at <?php the_time('h:i') ?> | Category: <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', ' | ', ''); ?></p>
</div>
<?php endwhile; else: ?>
<h2 class="center">Not Found</h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn\'t here.'); ?></p>
<?php endif; ?>
<p class="content-nav"><?php posts_nav_link(' | ', '« Previous', 'Next »'); ?></p>
</div>
</div>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>変更したら「ファイルを更新」をクリックして保存してください。
３．その他のファイル
インデックスと同じ変更を、
- アーカイブ
- ページ
- 検索結果
- シングルポスト
についても行ってください。スタイルシートの変更もお忘れなく。
WordPress テーマ修正
配布中の「WordPress テーマ（テンプレート）・3カラム版」を修正しました。
ダウンロードアーカイブは変更済ですので、上記のリンクよりご利用ください。
変更点は下記の通りです。赤色が削除、青色が追加を示しています。
１．月別アーカイブリストの件数表示
サイドバーの月別アーカイブリストの件数が非表示になっていたので、表示されるように変更しました。
変更前
<li><h2>Archives</h2>
<ul><?php wp_get_archives(); ?></ul>
</li>変更後
<li><h2>Archives</h2>
<ul><?php wp_get_archives('show_post_count=true'); ?></ul>
</li>show_post_count=true で件数を表示します。
この変更は下記の記事を参考にさせて頂きました。ありがとうございました。
２．カテゴリーリストの表示変更
カテゴリーリストで、記事数が0のカテゴリーを非表示にしました。また、サブカテゴリーを階層表示するようにしました。
変更前
<li><h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=0'); ?>
</ul>
</li>変更後
<li><h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=1&hierarchical=1'); ?>
</ul>
</li>hide_empty=1 で記事がないカテゴリを非表示にします。
hierarchical=1 でカテゴリーを階層表示します。
この変更は下記の記事を参考にさせて頂きました。ありがとうございました。
また、階層化に伴い、スタイルシートに下記の設定を追加しました。
#links-left ul ul.children,
#links-right ul ul.children {
margin-top: 0;
}３．ブログロールの表示ページ変更
ブログロールを全てのページで表示されるように変更しました。
変更前
<?php if ( is_home() || is_page() ) { ?>
<?php get_links_list(); ?>
<?php } ?>変更後
<?php get_links_list(); ?>WordPress テーマ（テンプレート） XHTML 1.0 Strict
当サイトで配布中の WordPress テーマ（テンプレート）をバージョンアップしました。新しいテンプレートは下記のリンクよりダウンロードしてご利用ください。
注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「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 解除に修正しました。
５．フォントサイズを % 指定に変更
px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。
また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。
この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには 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 に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。
参考サイトは下記です。ありがとうございました。
７．pre 要素用 CSS 追加
プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。
８．ヘッダの ID 属性値変更
ヘッダの ID 属性値を「banner」から「header」に変更しました。
９．画像用CSS設定削除
本文に画像の挿入を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。
１０．その他
大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています（文書構造にデザインを示す単語を用いるのが適切でないことは理解しています）。
中央カラムに「ニュース」「お知らせ」を表示する
公開テンプレートの中央カラムの先頭に「ニュース」「お知らせ」等の、エントリーとは別のちょっとした情報を表示させる方法です。ご質問を頂きましたので本エントリーにて紹介致します。
ここでは Movable Type をサンプルに説明していますが、公開テンプレートであればどれも大体同じカスタマイズで実現可能です。
１．テンプレートの修正
基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報（青色）を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。
：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
<MTEntries>
<$MTEntryTrackbackData$>
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
：追加部分全体を div 要素で括り、エントリーと同じ class="entry" を与えています。これで全体のスタイルがエントリーと同じものになります。
その下のタイトルは class="news-header" という新しい class 属性を与え、表示位置を整えています。また本文の p 要素にも class="news-content" を与えています。
２．スタイルシートの修正
下記の内容をスタイルシートに追加します。
.news-header {
margin: 5px 0;
color: #444444;
font-size: 12px;
font-weight: bold;
}
.news-content {
margin-top: 5px;
}設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。
ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。
３．テンプレートモジュールにする
お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。
３．１ 新しいテンプレートモジュールの作成
管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。
テンプレート名：news
モジュールの内容：下記をコピー
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>３．２ テンプレートの修正
テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。
：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
<$MTInclude module="news"$>
<MTEntries>
<$MTEntryTrackbackData$>
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
：スタイルシートは２項の内容をそのままお使いください。
なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。
WordPress テーマ（テンプレート）・3カラム版
WordPress 用のテーマ（テンプレート）・3カラム版を作りました。日本語表示できます。スクリーンショットの3カラム固定レイアウトの他、3カラムリキッドレイアウトや2カラム・1カラムにも変更可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。
注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります（条件は予告なしに変更する可能性がありますので予めご了承ください）。
１．動作確認環境
動作確認は下記の環境で行っています。
- OS：Windows2000/XP
- ブラウザ：IE6.0/IE7.0/Firefox 2.0/Opera 9
- WordPress ME：2.0.5～2.2.3
２．利用規定
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。
３．カラムレイアウト変更方法
このテーマではカラムレイアウトのバリエーションとして、
- 3カラム（カラム幅固定）
- 3カラムリキッドレイアウト（中央カラム幅可変）
- 2カラム（右サイドバー：カラム幅固定）
- 2カラム（左サイドバー：カラム幅固定）
- 2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
- 2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
- 1カラム（カラム幅固定）
- 1カラムリキッドレイアウト（カラム幅可変）
の計8種類を用意しています（それぞれのサンプルは下にある画像をご覧ください）。
カラムレイアウトの変更は、header.php にある body 要素の class 属性の書き換え、カラム数の変更は各テンプレートのサイドバーの読み込みを変更することで実現しています。
詳細は別エントリーでご紹介したいと思いますが、例えば3カラム固定レイアウトから3カラムリキッドレイアウトに変更したい場合は、header.php の
<body class="layout-three-column">の赤色部分を
<body class="layout-three-column-liquid">と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。
以下にそれぞれのレイアウトに対する class 属性値を示します。
<body class="layout-three-column">
3カラム
<body class="layout-three-column-liquid">
3カラム・リキッドレイアウト
<body class="layout-two-column-left">
2カラム（左サイドバー）
<body class="layout-two-column-liquid-left">
2カラム・リキッドレイアウト（左サイドバー）
<body class="layout-two-column-right">
2カラム（右サイドバー）
<body class="layout-two-column-liquid-right">
2カラム・リキッドレイアウト（右サイドバー）
<body class="layout-one-column">
1カラム
<body class="layout-one-column-liquid">
1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。
配布時は一番上の3カラム・固定レイアウトで配布しております。
５．記事の日付表示について
本項目は 2007.03.13 以前にダウンロードされた場合のみ該当します。
本テンプレートでは、タイトル前方に記事の公開日を表示するようにしており、JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('p');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
if (elements[i].getAttribute('class') == 'date' ||
elements[i].getAttribute('className') == 'date') {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
}
//-->
</script>を削除してください。
６．XHTML1.0 Transitional valid
テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。
７．その他
基本的な動作は確認したつもりですが、WordPress の動作を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。
８．ダウンロード
下のリンクからテーマ（テンプレート）をダウンロードしてください。
2007.02.05 初版
2007.02.06 クレジットバナーにアンカーを追加
2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加
2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正
2007.03.13 日付表示のテンプレートタグを変更と、それに伴う５項の JavaScript 削除
2007.07.22 XHTML 1.0 Strict 等、変更
2007.12.03 月別アーカイブリストの件数表示、0件のカテゴリーの非表示等、変更
- ZIP形式（利用前に必ず下記のプラグインを有効にしてください）
テーマの設定方法は、ダウンロードしたファイルを解凍し、中にある koikikukan というフォルダを、wp-content/themes 配下にアップロードしてください。そのあと管理画面の [表示] をクリックすると「利用できるテーマ」にアップロードしたテーマが表示されますので、クリックしてください。
注：本文冒頭に記した「Commented entry list」プラグインをインストール（かつ有効化）していないと、下記のエラーが発生します。
Fatal error: Call to undefined function get_recently_commented() in ～/wp-content/themes/koikikukan3/sidebar2.php on line 11注：サイドバーのリストマークは画像を用いて表示しています。この画像が表示されない場合、アップロードしたテーマの中にある images ディレクトリのパーミッションを変更してください。755 等になっていれば大丈夫と思います。
2007.02.06 追記
リストマークが表示されない問題について記述を追加しました。またテーマの右サイドバー下にあるクレジットバナーにリンクが設定されていなかったため、修正しました。
WordPress テーマ（テンプレート）
WordPress 用のテーマ（テンプレート）を作りました。サンプルのスクリーンショットは2カラム（右サイドバー）ですが、左サイドバーも用意しております。レイアウトの変更方法につきましては本エントリー本文を参照ください。
WordPress テーマ（テンプレート）・3カラム版も用意していますのでご利用ください。
１．動作確認環境
動作確認は下記の環境で行っています。
- OS：Windows2000/XP
- ブラウザ：IE6.0/IE7.0/Firefox 2.0/Opera 9
- WordPress ME：2.0.5～2.0.7（以降のバージョンでもOKのようです）
２．利用規定
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。
３．カラムレイアウト変更方法
このテーマではカラムレイアウトのバリエーションとして、
- 2カラム（右サイドバー：カラム幅固定）
- 2カラム（左サイドバー：カラム幅固定）
- 2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
- 2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
の計4種類を用意しています（それぞれのサンプルは下にある画像をご覧ください）。
カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます。例えば、2カラムの右サイドバーから2カラム（左サイドバー）に変更したい場合は、header.php の
<body class="layout-two-column-right">の赤色部分を
<body class="layout-two-column-left">と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。
以下にそれぞれのレイアウトに対する class 属性値を示します。
<body class="layout-two-column-right">
2カラム（右サイドバー）
<body class="layout-two-column-liquid-right">
2カラム・リキッドレイアウト（右サイドバー）
<body class="layout-two-column-left">
2カラム（左サイドバー）
<body class="layout-two-column-liquid-left">
2カラム・リキッドレイアウト（左サイドバー）
配布時は一番上の2カラム・固定レイアウト（右サイドバー）で配布しております。
５．記事の日付表示について
本テンプレートでは、タイトル前方に記事の公開日を表示するようにしており、JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('p');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
if (elements[i].getAttribute('class') == 'date' ||
elements[i].getAttribute('className') == 'date') {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
}
//-->
</script>を削除してください。
６．XHTML1.0 Transitional valid
テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。
７．その他
基本的な動作は確認したつもりですが、WordPress の動作を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。
８．ダウンロード
下のリンクからテーマ（テンプレート）をダウンロードしてください。
2007.01.17 初版 2007.01.24 コメントエリアの横幅を修正 2007.02.11 クレジットバナーにアンカーを追加 2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加 2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正
テーマの設定方法は、ダウンロードしたファイルを解凍し、中にある koikikukan というフォルダを、wp-content/themes 配下にアップロードしてください。そのあと管理画面の [表示] をクリックすると「利用できるテーマ」にアップロードしたテーマが表示されますので、クリックしてください。
2007.02.04 追記
カラムレイアウト変更内容に誤記がありましたので修正しました。
