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

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

共有テンプレート[chameleon]

2005年05月30日(月)

このエントリーの最終更新:
2005-09-19

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

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

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

Indexモード(Index)
右サイドにProfile、最近のコメント、トラックバック、リンク。フッターに月別アーカイブとカテゴリ別アーカイブ。
個別記事モード(Permanent)
右サイドに最近のエントリー。フッターに月別アーカイブとカテゴリ別アーカイブ。
月別モード(Archive)
エントリーに加えて、エントリーのタイトル一覧が表示されます。右側に各月へのリンク。
※月別アーカイブでは本文の全文は表示されず、要約と個別記事へのリンクが用意されます。
カテゴリ別モード(Category)
エントリーに加えて、エントリーのタイトル一覧が表示されます。右側にカテゴリ一覧。
検索モード(Search)
エントリーに加えて、エントリーのタイトル一覧が表示されます。

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

[chameleon]仕様
項目内容
文書型XML宣言付き XHTML1.0 Transitional
基本装備コメント、トラックバック、リンク、検索、RSS、プロフィール
アーカイブ月別、カテゴリ別(Indexページから「次のページ」は用意されていません)
最近の○○コメント、トラックバック(Indexのみ)最近のエントリー(個別記事のみ)
コメント名前、題名、本文、メール(入力のみ)、Pass、編集、秘信、URL、投稿日時(トリップはなし)
トラックバックエントリータイトル、要約、サイト名、受信日
エントリーの表示単位「エントリー単位」推奨
プラグインIndexページのサイドバーにプラグイン1とプラグイン2
個別記事のサイドバーにプラグイン3
画像2種類使用
JavaScript未使用
link要素のrel属性top, next, prev, search他(nextは未来、prevは過去へのリンク)※
前/次のページ「Prev」は過去へのリンク、「Next」は未来へのリンク。Indexページ以外のページ上部と下部に表示。
前/次のエントリー左側にひとつ古い記事へのリンク、右側はひとつ新しい記事へのリンク。個別記事表示のときページ上部と下部に表示。
管理人専用リンクなし
確認ブラウザFirefox1.0, WinIE6, Opera7.5, Netscape7.1
推奨ブラウザFirefox1.0
その他幅、文字サイズは可変。モードごとにタブ色が変わります。CSSの一番最後に色の指定があるのでそこから変更可能。
著作権カスタマイズは自由です。デフォルトでこのページへのリンクが用意されていますが、削除してもかまいません。
  • ※「未来」「過去」「古い」「新しい」というのはエントリーの表示の方法を「日付が新しい順」にしている場合です。

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

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-colorborder-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:登録
#17
カテゴリ:共有テンプレート
タグ[ FC2ブログ 共有テンプレート カスタマイズ ]

同じカテゴリの記事

(-3件)

siba:質問させてください

素敵なテンプレートなので使わせて頂きます。

一つ質問なのですが、個別記事表示の時に一番上に個別記事タイトルが表示されますが、トップページのようにブログ名を表示させるにはどうカスタマイズすれば良いでしょうか。
よろしければご教示下さい。

  • 2005年09月30日(金)13:57:11
  • URL
  • 編集
みりばーる:個別記事でブログ名を表示するには

それにはHTMLを編集します。
<h1 id="top">~</h1>内の<!--permanent_area-->~<!--/permanent_area-->に<%sub_title>が入っています。
<%sub_title>を<%blog_name>に変更すればブログ名が表示されるようになります。ただしブログトップへのリンクにはなりません。この<%blog_name>を<a href="./">~</a>で囲めばリンクが張られますが文字が小さくなります。

  • 2005年10月01日(土)23:09:03
  • URL
  • 編集
siba:ありがとうございます

丁寧な回答感謝です。思うような形になりました。
ありがとうございました。

  • 2005年10月02日(日)14:51:53
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/17-e455d4e4

<<テンプレあれこれ | 不可解です>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。