WordPress テーマ(テンプレート)・3カラム版
WordPress 用のテーマ(テンプレート)・3カラム版を作りました。日本語表示できます。スクリーンショットの3カラム固定レイアウトの他、3カラムリキッドレイアウトや2カラム・1カラムにも変更可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。
注:本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります(条件は予告なしに変更する可能性がありますので予めご了承ください)。
1.動作確認環境
動作確認は下記の環境で行っています。
- OS:Windows2000/XP
- ブラウザ:IE6.0/IE7.0/Firefox 2.0/Opera 9
- WordPress ME:2.0.5~2.2.3
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">
<body class="layout-three-column-liquid">
<body class="layout-two-column-left">
<body class="layout-two-column-liquid-left">
<body class="layout-two-column-right">
<body class="layout-two-column-liquid-right">
<body class="layout-one-column">
<body class="layout-one-column-liquid">
1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。
配布時は一番上の3カラム・固定レイアウトで配布しております。
5.記事の日付表示について
本項目は 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>
を削除してください。
6.XHTML1.0 Transitional valid
テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。
7.その他
基本的な動作は確認したつもりですが、WordPress の動作を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。
8.ダウンロード
下のリンクからテーマ(テンプレート)をダウンロードしてください。
2007.02.05 初版
2007.02.06 クレジットバナーにアンカーを追加
2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加
2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正
2007.03.13 日付表示のテンプレートタグを変更と、それに伴う5項の JavaScript 削除
2007.07.22 XHTML 1.0 Strict 等、変更
2007.12.03 月別アーカイブリストの件数表示、0件のカテゴリーの非表示等、変更 2008.06.16 floatのクリア方法変更、フッタのWordPress MEへのリンクを変更
- 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 追記
リストマークが表示されない問題について記述を追加しました。またテーマの右サイドバー下にあるクレジットバナーにリンクが設定されていなかったため、修正しました。

