てんぽ : 共有テンプレート[chameleon]

このエントリーの最終更新：

2005-09-19

[chameleon]は2005年6月3日登録バージョンから大幅に改訂しました。これは改訂版に関する説明です。

このテンプレートは各表示モード（index、個別記事表示、月別、カテゴリ別、検索）によってタブの色が変わることが特徴です。 各モードはタブとその色によって明示されます。また、モードごとに表示されるものが異なります。 プラグインにも対応していますが、以降の説明はプラグイン無効状態の場合についてです。

まずはモードごとの特徴について。

Indexモード（Index）

右サイドにProfile、最近のコメント、トラックバック、リンク。フッターに月別アーカイブとカテゴリ別アーカイブ。

個別記事モード（Permanent）

右サイドに最近のエントリー。フッターに月別アーカイブとカテゴリ別アーカイブ。

月別モード（Archive）

エントリーに加えて、エントリーのタイトル一覧が表示されます。右側に各月へのリンク。

※月別アーカイブでは本文の全文は表示されず、要約と個別記事へのリンクが用意されます。

カテゴリ別モード（Category）

エントリーに加えて、エントリーのタイトル一覧が表示されます。右側にカテゴリ一覧。

検索モード（Search）

エントリーに加えて、エントリーのタイトル一覧が表示されます。

「Pageモード」がないのは仕様です。

• ※「未来」「過去」「古い」「新しい」というのはエントリーの表示の方法を「日付が新しい順」にしている場合です。

以下はカスタマイズのヒントです。

1. プロフィール画像の高さの変更

プロフィール用画像の高さはCSSで設定してあります。画像の大きさに合わせて変更してください。

#profile dl {/*プロフィール画像不使用の場合、削除してください*/
 background-repeat:no-repeat;
 background-position:50% 5px;
 padding-top:110px!important;/*プロフィール画像の高さ＋10px程度*/
}

初期状態では高さが100pxの画像を想定してpadding-top:110pxにしています。画像の大きさに応じて数値を変更してください。

プロフィール画像が不要な場合はこの部分をまるごと削除します。 プロフィール欄自体がいらない場合はHTMLを修正してHTMLの該当箇所を削除またはコメントアウトしてください。

2. タブ枠の色変更

CSSを修正することで、各モードのタブ枠の色を変更できます。

色の指定はCSSの一番下のほうにあります。たとえばカテゴリモードの色を変更するにはCSSのつぎの箇所を変更します。

/* カテゴリでのタブ色 */
#category h1,
#category h1#top a,
#category #navigation ul.page-nav,
#category #navigation ul.page-nav a,
#category #menu li a#here {
 background-color:#ffe895;
 color:#2f4f4f;
}

#category #contents {
 border-left-color:#ffe895;
}

background-colorとborder-colorがタブ（枠）の色、colorがタブ（およびタイトル）部分の文字色です。カラーコードを変更して色を変えます。

3. 絵文字の大きさ

絵文字はフォントサイズに追従して大きさを変えるようになっています。これをやめるにはCSSのつぎの箇所を変更します。

/* 絵文字 */
img.emoji {
 margin:0 3px;
 padding:0;
 border:none 0px;
 float:none;
 height:1em;
 width:1em;
}

height:1em;とwidth:1em;を削除します。

4. Archive、Categoryの初期ページを変更する

タブでのリンクは、Archiveが「今月の記事一覧」、Categoryが「カテゴリ0（初期では未分類カテゴリ）の記事一覧」になっています。 これを変更するにはHTMLのつぎの箇所を変更します。

（略）
<!--not_date_area--><li><a href="<%url>blog-date-<%now_year><%now_month>.html">Archive</a></li><!--/not_date_area-->
<!--date_area--><li><a id="here" name="here" title="現在位置">Archive</a></li><!--/date_area-->

<!--not_category_area--><li><a href="<%url>blog-category-0.html">Category</a></li><!--/not_category_area-->
<!--category_area--><li><a id="here" name="here" title="現在位置">Category</a></li><!--/category_area-->
（略）

Archiveのリンクを「今月」ではなく「2005年9月」にするならblog-date-<%now_year><%now_month>.htmlの部分をblog-date-200509.htmlとします。

Categoryのリンクを「カテゴリ0」ではなく「カテゴリ1」にするにはblog-category-0.htmlの部分をblog-category-1.htmlとします。

5. コメント時の絵文字・装飾対応

デフォルトでは対応していません。以下の記事を参考にしてコードを挿入してください。

• コメント時の絵文字・装飾機能の追加
• コメント欄での絵文字・デコレーション機能のカスタマイズについて

更新履歴

• 2005-09-19：不具合を修正（ver2.0.1）。
• 2005-09-10：大幅に改訂（ver2.0）。
• 2005-06-03：MacIE5のバグ（？）の一部に対処。画像のfloatをコメントアウト。
• 2005-05-31：「半角文字列改行問題」に対処。その他CSSを微修正。
• 2005-05-30:登録