Top > CMS・ブログ > FC2ブログテンプレート > 2006年1月
2006年1月 6日

FC2ブログテンプレート

January 6,2006 11:58 PM
Tag:[, , ]
Permalink

FC2ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーの解説を参照ください。

FC2ブログ・3カラムテンプレート

FC2ブログではサービス内に「共有テンプレート」というコーナーがあり、そちらに数多くのテンプレートが登録されていますが、メンテナンスを考慮してとりあえずこのサイトでのみの公開とさせて頂きたいと思います。
FC2ブログの登録および当サイトの公開テンプレート設定方法については下記の記事を参考にしてください。

1.動作確認環境

動作確認は下記の環境で行っています。

  • OS:Windows2000/XP
  • ブラウザ:IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
  • FCブログ:http://koikikukan.blog42.fc2.com/

2.利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

3.テンプレート

以下の内容をコピーしてご利用ください。

HTML

スタイルシート

4.カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

  • 3カラム固定レイアウト
  • 3カラム固定レイアウト(右サイドバー)
  • 3カラムリキッドレイアウト
  • 2カラム固定レイアウト(右サイドバー)
  • 2カラム固定レイアウト(左サイドバー)
  • 2カラムリキッドレイアウト(右サイドバー)
  • 2カラムリキッドレイアウト(左サイドバー)
  • 1カラム固定レイアウト
  • 1カラムリキッドレイアウト

の計9種類を用意しています(それぞれのサンプルはちょっと下にある画像をご覧ください)。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます(カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します)。例えば、3カラムレイアウトから2カラム・リキッドレイアウト(右サイドバー)に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

FC2ブログ・3カラムテンプレート3カラム

<body class="layout-three-column-liquid">

FC2ブログ・3カラムテンプレート・リキッドレイアウト3カラム・リキッドレイアウト

<body class="layout-two-column-left">

FC2ブログ・2カラムテンプレート(左サイドバー)2カラム(左サイドバー)

<body class="layout-two-column-liquid-left">

FC2ブログ・2カラムテンプレート・リキッドレイアウト(左サイドバー)2カラム・リキッドレイアウト(左サイドバー)

<body class="layout-two-column-right">

FC2ブログ・2カラムテンプレート(右サイドバー)2カラム(右サイドバー)

<body class="layout-two-column-liquid-right">

FC2ブログ・2カラムテンプレート・リキッドレイアウト(右サイドバー)2カラム・リキッドレイアウト(右サイドバー)

<body class="layout-one-column">

FC2ブログ・1カラムテンプレート1カラム

<body class="layout-one-column-liquid">

FC2ブログ・1カラムテンプレート・リキッドレイアウト1カラム・リキッドレイアウト注:左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム(左サイドバー)に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
         :
 (ここに書かれているものをコピー)
         :
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている必要なメニュー(検索・カテゴリー・バナー等)をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
        :
    (ここにペースト)
        :
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
       :
<!-- 右カラム終了 -->

を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

5.1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています(言い換えると単にサイドバーをとっぱらっただけです)。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<div id="footer-one"><a href="http://www.koikikukan.com/"><img src="http://blog42.fc2.com/k/koikikukan/file/banner.gif" alt="小粋空間" width="128" height="22" /></a><br />
<%ad> | <%ad2><br />
<p style="margin:10px 0 0 0">Copyright © 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

の赤色部分を削除してください(これでFC2ブログの広告とクレジットバナーがページの一番下に表示されます)。

6.記事の日付表示等について

FC2ブログでは投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。また個別ページのトラックバックタイトルも同様の制御を行っています。
また複数記事が存在する場合のページ下のナビゲーションリンクについては、前後のリンクが存在しない場合は非表示にしています。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
elements = document.getElementsByTagName('h3');
work;
work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
if (document.getElementById('nav_previous') || 
    document.getElementById('nav_next')) {
    document.getElementById('nav_main').style.display = 'inline';
} else {
    document.getElementById('nav_main').style.display = 'none';
}
//-->
</script>

を削除してください。

7.XHTML1.0 Transitional valid

Valid XHTML 1.0 Transitional当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

8.プラグインについて

プラグインカテゴリー1を左カラム下に、プラグインカテゴリー2を右カラム下に配置しています。

9.その他

基本的な動作は確認したつもりですが、FC2ブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。

2006.02.04
投稿したコメントを編集できるように修正しました。またコメントで絵文字等の挿入ができなかった不具合を修正しました。

2006.02.26
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。

2006.08.13
テンプレートの見出しレベルを変更しました。

2006.08.26
コメントタイトル・トラックバックタイトルについて、JavaScript なしで複数表示されないように修正しました。

2006.12.08
見出しレベル変更により同じ日付が表示される不具合を修正しました。また見出しレベルを一部修正しました。

2010.01.26
テンプレートをリニューアルしました。

2010.08.03
リキッドレイアウトのスタイルが漏れていた不具合を修正しました。

2011.02.21
SEO対策版に変更しました。

2011.12.03
本文の構成を見直しました。また冒頭の画像を大きくしました。

2011.12.09
title要素の内容を見直しました。

Comments [238] | Trackbacks [11]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3