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

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

スポンサーサイト

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

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

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

2009年08月13日(木)

[context]サンプル FC2ブログ用共有テンプレート[context]について説明します。 2009年8月13日以降にダウンロードしたバージョンが対象です。 以前のバージョンは共有テンプレート[context]を参照してください。


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

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

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

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

サイドバーの内容
プラグイン無効のときプラグイン有効のとき
Home
  1. プロフィール
  2. 最新記事のRSS
  3. 最近のコメントリスト
  4. 最近のトラックバックリスト
  5. リンクリスト
プラグインカテゴリ1
Archive 月別アーカイブリスト 月別アーカイブリスト
Category カテゴリ一覧 カテゴリ一覧
Search タグリスト タグリスト
個別記事 最新の記事リスト プラグインカテゴリ2
コメント編集 なし なし

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

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

    注意:ブログ自体がプライベートモードでなくても、「ブロとも限定公開記事」が1つでも存在すると、<!--private_mode--><!--/private_mode-->の内容が表示されてしまいます。 これを回避するためには、「HTML編集」で<!--private_mode--><!--/private_mode-->部分を削除してください。

    この件について、FC2に問い合わせおよびフォーラムへの報告を行っていますが、今のところ返信がありません。

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

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

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

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

記事の表示件数

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

アクセス解析を設置する

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

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

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

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

.index_area #content {
 border-color:#c5e4e7;
}

タブとサイドバーの背景色を変更するには上記のbackgroundborder-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>

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

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

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

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

<p class="pager">
<!--nextentry--><a href="<%nextentry_url>" title="1つ古い記事「<%nextentry_title>」">&lt;&lt;<%nextentry_title></a><!--/nextentry-->
<!--preventry--> | <a href="<%preventry_url>" title="1つ新しい記事「<%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>
#180
カテゴリ:共有テンプレート
タグ[ FC2ブログ 共有テンプレート カスタマイズ ]

(-1件)

-:承認待ちコメント

このコメントは管理者の承認待ちです

  • 2009年11月12日(木)12:21:42
コメントの投稿

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

http://mb.blog7.fc2.com/tb.php/180-a9672ff5

<<2009年8月の雑記 | 共有テンプレート[bbs]更新>>

Utilities

おすすめ

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

広告

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