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

FC2ブログ用共有テンプレート[context]について説明します。

[context]は2カラム・右サイドバー固定幅（230px）・メインカラム可変幅のテンプレートです。 ページ上部のタブ型ナビゲーションバーはブログの「表示モード」を表し、各モード（タブ）ごとにサイドバーの内容が変わります。 現在どのタブがアクティブであるかが常にわかるように、サイドバーも含めタブごとに異なる背景色が設定されています。

• Homeタブでは最新の記事を表示します。いわゆるトップページです。
• Archiveタブでは記事を時系列順に、全記事一覧と月別アーカイブを表示します。
• Categoryタブでは記事をカテゴリごとに表示します。
• Searchタブではキーワードあるいはユーザータグでブログ内を検索した結果を表示します。

「タブを使って目的の記事を探し、記事を読むのは個別記事で」という使い方を想定しているため、 トップと個別記事以外のページでは各記事は記事タイトルのみ表示され、全文は表示されません。

サイドバーの内容はブログの表示モード（タブ）ごとに異なります。 ブログの設定でプラグインを有効にすると、トップページ（Home）と個別記事ページのサイドバーの内容をプラグインで設定できます。 また、個別記事ページの最下部にプラグインカテゴリ3が設置されます。

以下の機能に対応しています。

• 全記事表示モード（titlelist_area）
• プラグイン機能
• ユーザータグ機能
• 親子カテゴリ機能
• プライベートモード機能：プライベートモードで閲覧すると、ブログ上部に「プライベートモードで閲覧中です。」と表示されます。

以下の機能には対応していません。

• コメント装飾・絵文字機能
• 同日の記事をまとめて表示(same_day)
• 個別記事以外でのコメント表示(comment_list)
• スレッドテーマに関する表示(community)

利用規約はとくに設けていません（FC2ブログの規約に準じます）。カスタマイズは自由です。 ページ最下部にこの記事へのリンク（Template by mb）がありますが、削除しても構いません。 常識の範囲内でご利用ください。

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

記事の表示件数

管理画面の「環境設定＞ブログの設定＞記事の設定」から各表示モードでの記事の表示件数を設定できます。 おすすめの設定は、最新記事一覧:10件程度、記事(ページ別):5〜10件程度、記事(月別):50〜99件程度、記事(カテゴリ別)、記事(検索結果)、記事(タグ検索結果):それぞれ10〜20件程度です。

アクセス解析を設置する

AccessAnalyzer.comなどのアクセス解析用JavaScriptコードは、 </body>直前に貼り付けることをおすすめします。

タブとサイドバーの背景色を変更する

「スタイルシート編集」で以下の箇所を変更します。

/* Homeタブの色 */
#index #nav,
#index #nav li em,
#index #utilities {
 color:#46696a;
 background: #c5e4e7;
}

#index #content {
 border-color:#c5e4e7;
}

タブとサイドバーの背景色を変更するには上記のbackgroundとborder-colorの両方の値を、 タブの文字色を変更するにはcolorの値を変更してください。

Categoryタブの初期ページを別のカテゴリに変更する

Categoryタブの初期ページは「未分類カテゴリ」（カテゴリNo.0）になっています。 これを別のカテゴリに変更するには、「HTML編集」で以下のコードを探し、 blog-category-0.htmlの「0」の部分を変更したいカテゴリの番号に書き換えます。

<!--not_category_area-->
<li><a href="<%url>blog-category-0.html" title="カテゴリ別アーカイブ">Category</a></li>
<!--/not_category_area-->

サイドバーにブログパーツを追加する

サイドバーの内容は各種エリア変数で区別されており、どの表示モードで何を表示するかを細かく設定できます。 「HTML編集」で以下の形式のコードを書き加えることで、サイドバーにブログパーツを追加できます。

<div class="utility">
<h3>（タイトル）</h3>
（内容）
</div>

ここではトップページ、個別記事ページ、すべてのページの3つの場合を例にします。 なお、追加する内容は横幅175px以下にしてください。

1. トップページのサイドバー

   <div id="utilities">
   <h2>Utilities</h2>
   
   <!--index_area-->
   <!-- ==== ▼トップのサイド▼ ==== -->
   
   〜（略）〜
   
   <!-- ==== ▲トップのサイド▲ ==== -->
   <!--/index_area-->

   上記「〜（略）〜」の部分がサイドバーの内容です。 プラグイン有効の場合は<!--plugin-->〜<!--plugin-->内に、 プラグイン無効の場合は<!--not_plugin-->〜<!--not_plugin-->内に、 追加したいコードを書き加えてください。

2. 個別記事ページのサイドバー

   <!--permanent_area-->
   <!-- ==== ▼個別記事のサイド▼ ==== -->
   
   〜（略）〜
   
   <!-- ==== ▲個別記事のサイド▲ ==== -->
   <!--/permanent_area-->

   同様に、 プラグイン有効の場合は<!--plugin-->〜<!--plugin-->内に、 プラグイン無効の場合は<!--not_plugin-->〜<!--not_plugin-->内に、 追加したいコードを書き加えてください。

3. すべてのページのサイドバー

   すべてのページでサイドバーの最上部に表示するには、以下の（ここに追加）の部分に追加したいコードを書き加えてください。

   <div id="utilities">
   <h2>Utilities</h2>
   （ここに追加）
   <!--index_area-->
   <!-- ==== ▼トップのサイド▼ ==== -->

   すべてのページでサイドバーの最下部に表示するには、以下の（ここに追加）の部分に追加したいコードを書き加えてください。

   <!--/edit_area-->
   （ここに追加）
   </div><!-- utilities end -->

サイドバーにバナーを貼る

<div class="utility">
<h3>（タイトル）</h3>
（内容）
</div>

上記形式のブログパーツではなく、 画像にリンクを設定しただけの単純なバナー（たとえばあわせて読みたい）を追加するには以下のコードを利用してしてください。 画像の幅は200px以下にしてください。

<p class="banner">
<a href="リンク先URL"><img src="画像URL" alt="代替テキスト" /></a>
</p>

コードを追加する場所は「サイドバーにブログパーツを追加する」を参考にしてください。

ユーザータグに関する項目を削除する

ユーザータグ機能を利用していない場合、無意味な表示になる箇所がいくつか含まれています。 「HTML編集」で該当部分を削除するか、「スタイルシート編集」でコードを追加してください。

HTMLを削除する場合、以下の2箇所を削除します。

1. 294行目あたり

   <form action="./" method="get" class="search user-tag">
   <fieldset>
   <legend>タグ検索</legend>
   <div>
   <input type="text" name="tag" value="" id="tag" size="30" /><input type="submit" value="検索" class="btn" title="タグ検索" /><br />
   </div>
   <ul class="tag">
   <!--rtag-->
   <li><a href="<%rtag_url>" title="<%rtag_count>件" class="tag<%rtag_count>"><%rtag_name>(<%rtag_count>)</a> </li>
   <!--/rtag-->
   </ul>
   </fieldset>
   </form>

2. 863行目あたり

   <div class="utility user-tag">
   <h3>タグで検索</h3>
   <form action="./" method="get" class="search">
   <div><input type="text" name="tag" value="" id="tag" size="15" /><input type="submit" value="検索" class="btn" title="タグ検索" /></div>
   </form>
   <ul class="tag">
   <!--rtag-->
   <li><a href="<%rtag_url>" title="<%rtag_count>件" class="tag<%rtag_count>"><%rtag_name></a> </li>
   <!--/rtag-->
   </ul>
   </div>

「スタイルシート編集」でコードを追加する場合、以下の1行をCSSの最後に追加します。 CSSが有効な環境では該当箇所が見えなくなります。

.user-tag {display: none;}

個別記事の最後に広告を載せる

個別記事ページで記事の最後にGoogle AdSenseやAmazon おまかせリンク等のJavaScriptコードを貼るタイプの広告を載せるには、 「HTML編集」で以下の部分を探します。

</div><!-- entry end -->
<!--/topentry-->

<p class="pager">
<!--nextentry--><a href="<%nextentry_url>" title="１つ古い記事「<%nextentry_title>」">&lt;&lt;<%nextentry_title></a><!--/nextentry-->
<!--preventry--> | <a href="<%preventry_url>" title="１つ新しい記事「<%preventry_title>」"><%preventry_title>&gt;&gt;</a><!--/preventry-->
</p>

（ここに追加）

<!--comment_area-->
<!-- ==== ▼コメント▼ ==== -->

（ここに追加）の部分に以下のコードを追加します。

<div class="ad">
（JavaScriptコード）
</div>

（JavaScriptコード）に提供されたJavaScriptのコードを貼り付けます。

また、サイドバーにワイドスカイスクレイパー（160 x 600）サイズの広告を貼る場合にも上記のコードが利用できます。

<div class="utility">
<h3>広告</h3>
<div class="ad">
（JavaScriptコード）
</div>
</div>