2006年06月10日（土） コメント:0 トラックバック:0
[chameleon]を更新しました。主な仕様は以下のとおりです。
- トップページ（index_area）では2カラム右サイドバー、それ以外のページ（モード）では1カラム。
- ブログのページモードによって表示されるものが変わります。
- 全記事表示モード（titlelist_area）対応。
- プラグイン機能非対応。
- コメント装飾・絵文字機能非対応。
以下はカスタマイズのヒントです。
- 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://blog7.fc2.com/m/mb/file/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検索窓が設置されます。
コメント（0件）