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

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

スポンサーサイト

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

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

共有テンプレート[chameleon]更新

2006年06月10日(土)

[chameleon]を更新しました。主な仕様は以下のとおりです。

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


1.(トップページの)サイドバーに項目を追加する

トップページのサイドバーには初期状態で、プロフィール、最近のコメント、最近のトラックバック、リンクが設定されています。 サイドバーに項目を追加する(または削除する)には、テンプレートのHTMLの編集にて、以下の部分を探します。

<!--index_area-->
<!-- ==== ▼indexモード▼ ==== -->
<div id="utilities">
<h2>Utilities</h2>

(サイドバーの中身)

</div><!-- utilities end -->
<!-- ==== ▲indexモード▲ ==== -->
<!--/index_area-->

この部分がトップページのサイドバーの内容になっています。

さらに、サイドバーに表示される項目は以下の構造を想定してCSSが設定してあります。

<div class="utility">
<h3>項目名</h3>

<ul>
<li><a>リスト項目</a></li>
</ul>

</div>
<div class="utility">
<h3>項目名</h3>

<dl>
<dt></dt>
<dd></dd>
</dl>

</div>

上記のどちらかの構成のタグを自分で追加することで、(見た目を維持したまま)サイドバーの項目を増やすことができます。 なお、サイドバーに追加するものの横幅は166px以下を推奨します。

1-1. (例)メールフォームを追加する

FC2ブログのプラグイン機能にあるメールフォームを追加するには、サイドバーの中身を記述する部分に 以下のタグを貼り付けます。

<div class="utility">
<h3>メール</h3>
<form action="./" method="post" class="mail">
<dl>
<dt>名前:</dt>
<dd><input type="text" size="10" name="formmail[name]" value="" /></dd>

<dt>メール:</dt>
<dd><input type="text" size="10" name="formmail[mail]" value="" /></dd>

<dt>件名:</dt>
<dd><input type="text" size="10" name="formmail[title]" value="" /></dd>

<dt>本文:</dt>
<dd><textarea name="formmail[body]" cols="10" rows="6"></textarea></dd>
<dd>
<input type="submit" value=" 確認 " class="btn" />
<input type="hidden" name="mode" value="formmail" />
<input type="hidden" name="formmail[no]" value="あなたのメールフォームID" />
</dd>
</dl>
</form>
</div>

メールフォームIDはブログ管理者ページの、「プラグインの設定」→メールフォームの「設定の変更」ページのURLの末尾の数値です。

admin.php?mode=editplugin&action=modify&no=XXXXX
1-2. (例)Amazon.co.jpの商品リンクを追加する
<div class="utility">
<h3>おすすめ商品</h3>

<dl class="amazon">
<dt><a href="商品のURL1">商品名1</a></dt>
<dd><img src="画像のURL1" alt="" /></dd>

<dt><a href="商品のURL2">商品名2</a></dt>
<dd><img src="画像のURL2" alt="" /></dd>

</dl>

</div>

商品画像のURLはG-Toolsなどから得てください(画像の横幅は166px以下にしてください)。

2. タブと枠の色を変える

初期状態では、ブログのページモードによってタブと枠の色が指定されています。 これを変更するには、テンプレートのCSSの変更にて、以下の部分を探します。

/* アーカイブモードでの色 */
#archive h1, #archive h1 a,
#archive #nav,
#archive #nav em,
#all h1, #all h1 a,
#all #nav,
#all #nav em {
 background-color:#f4a460;
 color:#2f4f4f;
}

#archive #contents,
#all #contents {
 border-color:#f4a460;
}

たとえば上記はアーカイブモードでの色を指定している部分です。タブと枠の色を変えるには 上記のbackground-colorおよびborder-colorの値を、 文字の色を変えるには上記のcolorの値を変更してください。 その他のモードの色についても同様です。

3. Google AdSenseの導入
個別記事の終わりにGoogle AdSenseを載せるには、テンプレートのHTMLの編集にて、以下の部分を探します。
<!--permanent_area-->
<p class="prev-next-nav">
<!--nextentry--><a href="<%nextentry_url>"><< 1つ古い記事「<%nextentry_title>」</a><!--/nextentry-->
<!--preventry--> | <a href="<%preventry_url>">1つ新しい記事「<%preventry_title>」 >></a><!--/preventry-->
</p>
<!--/permanent_area-->

これを以下のように書き換えます。

<!--permanent_area-->

<div class="adsense">
(アドセンスのコードを貼り付けます)
</div>

<p class="prev-next-nav">
<!--nextentry--><a href="<%nextentry_url>"><< 1つ古い記事「<%nextentry_title>」</a><!--/nextentry-->
<!--preventry--> | <a href="<%preventry_url>">1つ新しい記事「<%preventry_title>」 >></a><!--/preventry-->
</p>
<!--/permanent_area-->
4. [chameleon]用スクリプトの導入

テンプレートのHTMLの編集にて、<head>~</head>内(わかりにくければ</head>の直前)にJavaScriptのコードを貼り付けることで 「検索ワードハイライト」機能が追加されます。 (この機能は試験的なものです。予告なく削除・変更される場合があります)

4-1. 検索ワードハイライト
<!--search_area-->
<script type="text/javascript" src="http://blog-imgs-27.fc2.com/m/b/m/mb/HSW.js"></script>
<!--/search_area-->

ブログ内検索で検索したキーワードがハイライトされます。

5. Google検索フォームの追加
ブログ内検索での検索結果ページ右上に、Google検索の検索窓を設置できます。 テンプレートのHTMLの編集にて、次の部分を探します。
</div><!-- nav end -->


<div id="contents">

<!--date_area-->
<!-- ==== ▼Archiveモード▼ ==== -->

これを以下のように書き換えます。

</div><!-- nav end -->


<div id="contents">

<!--search_area-->
<!-- ==== ▼Searchモード▼ ==== -->
<div id="utilities">
<h2>Utilities</h2>

<div class="utility">
<h3>Googleブログ内検索</h3>
<form action="http://www.google.co.jp/search" method="get" class="search">
<fieldset>
<legend>ブログ内検索</legend>
<input type="text" name="q" value="<%sub_title>" size="20" /><input type="submit" value="Google 検索" title="Googleを利用してキーワードを含む個別記事を検索" class="btn" />
<input name="ie" value="EUC-JP" type="hidden" />
<input name="oe" value="EUC-JP" type="hidden" />
<input name="hl" value="ja" type="hidden" />
<input name="hq" value="inurl:blog-entry" type="hidden" />
<input name="domains" value="あなたのブログURL" type="hidden" />
<input name="sitesearch" value="あなたのブログURL" type="hidden" />
</fieldset>
</form>
</div>

</div><!-- utilities end -->
<!-- ==== ▲Searchモード▲ ==== -->
<!--/search_area-->


<!--date_area-->
<!-- ==== ▼Archiveモード▼ ==== -->

「あなたのブログURL」は「http://」を除いた部分(このブログならmb.blog7.fc2.com/)にします。 あなたのブログの個別記事だけを検索対象とするGoogle検索窓が設置されます。

#96
カテゴリ:共有テンプレート
タグ[ 共有テンプレート カスタマイズ ]

(-0件)

コメントの投稿

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

http://mb.blog7.fc2.com/tb.php/96-61ce5ef8

<<メモ:Safari background-imageのバグ | titleは大事>>

Utilities

おすすめ

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

広告

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