FC2ブログ用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーの解説を参照ください。
FC2ブログではサービス内に「共有テンプレート」というコーナーがあり、そちらに数多くのテンプレートが登録されていますが、メンテナンスを考慮してとりあえずこのサイトでのみの公開とさせて頂きたいと思います。
FC2ブログの登録および当サイトの公開テンプレート設定方法については下記の記事を参考にしてください。
動作確認は下記の環境で行っています。
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。
以下の内容をコピーしてご利用ください。
HTMLこのテンプレートではカラムレイアウトのバリエーションとして、
の計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 のものを流用しておりますので予めご了承ください。
 3カラム |
 3カラム・リキッドレイアウト |
 2カラム（左サイドバー） |
 2カラム・リキッドレイアウト（左サイドバー） |
 2カラム（右サイドバー） |
 2カラム・リキッドレイアウト（右サイドバー） |
 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カラムに変更される場合は左右両方のカラムをごっそり削除してください。
1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。
1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている
<!-- for one column
<div id="footer-one"><a href="https://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ブログの広告とクレジットバナーがページの一番下に表示されます）。
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>を削除してください。
プラグインカテゴリー1を左カラム下に、プラグインカテゴリー2を右カラム下に配置しています。
基本的な動作は確認したつもりですが、FC2ブログの機能を全て把握できていない状態ですので、不具合等ございましたらご連絡ください。
