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

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

スポンサーサイト

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

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

共有テンプレート[context]

2008年10月13日(月)

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


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

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

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

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

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

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

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

  • コメント装飾・絵文字機能
  • 同日の記事をまとめて表示(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;
}

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

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

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

ユーザータグ機能を利用していない場合、無意味な表示になる箇所がいくつか含まれています。 「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 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>
#163
カテゴリ:共有テンプレート
タグ[ 共有テンプレート FC2ブログ カスタマイズ ]

(-4件)

kakifly:Re: 共有テンプレート[context]

こちらのテンプレートを使わせていただいてカスタマイズもこちらのページを参考にさせていただいています。
わからない点が3つあったので質問させてください。
1つは検索ページをなくしてこちらのような検索窓を設置したいのですが、どのようにカスタマイズすればよいでしょうか?
もう1つは、太線にすると文字の背景がグレーになってしまいます。これを白にして黒太字のみをはっきりさせたいのですが、どうすればよいでしょうか?
最後に文章を段落分けしてタイトルつけながら文章を展開したくて水平線を入れたいのですが、こちらのテンプレだと表示されません。どのようにすればよいでしょうか?
よろしかったら教えて下さい。宜しくお願いします。

  • 2009年07月22日(水)20:21:43
  • URL
  • 編集
みりばーる:>kakiflyさん

1つ目の検索ページに関してですが、このカスタマイズはかなり大掛かりなものになります。エリア変数を大幅に書き換える必要があるだけでなく、「こちらのような検索窓」のように検索窓をタブ内に配置するには高度なCSSの知識も必要になります。FC2ブログ公式マニュアルの変数一覧とこのブログのソースを参考に研究してください、としか言えません。一応、共有テンプレート[context]は現在このブログで適用しているスタイルにいずれ上書きする予定なので、そのときを気長に待ってみてください。

2つ目の太文字の件ですが、これにはstrong要素のスタイルが関わっています。CSSのem, strong { }の部分のbackground-color:#eee;が背景色のグレー、color:#333;が文字色の指定です。背景色をグレーにしない場合、background-color:#eee;の一行を削除して下さい。黒文字をはっきりさせるならcolor:#000;に変更します。

3つ目の水平線が表示されない件ですが、このテンプレートではCSSの hr { display:none; }により、水平線を非表示にしてあります。この部分を削除してください。他の部分に影響はないはずです。

  • 2009年07月23日(木)01:37:01
  • URL
  • 編集
kakifly:Re: 共有テンプレート[context]

丁寧な回答ありがとうございます。
2と3は解決できました。1は楽しみにしてます。
もう1つ質問なのですが、はてなスターやはてなブックマークを記事のタイトルの横に設置したいのですが、

<!--topentry-->
<div id="entry<%topentry_no>" class="entry">
<h3><a href="<%topentry_link>" title="個別記事を開く"><%topentry_title></a></h3>

の<h3>のタグ内に含めると改行してしまうみたいで横に並べることができません。
これはどこらへんを修正すれば記事の横に設置することができるでしょうか?

  • 2009年07月24日(金)13:42:15
  • URL
  • 編集
みりばーる:>kakiflyさん

恐らくCSSの以下の部分で個別記事へのリンクをブロックレベルにしているのが原因です(この指定により、記事タイトル部分全体がクリック可能になっています)。

div.entry h3 a {
display:block;
}

この部分を削除すればh3内に設置するだけで横並びにできると思います。ただ、記事タイトルのクリック可能な部分はテキスト部分だけになります。

  • 2009年07月26日(日)01:02:42
  • URL
  • 編集
コメントの投稿

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

http://mb.blog7.fc2.com/tb.php/163-8f57bed0

<<デジタル放送をDRMフリーで録画 | ハチクロの花火2>>

Utilities

おすすめ

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

広告

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