小粋空間: テンプレートアーカイブ

Top ＞ FC2ブログ＞テンプレート [全て開く]

2011年12月 9日

FC2ブログテンプレートのtitle要素をカスタマイズする

December 9,2011 12:55 AM
Tag：[Customize, FC2]
Permalink

FC2ブログテンプレートのtitle要素をカスタマイズする方法を紹介します。

１．完成例

このカスタマイズを行うことで、次のように、ページ別に異なるタイトルを表示できるようになります。

トップページ（「FC2ブログ」がブログ名）

記事ページ（「てすと」が記事タイトル）

カテゴリーページ（「日記」がカテゴリ名）

月別ページ

検索結果ページ
<br />
検索結果ページ

タグ検索結果ページ

以下、テンプレートタグの基本も含め、カスタマイズ方法を解説します。サンプルのテンプレートタグだけ欲しい方は、４項に掲載したものをコピーしてください。

２．ブログ名を表示する

title要素にブログ名を表示するには、次のようにします。

<title><%blog_name></title>

<%blog_name>はブログ名を出力するテンプレートタグです。

３．ページ別に出力情報を変更する

２項の記述では、すべてのページでブログ名しか表示されないので、次のように変更することで、ページ別に出力情報を変えることができます。

<title><%sub_title> <%blog_name></title>

<%sub_title>タグはページに応じた内容を出力するテンプレートタグです。ページ別の出力内容は次のようになります。

ページ	出力内容
メインページ	（出力なし）
記事ページ	記事タイトル
カテゴリーページ	カテゴリー名
月別ページ	年月
検索結果ページ	検索キーワード
タグ検索結果ページ	タグ名

ただし<%sub_title>タグを使った場合、月別ページについては、例えば2011年12月のページは「201112」という風に表示されるので、見栄えがよくありません。

月別ページは、年を表示する<%now_year>タグと月を表示する<%now_month>タグを使って「2011年12月」と表示させる方がよさそうです。

この<%now_year>タグと<%now_month>タグを使うには「月別ページのときだけ」という条件分岐が必要になります。

また、記事ページのときにブログ名とのセパレータ文字「|」や「-」を使いたい場合もあると思います。このときも条件分岐が必要です。

条件分岐の方法は３項で解説します。

３．ページ別の出力情報を細かく制御する

２項の設定よりさらに細かい制御を行うには次のテンプレートタグを使用します。例えば先程の「月別ページのときだけ異なるタグを利用する」という場合は次のようにします。

<!--date_area--><%now_year>年<%now_month>月<!--/date_area-->
<!--date_area--><%sub_title><!--/date_area-->

～は、月別ページのときに囲った部分（上の例では「<%now_year>年<%now_month>月」を出力）を実行する役割があります。

また、～は、月別ページ以外のときに囲った部分（上の例では「<%sub_title>」を出力）を実行する役割があります。

各ページを判定するテンプレートタグは次のとおりです。

用途	テンプレートタグ
トップページで表示	<!--index_area-->～<!--/index_area-->
トップページ以外で表示	<!--not_index_area-->～<!--/not_index_area-->
記事ページで表示	<!--permanent_area-->～<!--/permanent_area-->
記事ページ以外で表示	<!--not_permanent_area-->～<!--/not_permanent_area-->
カテゴリーページで表示	<!--category_area-->～<!--/category_area-->
カテゴリーページ以外で表示	<!--not_category_area-->～<!--/not_category_area-->
月別ページで表示	<!--date_area-->～<!--/date_area-->
月別ページ以外で表示	<!--not_date_area-->～<!--/not_date_area-->
検索結果ページで表示	<!--search_area-->～<!--/search_area-->
検索結果ページ以外で表示	<!--not_search_area-->～<!--/not_search_area-->
タグ検索結果ページで表示	<!--tag_area-->～<!--/tag_area-->
タグ検索結果ページ以外で表示	<!--not_tag_area-->～<!--/not_tag_area-->

４．title出力用テンプレートタグ

３項までのテンプレートタグを使った、冒頭のtitle要素用のテンプレートタグです。このままコピペしてお使いください。

<title>
<!--permanent_area--><%sub_title><!--/permanent_area-->
<!--category_area--><%sub_title>カテゴリ<!--/category_area-->
<!--date_area--><%now_year>年<%now_month>月アーカイブ<!--/date_area-->
<!--search_area-->「<%sub_title>」の検索結果<!--/search_area-->
<!--tag_area-->タグ「<%sub_title>」の検索結果<!--/tag_area-->
<!--not_index_area--> - <!--/not_index_area--><%blog_name>
</title>

表示内容を変更したい場合は、３項のテンプレートタグ一覧と見比べながら該当箇所を適宜修正してください。

５．FC2ブログテンプレート

今回のカスタマイズは、当ブログで配布中の「FC2ブログテンプレート」にも反映しました。

Comments [0] | Trackbacks [0]

2011年2月21日

FC2ブログテンプレート修正（SEO対策版）

February 21,2011 12:35 AM
Tag：[FC2, Template]
Permalink

当ブログで配布中の FC2ブログテンプレートを修正しました。

１．改善点

(X)HTMLマークアップを見直し、本文が表示されるカラム（中央カラム）がサイドバーのカラム（左カラム）よりも先に出現するようにしました。例えば、3カラムレイアウトは次のように変更しています。

変更前の(X)HTMLマークアップ（抜粋）

<div id="links-left-box">左カラム</div>
<div id="content">中央カラム</div>
<div id="links-right-box">右カラム</div>

変更後の(X)HTMLマークアップ（抜粋）

<div id="content">中央カラム</div>
<div id="links-left-box">左カラム</div>
<div id="links-right-box">右カラム</div>

変更対象は以下の4つのレイアウトです（画像はMovable Typeのものを流用していますが対処は同じです）。

3カラムレイアウト

3カラムリキッドレイアウト

2カラムレイアウト（左サイドバー）

2カラムリキッドレイアウト（左サイドバー）

２．テンプレートのダウンロード

FC2ブログテンプレートは、下記のページからダウンロードしてください。

FC2ブログテンプレート

Comments [0] | Trackbacks [0]

2010年1月26日

FC2ブログテンプレート修正（フッタ付きリキッドレイアウト対応）

January 26,2010 2:34 AM
Tag：[FC2, Template]
Permalink

現在配布中の「FC2ブログテンプレート」に、フッタ付きリキッドレイアウトを追加しました。また、カラムレイアウトをこれまでより簡単に切り替えられるように改善しました。CSSのフォントサイズなども見直しました。

これまで配布していたテーマのリキッドレイアウトは、CSSレイアウトの構造上、背景つきのフッタを表示させると、フッタの表示がサイドバーに重なってしまうという欠点があったため、簡易なテキストのみをフッタとして中央カラムに表示していました。

今回、リキッドレイアウトについては、ネガティブマージンを利用したCSSレイアウトに変更したので、背景つきのフッタもサイドバーに重ならずに表示させることができると思います。

今回追加したリキッドレイアウトは以下の 3 種類です。いずれもフッターを表示します（画像はWordPressのものですが大体同じです）。

3カラムリキッド（左右サイドバー）

3カラムリキッド（右サイドバー）

なお、デフォルトはレイアウトは、次の3カラム固定レイアウトです。

テンプレートは「FC2ブログテンプレート」にあります。

Comments [0] | Trackbacks [0]

2008年7月16日

FC2 ブログテンプレート不具合のお知らせ

July 16,2008 12:03 AM
Tag：[FC2, Template]
Permalink

現在、当ブログで配布中の FC2 ブログテンプレートをご利用のサイトで、レイアウトが崩れるという事象が発生しています。

FC2 ブログテンプレートをご利用の皆様にはご迷惑をおかけ致して申し訳ございませんが、下記の内容をご覧になり、該当する場合は、３項の対処を行ってください。

１．事象

3カラム固定レイアウトの場合、IE6 で閲覧すると、右サイドバーが左側に折り返し、右サイドバー上部に「/for one column -->」という文字が表示されます。

右サイドバー

また、中央カラム下部の著作権表示のフォントサイズも大きく表示されます。

右サイドバー

２．原因

カラムレイアウトを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 c 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

この中に、FC2ブログへ広告を表示するための、ad2 という広告変数（赤色）を埋め込んでいます。この広告変数は規約上、FC2ブログテンプレートへ設定が必須ですが、この広告変数が展開されると、その中に次のような「即席PVカウンター」が出力されます。

<!-- 即席PVカウンター ここから -->
<script language="JavaScript" type="text/javascript" src="http://.../counter.php?id=30"></script><noscript><img src="http://.../counter_img.php?id=30"></noscript>
<!-- 即席PVカウンター ここまで -->

ここで使われている、コメント用のマークアップ  が、前述のマークアップ全体を括っているコメント用のマークアップ  と入れ子になってしまい、IE6では正しく表示できず、レイアウトが崩れてしまいます。

３．対策

２項に掲載した、テンプレートの中にある下記のマークアップを丸ごと削除してください。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 c 200x xxxxx. All Rights Reserved.</p>
</div>
/for one column -->

以上です。

コメントでご連絡くださった、Sea さん、秋日子さんに、この場をお借りしてお礼申し上げます。ありがとうございました。

Comments [0] | Trackbacks [0]

2008年1月21日

FC2ブログの個別記事ページで前後記事のリンクを表示する

January 21,2008 3:00 AM
Tag：[Customize, FC2, Template]
Permalink

FC2ブログテンプレートの個別記事ページに、前後記事のリンクを表示する方法です。

FC2ブログの前後記事リンク

配布中の「FC2ブログテンプレート」に、記事ページの前後記事リンクを表示するためのブロック変数および変数の設定がもれていましたので、本エントリーにて紹介致します。

方法は、下記の内容を、テンプレートで表示したい部分に貼り付ければ、冒頭のスクリーンショットのような前後記事へのリンクが表示されます。

<!--permanent_area-->
<p class="content-nav">
   <!--nextentry--><a href="<%nextentry_url>" title="前のページへ" id="nav_next" name="nav_next">&laquo;<%nextentry_title></a><!--/nextentry--> | <!--preventry--><a href="<%preventry_url>" title="次のページへ" id="nav_previous" name="nav_previous"><%preventry_title>&raquo;</a><!--/preventry-->
</p>
<!--/permanent_area-->

なお、FC2のテンプレートのこのブロック変数および変数のみ、「前」および「後」の表示が逆のようです。
過去のページに遷移する場合は、

<!--nextentry--><a href="<%nextentry_url>" title="前のページへ" id="nav_next" name="nav_next">&laquo;<%nextentry_title></a><!--/nextentry-->

新しいページに遷移する場合は、

<!--preventry--><a href="<%preventry_url>" title="次のページへ" id="nav_previous" name="nav_previous"><%preventry_title>&raquo;</a><!--/preventry-->

を使います。

Comments [2] | Trackbacks [0]

2007年4月 3日

中央カラムに「ニュース」「お知らせ」を表示する

April 3,2007 2:08 AM
Tag：[Customize, Template]
Permalink

公開テンプレートの中央カラムの先頭に「ニュース」「お知らせ」等の、エントリーとは別のちょっとした情報を表示させる方法です。ご質問を頂きましたので本エントリーにて紹介致します。

ここでは Movable Type をサンプルに説明していますが、公開テンプレートであればどれも大体同じカスタマイズで実現可能です。

１．テンプレートの修正

基本は下記のように、テンプレートの中にあるエントリー表示開始位置の少し前に、表示したい情報（青色）を埋め込みます。ここではエントリーと同じスタイルになるようにタイトルと本文を表示しています。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

追加部分全体を div 要素で括り、エントリーと同じ class="entry" を与えています。これで全体のスタイルがエントリーと同じものになります。

その下のタイトルは class="news-header" という新しい class 属性を与え、表示位置を整えています。また本文の p 要素にも class="news-content" を与えています。

２．スタイルシートの修正

下記の内容をスタイルシートに追加します。

.news-header {
    margin: 5px 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
}
.news-content {
    margin-top: 5px;
}

設定は以上です、あとは表示したいタイトルと本文をお好きな内容に書き換えてください。

ただしこの方法では、メインページやアーカイブページに同じ情報を表示したい場合、各テンプレート全てを修正する必要があります。次項ではもう少し変更時の手間が省ける方法を紹介します。

３．テンプレートモジュールにする

お知らせ部分を「テンプレートモジュール」として登録すれば、モジュールの中身を書き換えるだけで、他のテンプレートに同じ内容を反映させることができます。

３．１新しいテンプレートモジュールの作成

管理メニューより[テンプレート] - [モジュール] - [モジュールを新規作成] の順にクリックし、下記の内容を設定します。

テンプレート名：news
モジュールの内容：下記をコピー

<div class="entry">
<p class="news-header">●お知らせ</p>
<p class="news-content">ブログを始めました。よろしくお願い致します。</p>
</div>

３．２テンプレートの修正

テンプレートモジュールの内容を表示させたい位置に MTInclude タグを設定します。

　　　　：
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
 
<$MTInclude module="news"$>
 
<MTEntries>
<$MTEntryTrackbackData$>
 
<!-- エントリー日付開始 -->
<MTDateHeader>
<div class="date"><$MTEntryDate format="%x"$></div>
</MTDateHeader>
<!-- エントリー日付終了 -->
　　　　：

スタイルシートは２項の内容をそのままお使いください。

なおこの方法を利用した場合、テンプレートモジュールの内容を変更・保存しただけではメインページや他のアーカイブページに反映されません。
必ず再構築を実施してください。

Comments [10] | Trackbacks [2]

2006年12月 8日

FC2ブログテンプレート修正

December 8,2006 1:52 AM
Tag：[FC2, Information, Template]
Permalink

現在公開中のFC2ブログテンプレートに不具合がありましたので修正致しました。

不具合の内容は下記の通りです。

同一日に複数投稿がある場合、タイトル上部に表示される投稿日をひとつしか表示しないようにスクリプトで制御していますが、その制御が正常に行われていない
同一日に同じタイトルの投稿があった場合、後方のタイトルが表示されない

原因は、以前見出しレベル（hx 要素）の修正を行った際に、スクリプトの修正を行っていなかったためで、日付部分の見出しレベル（h2 → div に変更）をタイトル部分（h3 → h2 に変更）に移動したために上記の問題が発生します。

この不具合は、2006年8月13日以降に本サイトよりテンプレートをコピーしてご利用になっている場合に発生します。不具合が発生している場合、ご利用のHTMLテンプレートの後方にあるスクリプト（リスト1）を、リスト2の内容に変更してください。

参考までに、修正箇所を赤色（削除は消し線つき）、修正後（または追加）を青色で示しています。

リスト1　修正前

<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>

リスト2　修正後

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('div');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    if((elements[i].getAttribute('class') == 'date') ||
       (elements[i].getAttribute('className') == 'date')) {
        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>

以上です。

ご利用くださっている皆様にはご迷惑をおかけ致しまして申し訳ございません。この場をお借りしてお詫び申し上げます。

Comments [0] | Trackbacks [0]

2006年10月31日

公開テンプレートの背景色をCSSで変更する

October 31,2006 12:59 AM
Tag：[Color, CSS, Template]
Permalink

当サイトで配布しているテンプレート（3・2・1カラム固定レイアウトおよび1カラムリキッドレイアウト）の、ブログの左右および下部に表示されている背景の背景色を変更する方法です。

まずはサンプルをご覧ください。

変更前

変更後

以下、変更方法です。

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

リスト1.1に示すスタイルシートの赤色部分を変更します。この設定はスタイルシートの後方にあります。

リスト1.1 固定レイアウト（3カラム／2カラム／1カラム）の場合

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #36414d;
}

２．1カラムリキッドレイアウトの場合

リスト2.1に示すスタイルシートの赤色部分を変更します。１項と同様、この設定もスタイルシートの後方にあります。

リスト2.1 1カラムリキッドレイアウトの場合

body.layout-one-column-liquid {
    background: #36414d;
}

３．変更例：背景色をグレーに変更

冒頭のスクリーンショットの「変更後」の設定はリスト3.1のように変更しています。色はお好みに応じて変更してください。

リスト3.1 変更例

body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #dddddd;
}

カラーの指定方法は、例えば下記にあります。

eWeb：Web配色の見本：Webセーフカラー216色／カラーネーム一覧

その他、Google 等の検索エンジンで「Web」と「配色」「カラー」「カラーチャート」「RGB」等を組み合わせたキーワードで検索すると色々出てきます。

Comments [0] | Trackbacks [1]

2006年6月26日

サイドバーの折りたたみ

June 26,2006 2:02 AM
Tag：[Customize, JavaScript, Sidebar]
Permalink

マルチカラムレイアウトでサイドバーを丸ごと折りたたむカスタマイズを紹介します。動作は Windows XP+IE6.0/Firefox1.5/Opera8.0 で確認しています。
下記にサンプルを用意しましたのでお試しください。

サイドバーの折りたたみサンプル

タイトル下の両端にあるリンクをクリックすると、サイドバーの表示・非表示が切り替わります。また折りたたみ時にリンクの内容を変更することができます。サンプルは3カラムですが、2カラムレイアウトでの折りたたみも可能です。

１．動作条件

下記の条件で動作します。

cookieが有効であること
固定レイアウト（3カラムおよび2カラム）であること

また公開テンプレートで動作するように設定していますので、公開テンプレート以外でご利用になる場合はスクリプトを修正する必要があります。

２．機能概要

下記のような動作でサイドバーを折りたたみます。

折りたたみ用リンクをクリック
JavaScript起動
cookieより現在のレイアウト名を取得
クリックされたリンク位置（右または左）と現在のレイアウトを判定し、新しいレイアウトに変更
カラム幅がどのレイアウトでも同一になるように、レイアウトに応じて中央カラム幅を変更
変更したレイアウトに応じてクリックされたテキストリンクを変更
変更したレイアウト名をcookieに保持

３．ドネーション

カスタマイズ内容のご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
将来に向けてのご寄付（例：ドネーションによる機能追加や改善要望）は、それらが実現しない可能性があるため、ご遠慮ください。

現状のコンテンツで役立った
質問の回答で疑問や不具合が解消された
エントリーの修正等で要望内容が満たされた

等の後に判断して頂ければ結構です。
参考：Web投げ銭

上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

４．スクリプトのダウンロード・アップロード

下記のリンクより sidebarfolder.js をダウンロードし、ご利用のブログのディレクトリにアップロードしててください（ブログツール・ブログサービスによってアップロード先は若干異なります）。

sidebarfolder.js

なお、このスクリプトの先頭に使用するレイアウトを設定する行があります。

var layout = 'layout-three-column';

デフォルトは3カラムになっていますので、2カラムで利用する場合は下記のように変更してください。

2カラム（左サイドバー）

var layout = 'layout-two-column-left';

2カラム（右サイドバー）

var layout = 'layout-two-column-right';

５．テンプレートの修正（スクリプトのインクルード）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に下記を追加します。

Movable Type の場合

<script type="text/javascript" src="<$MTBlogURL$>sidebarfolder.js"></script>

Serene Bach の場合

<script type="text/javascript" src="{site_top}sidebarfolder.js"></script>

FC2ブログの場合

<script type="text/javascript" src="<%url>file/sidebarfolder.js"></script>

６．テンプレートの修正（折りたたみ用ナビゲーション追加）

６．１ 3カラムレイアウトの場合

　　　　：
<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
 
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>
 
<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　：

６．２ 2カラムレイアウト（左サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');">＜</a></li></ul>
</div>

６．３ 2カラムレイアウト（右サイドバー）

下記を追加してください（６．１の追加部分を変更）。

<div id="navi">
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">＞</a></li></ul>
</div>

７．テンプレートの修正（JavaScript 追加）

サイドバーの折りたたみを設定するテンプレートの <head> ? </head> の部分に、A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsの一部を追加します。すでにご利用になっている場合は不要です。

<script type="text/javascript">
<!--
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//-->
</script>

８．スタイルシート修正

スタイルシートに下記を追加します。

#navi {
    padding: 3px;
    border-bottom: 1px solid #666699;
    text-align:center;
    font-size: 12px;
}
#navi ul {
    margin: 0;
    padding: 0;
    display: inline;
}
#navi ul li {
    display: inline;
}
#leftmark {
    margin-right: 395px;
}
#rightmark {
    margin-left: 395px;
}

Comments [8] | Trackbacks [1]

2006年6月 9日

FC2ブログでのテンプレート設定方法

June 9,2006 1:55 AM
Tag：[FC2, Template]
Permalink

FC2ブログ登録方法の続きで、当サイトのテンプレートを設定する方法を紹介します。

FC2ブログに、登録したIDでログインしてください。ログイン後にスクリーンショットのような画面が表示されますので、左側のちょっと下にある「テンプレートの設定」をクリックします。

画面中央右にある「修正」をクリックします。

このようにテンプレート編集画面が表示されます。まず青枠で括っている「HTMLの編集 xxxxを編集しています。」の下のテキストエリアの内容を消去します。

Windows でテキストエリアの内容をまとめて削除するには、テキストエリアの任意の位置をクリックし、その状態で Ctrl+a をタイプ入力するか、マウスを右クリックして「すべてを選択」を選択します。選択できるとテキストが反転した状態になりますので、Delete キーを入力してください。

削除すると、このようにテキストエリアに何もない状態になります。

ブラウザをもうひとつ開いて、当サイトのFC2ブログテンプレートを開きます。この記事の下の方にテンプレートがあります。ここでは「HTML（通常カレンダー版）」の下にあるテキストエリアを選択状態にします（テキストエリアのどこかを右クリックするだけで全てが選択されます）。選択状態になったら、Ctrl+c またはテキストエリアのどこかにマウスがある状態で右クリックして「すべて選択」を選択します。これで新しいテンプレートがメモリに記憶された状態になりました。

FC2ブログのテンプレート編集画面を開いているブラウザに戻り、先ほど空にしたテキストエリアのどこかをクリックして、Ctrl+v または右クリックして「貼り付け」を選択します。これで新しいテンプレートがテキストエリアに設定されました。ついでにその上にある名称も「koikikukan」等に変更しておきます。これで上下いずれかの「更新」をクリックし、変更したテンプレートを保存します。

保存がOKであれば、左のようなメッセージが表示されます。

次はスタイルシートの変更を行います。前の画面で「編集」をクリックして、次のページをスクロール（下に移動）してスタイルシートのテキストエリアを表示します。

このテキストエリアも、前のHTMLと同様の手順で空っぽの状態にしてください。

もうひとつのブラウザで開いている、当サイトのFC2ブログテンプレートから「スタイルシート」の下にあるテキストエリアを選択状態にします（テキストエリアのどこかを右クリックするだけで全てが選択されます）。

空のテキストエリアに貼り付けて、保存をクリックします。

保存できたら左のようなメッセージが表示されます。ここまで終わったら、左メニューにある「ブログの確認」をクリックしてください。

当サイトのブログが表示されれば完成です。お疲れ様でした。

現在使っているデザインはそのままで、デザインをもうひとつ追加して、そこに当サイトのテンプレートを適用する場合は、「公式デザインから新しくダウンロードする」「共有デザインから新しくダウンロードする」のいずれかをクリックしてください。

任意のテンプレートを選んで右側の「このテンプレートを追加する」をクリックします。

これで新しいテンプレートが追加されますので、「修正」をクリックして先ほどと同じ手順でテンプレートを差し替えてください。テンプレートを差し替えた後、青枠にある「このテンプレートに変更」を必ずクリックしてからブログ画面を確認してください。

「FC2ブログの共有デザインに登録すれば？」というツッコミはなしで（笑）。

Comments [2] | Trackbacks [0]

2006年1月 6日

FC2ブログテンプレート

January 6,2006 11:58 PM
Tag：[Blog, FC2, Template]
Permalink

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

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

１．動作確認環境

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

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

２．利用規定

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

３．テンプレート

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

HTML

<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="generator" content="FC2 Blog" />
<meta name="author" content="<%author_name>" />

<link rel="stylesheet" href="<%css_link>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
<link rel="index" href="<%url>" />
<link rev="made" href="mailto:user@domain" />

<!--nextpage--><link rel="next" href="<%nextpage_url>" title="次ページ" /><!--/nextpage-->
<!--prevpage--><link rel="prev" href="<%prevpage_url>" title="前ページ" /><!--/prevpage-->

<title>
<!--permanent_area--><%sub_title><!--/permanent_area-->
<!--category_area--><%sub_title>カテゴリ<!--/category_area-->
<!--date_area--><%now_year>年<%now_month>月アーカイブ<!--/date_area-->
<!--search_area-->「<%sub_title>」の検索結果<!--/search_area-->
<!--tag_area-->タグ「<%sub_title>」の検索結果<!--/tag_area-->
<!--not_index_area--> - <!--/not_index_area--><%blog_name>
</title>

<script type="text/javascript">
function OpenComments (c) {
    window.open(c, 'comments', 'width=480,height=520,scrollbars=yes,status=yes');
}
function OpenTrackback (c) {
    window.open(c, 'trackback', 'width=480,height=520,scrollbars=yes,status=yes');
}
</script>

</head>

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

<div id="box" class="clearfix">

<!-- タイトル -->
<div id="banner">
<h1 id="banner-header"><a href="<%url>" accesskey="1"><%blog_name></a> <span style="font-size:12px; color:#ffffff;">by FC2 BLOG</span></h1>
<div id="banner-description"><%introduction></div>
</div>

<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">

<!--topentry-->

<!-- エントリー日付開始 -->
<div class="date"><%topentry_year>年<%topentry_month>月<%topentry_day>日</div>
<!-- エントリー日付終了 -->

<div class="entry">

   <!-- エントリータイトル -->
   <h2 id="a<%topentry_no>" class="entry-header"><%topentry_title></h2>

   <!-- エントリー -->
   <div class="entry-content">
      <div class="entry-body"><%topentry_body></div>

      <!-- 追記 -->
      <!--more_link-->
      <div class="entry-more">
         <a href="<%topentry_link>#more">続きを読む "<%topentry_title>"</a>
      </div>
      <!--/more_link-->
      <!--more-->
         <%topentry_more>
      <!--/more-->

      <!--community-->
      <p>スレッドテーマ:<a href="<%topentry_thread_link>" title="<%topentry_thread_title>へのリンク"><%topentry_thread_title></a>:<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>へのリンク"><%topentry_community_janrename></a></p>
      <!--/community-->

   </div><!-- /entry-content -->

   <!-- 投稿者情報開始 -->
   <div class="entry-footer">
Posted at <%topentry_hour>:<%topentry_minute>
 | Category : <a href="<%topentry_category_link>" title="<%topentry_category>のページへ"><%topentry_category></a>
 | <a class="permalink" href="<%topentry_link>" title="<%topentry_title>の個別ページへ">Permalink</a>
<!--allow_comment-->
 | <a href="<%topentry_link>#comments" title="comments<%topentry_no>">Comments</a> [<%topentry_comment_num>]
<!--/allow_comment-->
<!--allow_tb-->
 | <a href="<%topentry_link>#trackbacks" title="trackbacks<%topentry_no>">Trackbacks</a> [<%topentry_tb_num>]
<!--/allow_tb-->
   </div><!-- /entry-footer -->
   <!-- 投稿者情報終了 -->

   <!--
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
            xmlns:dc="http://purl.org/dc/elements/1.1/">
   <rdf:Description
       rdf:about="<%topentry_link>"
       trackback:ping="<%url>tb.php/<%topentry_tb_no>"
       dc:title="<%topentry_title>"
       dc:identifier="<%topentry_link>"
       dc:subject="<%topentry_category>"
       dc:description="<%topentry_discription>"
       dc:creator="<%author_name>"
       dc:date="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00" />
   </rdf:RDF>
   -->

</div><!-- /entry -->

<!--/topentry-->

<p class="content-nav">
   <!--prevpage--><a href="<%prevpage_url>" title="前のページへ" id="nav_previous" name="nav_previous">≪ </a><!--/prevpage-->
   <a href="<%url>" title="メインへ" id="nav_main" name="nav_main">メイン</a>
   <!--nextpage--><a href="<%nextpage_url>" title="次のページへ" id="nav_next" name="nav_next">≫</a><!--/nextpage-->
</p>

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

<div id="comments" class="comments">
   <div class="comments-content">
      <h3 class="comments-header">コメント</h3>

      <!-- コメントタイトル -->
      <!--comment-->
      <div class="comment" id="c<%comment_no>">

         <!-- コメント本文 -->
         <div class="comment-content">●<%comment_title><br /><%comment_body></div>

         <!-- コメント投稿者情報 -->
         <p class="comment-footer">
            Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
         </p>
      </div>
      <!--/comment-->

   </div>

   <!-- コメント投稿 -->
   <form method="post" action="./" name="comment_form">
   <input type="hidden" name="mode" value="regist">
   <input type="hidden" name="comment[no]" value="<%pno>">
   
   <!-- コメント投稿フォームタイトル -->
   <div class="comments-open" id="comments-open">
      <h3 class="comments-open-header">コメントする</h3>
      
      <div class="comments-open-content">

         <!-- コメント投稿フォーム開始 -->
         <div id="comments-open-data">
            <dl>
               <dt><label for="comment-author">名前:</label></dt>
               <dd class="clearfix"><input id="comment-author" name="comment[name]" tabindex="6" accesskey="n" size="20" value="<%cookie_name>" /></dd>
               <dt><label for="comment-title">タイトル:</label></dt>
               <dd class="clearfix"><input id="comment-title" name="comment[title]" tabindex="7" accesskey="t" size="30" value="" /></dd>
               <dt><label for="comment-email">メールアドレス:</label></dt>
               <dd class="clearfix"><input id="comment-email" name="comment[mail]" tabindex="8" accesskey="m" size="30" value="<%cookie_mail>" /></dd>
               <dt><label for="comment-url">URL:</label></dt>
               <dd class="clearfix"><input id="comment-url" name="comment[url]" tabindex="9" accesskey="u" size="30" value="<%cookie_url>" /></dd>
               <dt></dt><dd><script type="text/javascript" src="http://blog8.fc2.com/load.js"></script></dd>
               <dt><label for="comment">コメント:</label></dt>
               <dd class="clearfix"><textarea id="comment" name="comment[body]" tabindex="12" accesskey="c" rows="10" cols="30"></textarea></dd>
               <dt><label for="pass">パスワード:</label></dt>
               <dd class="clearfix"><input id="pass" type="password" name="comment[pass]" tabindex="10" size="20"></dd>
               <dt><label for="secret">Secret:</label></dt>
               <dd class="clearfix"><input id="secret" type="checkbox" name="comment[himitu]" tabindex="11">サイト管理者にのみ通知する</dd>
            </dl>
         </div>
         <div id="comments-open-footer" class="comments-open-footer">
            <input type="submit" tabindex="13" accesskey="s" name="post" id="comment-post" value="投稿" />
            <input type="reset" tabindex="14" value="クリア" />
         </div>
         <!-- コメント投稿フォーム終了 -->

      </div><!-- /comments-open-content -->
   </div><!-- /comments-open -->
   </form>

</div>
<!--/comment_area-->

<!-- コメント編集 -->
<!--edit_area-->

<div id="comments" class="comments">

   <!-- コメント編集 -->
   <form method="post" action="./" name="comment_form">
   <input type="hidden" name="mode" value="edit">
   <input type="hidden" name="mode2" value="edited">
   <input type="hidden" name="edit[rno]" value="<%eno>">
   
   <!-- コメント投稿フォームタイトル -->
   <div class="comments-open" id="comments-open">
      <h2 class="comments-open-header">コメントの編集</h2>
      
      <div class="comments-open-content">

         <!-- コメント投稿フォーム開始 -->
         <div id="comments-open-data">
            <dl>
               <dt><label for="comment-author">名前:</label></dt>
               <dd class="clearfix"><input id="comment-author" name="edit[name]" tabindex="6" accesskey="n" size="20" value="<%edit_name>" /></dd>
               <dt><label for="comment-title">タイトル:</label></dt>
               <dd class="clearfix"><input id="comment-title" name="edit[title]" tabindex="7" accesskey="t" size="30" value="<%edit_title>" /></dd>
               <dt><label for="comment-email">メールアドレス:</label></dt>
               <dd class="clearfix"><input id="comment-email" name="edit[mail]" tabindex="8" accesskey="m" size="30" value="<%edit_mail>" /></dd>
               <dt><label for="comment-url">URL:</label></dt>
               <dd class="clearfix"><input id="comment-url" name="edit[url]" tabindex="9" accesskey="u" size="30" value="<%edit_url>" /></dd>
               <dt></dt><dd><script type="text/javascript" src="http://blog8.fc2.com/load.js"></script></dd>
               <dt><label for="comment">コメント:</label></dt>
               <dd class="clearfix"><textarea id="comment" name="edit[body]" tabindex="12" accesskey="c" rows="10" cols="30"><%edit_body></textarea></dd>
               <dt><label for="pass">パスワード:</label></dt>
               <dd class="clearfix"><input id="pass" type="password" name="edit[pass]" tabindex="10" size="20"></dd>
               <dt><label for="secret">Secret:</label></dt>
               <dd class="clearfix"><input id="secret" type="checkbox" name="edit[himitu]" tabindex="11">サイト管理者にのみ通知する</dd>
            </dl>
         </div>
         <div id="comments-open-footer" class="comments-open-footer">
            <input type="submit" tabindex="13" accesskey="s" id="comment-post" value="変更" />
            <input type="submit" tabindex="13" accesskey="s" name="edit[delete]" id="comment-post" value="削除" />
            <input type="reset" tabindex="14" value="クリア" />
         </div>
         <!-- コメント編集フォーム終了 -->

      </div><!-- /comments-open-content -->
   </div><!-- /comments-open -->
   </form>

</div>
<!--/edit_area-->

<!--trackback_area-->
<div id="trackbacks" class="trackbacks">

   <!-- トラックバックURLタイトル -->
   <h3 id="trackback" class="trackbacks-header">トラックバックURL</h3>

   <!-- トラックバックURL -->
   <div id="trackbacks-info">
      <p><label class="techstuff" for="tb_url">このエントリーのトラックバックURL:</label><br />
         <input name="tb_url" id="tb_url" class="tb_url" value="<%trackback_url>" readonly="readonly" onfocus="this.select()" /></p>
   </div>

   <h3 class="trackbacks-header">トラックバック</h3>

   <!-- トラックバック -->
   <!--trackback-->

   <!-- トラックバックタイトル -->
   <div class="trackbacks-content">

      <!-- トラックバック本文 -->
      <div class="trackback" id="p<%tb_no>">
         <div class="trackback-content">
            <p>
               ≫ <a rel="nofollow" href="<%tb_url>"><%tb_title></a> from <%tb_blog_name><br />
               <%tb_excerpt> <a rel="nofollow" href="<%tb_url>">[Read More]</a>
            </p>
         </div>
         <p class="trackback-footer">
            Tracked on <%tb_year>.<%tb_month>.<%tb_day>
         </p>
      </div>
   </div>
   <!--/trackback-->
</div>
<!--/trackback_area-->

</div>
</div>
<!-- 中央カラム終了 -->

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">

<!-- カレンダー開始 -->
<div class="side">
<div class="calendar">
<table summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead">
<a href="<%prev_month_link>" title="<%prev_month>月のページへ"><</a> 
<%now_year>年<%now_month>月
 <a href="<%next_month_link>" title="<%next_month>月のページへ">></a>
</caption>
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>

<!--calender-->
<tr>
<td class="day"><%calender_sun></td>
<td class="day"><%calender_mon></td>
<td class="day"><%calender_tue></td>
<td class="day"><%calender_wed></td>
<td class="day"><%calender_thu></td>
<td class="day"><%calender_fri></td>
<td class="day"><%calender_sat></td>
</tr>
<!--/calender-->

</table>
</div>
</div>
<!-- カレンダー終了 -->

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 -->

<!-- 最近のコメント開始 -->
<div class="sidetitle">
Recent Comments
</div>

<div class="side">
<!--rcomment-->
<%rcomment_etitle><br />
└ <a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day><br />
<!--/rcomment-->
</div>
<!-- 最近のコメント終了 -->

<!-- 最近のトラックバック開始 -->
<div class="sidetitle">
Recent Trackbacks
</div>

<div class="side">
<!--rtrackback-->
<%rtrackback_etitle><br />
└ <a href="<%rtrackback_link>#p<%rtrackback_no>" title="<%rtrackback_excerpt>"><%rtrackback_title></a> <%rtrackback_blog_name> <%rtrackback_month>/<%rtrackback_day><br />
<!--/rtrackback-->
</div>
<!-- 最近のトラックバック終了 -->

<!--plugin-->
<!--plugin_first-->
<div class="sidetitle">
<%plugin_first_title>
</div>

<div class="side">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

</div>
</div>
<!-- 左カラム終了 -->

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">

<!-- 検索開始 -->
<div class="sidetitle">
Search this site
</div>
 
<div class="side">
<form  id="blog_search" name="blog_search" method="get" action="./index.php">
<input type="hidden" name="IncludeBlogs" value="" />
<!--<label for="search" accesskey="4">サイト内の検索</label><br />-->
<input id="search_text" type="text" name="q" size="20" value="" tabindex="4"  accesskey="t" /><br />
<input class="btn" type="submit" value="Search" tabindex="5" accesskey="s" />
</form>
</div>
<!-- 検索終了 -->

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>

<div class="side">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category-->
</ul>
</div>
<!-- カテゴリーリスト終了 -->

<!-- 月別アーカイブリスト開始 -->
<div class="sidetitle">
Monthly Archives
</div>

<div class="side">
<ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月</a> [<%archive_count>]</li>
<!--/archive-->
</ul>
</div>
<!-- 月別アーカイブリスト終了 -->

<!-- リンク開始 -->
<div class="sidetitle">
Links
</div>

<div class="side">
<ul>
<!--link-->
<li><a href="<%link_url>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<!-- リンク終了 -->

<!-- RSSフィード開始 -->
<div class="sidetitle">
RSS Feeds
</div>

<div class="side">
<ul>
<li><a href="<%url>?xml">Recent Entries</a></li>
<li><a href="<%url>?xml&comment">Recent Comments</a></li>
<li><a href="<%url>?xml&trackback">Recent Trackbacks</a></li>
</ul>
</div>
<!-- RSSフィード終了 -->

<!--plugin-->
<!--plugin_second-->
<div class="sidetitle">
<%plugin_second_title>
</div>

<div class="side">
<%plugin_second_content>
</div>
<!--/plugin_second-->
<!--/plugin-->

<div class="sidetitle">
Appendix
</div>
<div class="side">
<%ad><br />
<%ad2>
</div>

<!-- クレジットバナー -->
<div class="powered">
Powered by <a href="http://blog.fc2.com/">FC2 BLOG</a><br />
<a href="http://www.koikikukan.com/"><img src="http://blog-imgs-13.fc2.com/k/o/i/koikikukan/banner.gif" alt="小粋空間" width="128" height="22" /></a>
</div>

</div>
</div>
<!-- 右カラム終了 -->

</div>

<p id="footer">Copyright &copy; 20xx xxxxx by FC2 BLOG All Rights Reserved.</p>

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('div');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    if((elements[i].getAttribute('class') == 'date') ||
       (elements[i].getAttribute('className') == 'date')) {
        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>

</body>
</html>

スタイルシート

@charset "euc-jp";

/*
 * File      : style.css
 * Version   : 3.01
 * Update    :
 * 1.01 2006.02.04 change the 'comment-text' attribute name to 'comment' and add propaties.
 * 1.02 2006.02.26: delete font-weight property from all name selector and add h type selectors
 *                            and brought property for the title together.
 * 1.03 2006.08.13: change h tag level.
 * 2.00 2010.01.25: renewal.
 * 3.00 2011.02.21: for SEO.
 * 3.01 2011.03.01: fix bug for Google Chrome and IE6.
 *
 * Copyright (C) 2004-2011 www.koikikukan.com All rights reserved.
 */

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* リンク */
a,
a:link,
a:visited {
    color: #069;
    text-decoration: none;
}
a:hover {
    color: #069;
    text-decoration: underline;
}
a:active {}

/* リンクつき画像 */
a img {
    border: none;
}

/* 順序なしリスト */
ul {
}
ul li {
    padding-left: 10px;
    background: url(http://blog-imgs-13.fc2.com/k/o/i/koikikukan/lmark.gif) no-repeat 0px 0.4em;
    list-style-type: none;
}

/* 定義リスト */
dl {}
dt {}
dd {
    padding-left: 8px;
}

/* フォーム */
form {
    margin: 0px;
}
input {
    padding: 1px;
    font-size: 12px;
}

/* 引用 */
blockquote {
    width: auto;
    margin: 15px 20px 0 20px;
    padding: 10px;
    border: 1px solid #666;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 150%;
}
.quotetitle { /* 引用文タイトル */
    font-size: 10px;
    border-bottom: 1px solid #666;
    padding: 3px;
}

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}

#banner a,
#banner a:link,
#banner a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#banner a:hover {}
#banner a:active {}

/* タイトルバナー下の説明 */
#banner-description {
    color: #fff;
    font-size: 12px;
}

/* エントリー全体 */
.blog {
/*    padding: 10px;
    font-size: small;
    color: #36414d;
    background: none;*/
}

/* エントリー日付 */
.date {
    margin: 8px 0;
}

/* エントリー日付・コメントタイトル・トラックバックタイトルの配色 */
.date,
.trackbacks-header,
.comments-header,
.comments-open-header {
    padding-left: 8px;
    color: #fff;
    background: #8fabbe;
    font-size: 83.3%;
    font-weight: bold;
    line-height: 2.0;
}

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #fff;
    font-size: 83.3%;
    line-height:1.5;
    word-break: break-all;
}
.entry a:active {}
.entry img {
    margin-right: 8px;
    margin-bottom: 5px;
}

/* エントリーのテキストエリア可変長指定 */
.entry textarea {
    width: 97%;
}

/* 追記 */
.entry .extended {}

/* エントリータイトル */
.entry-header {
    margin: 15px 0 10px;
    padding-left: 5px;
    border-left: 3px solid #999;
    font-size: 100%;
    font-weight: bold;
}

/* エントリータイトルのリンク */
.entry-header a:link,
.entry-header a:visited,
.entry-header a:hover {
    color: #444;
    font-size: 12px;
    font-weight: bold;
}

/* 投稿者 */
.entry-footer {
    margin: 10px 0 0 0;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    font-size: 83.3%;
    text-align: right;
}

/* Typekeyコメンター画像 */
.commenter-profile img {
    vertical-align: middle;
    border-width: 0;
}

/* アーカイブページの前後リンク */
.content-nav {
    margin: 10px;
    text-align: center;
    font-size: 12px;
}

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    text-align: center;
    color: #444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444;
    border: 1px solid #444;
}
.red {
    color: #e50003;
}
.blue {
    color: blue;
}
.day2 {
    padding: 0px 2px;
    font-size: 10px;
    text-align: center;
    color: #444;
}

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    border: 1px solid  #666;
    color: #333;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #333;
    font-size: 75%;
    line-height: 1.5;
}

/* サイドメニュー(サブカテゴリー用) */
.side #categories ul {
    padding-left: 16px;
}
.side #categories ul ul {
    padding-left: 10px;
}
.side #categories li {
    list-style-type: circle;
}

/* カウンター */
.counter {
    margin: 8px 0 25px;
    padding: 2px;
    background: none;
    font-size: 9px;
}

/* RSSフィード */
.syndicate {
    margin-bottom: 5px;
    text-align: left;
    color: #666;
    font-size: 75%;
    line-height: 1.5;
}

/* クレジットバナー */
.powered {
    margin-top: 50px;
    text-align: left;
    color: #666;
    font-size: 75%;
    line-height: 1.5;
}
.powered img {
    margin-top: 3px;
}

.clear {
    clear: both;
}

/* コメント・トラックバック */
#comments-open-data p {
    margin-bottom: 10px;
}

#comment-post {
    font-weight: normal;
}

#comment-author, #comment-email, #comment-url, #comment-text {
    width: 220px;
}

/* 2006.02.04 id属性名変更(comment-text→comment) */
#comment {
    width: 266px;
}

#comment-bake-cookie {
    margin-left: 2px;
    vertical-align: middle;
}

#comments-open-footer {
    margin-top: 5px;
    text-align: center;
}

.trackbacks,
.comments {
    margin: 10px 5px;
}

.trackbacks-header,
.comments-header,
.comments-open-header {
    margin: 15px 0;
}

#trackbacks-info,
.trackback-content,
.comment-content,
.comments-open-content {
    margin: 0 2px;
    padding: 0;
    font-size: 83.3%;
    line-height: 1.5;
    word-break: break-all;
}

/* 2006.02.04 追加 */
.comment-content img {
    vertical-align: middle;
    padding:0 2px;
}

.trackback-content p,
.comment-content p {
    margin-top: 10px;
    margin-bottom: 5px;
}

.trackback-footer,
.comment-footer {
    margin-right: 2px;
    padding-top: 3px;
    border-top: 1px dotted #36414d;
    font-size: 66.6%;
    text-align: right;
}

.comments-open label {
    display: block;
}

.comments-head {
    font-size: 11px;
    color: #fff;
    background: #8fabbe;
    padding: 2px 0 2px 5px;
    margin: 15px 0;
}

#tb_url {
    width: 250px;
    _width: 270px;
}

#comments-open-data dl {}
#comments-open-data dt {
    float: left;
    width: 100px;
    padding: 5px 5px 5px 0;
    _padding: 5px 0 5px 0;
    text-align: right;
}
#comments-open-data dd {
    padding: 5px 0 5px 8px;
}

/* カラム切り替え */
body.layout-three-column,
body.layout-three-column-right,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    text-align: center;
    background: #36414d;
}
.layout-three-column #container,
.layout-three-column-right #container,
.layout-two-column-left #container,
.layout-two-column-right #container {
    margin-bottom: 10px;
}
.layout-one-column #container {
    margin-bottom: 0;
}

/* 固定レイアウト共通 */
.layout-three-column #box,
.layout-three-column-right #box,
.layout-two-column-left #box,
.layout-two-column-right #box,
.layout-one-column #box {
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    text-align: left;
    background-color: #fff;
}

/* 3カラム固定レイアウト幅 */
.layout-three-column-right #box,
.layout-three-column #box {
    width: 850px;
}

/* 2カラム固定レイアウト幅 */
.layout-two-column-left #box,
.layout-two-column-right #box {
    width: 665px;
}

/* 1カラム固定レイアウト幅 */
.layout-one-column #box {
    width: 478px;
}

/* 3カラム固定レイアウト */
.layout-three-column #content {
    float: left;
    width: 478px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}
.layout-three-column #content { /* for IE6 */
    width: 468px;
    margin-left: 95px;
}
html>body.layout-three-column #content {
    width: 478px;
    margin-left: 185px;
}
.layout-three-column #links-left-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-left-box { /* for IE6 */
    margin-left: -656px;
}
html>body.layout-three-column #links-left-box {
    margin-left: -665px;
}
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column #links-right-box { /* for IE6 */
    margin-left: 2px;
}
html>body.layout-three-column #links-right-box {
    margin-left: 0;
}

.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
}

/* 3カラム固定レイアウト（右サイドバー） */
.layout-three-column-right #content {
    float: left;
    width: 483px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
}
.layout-three-column-right #links-left-box {
    float: left;
    width: 180px;
}
.layout-three-column-right #links-right-box {
    float: left;
    width: 185px;
}
.layout-three-column-right #links-left {
    padding: 15px 5px 0 15px;
}
.layout-three-column-right #links-right {
    padding: 15px 15px 0 15px;
}

/* 2カラム固定レイアウト(右サイドバー) */
.layout-two-column-right #content {
    float: left;
    width: 478px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
}
.layout-two-column-right #links-right-box {
    float: left;
    width: 185px;
}
.layout-two-column-right #links-right {
    padding: 15px 15px 0;
}

/* 2カラム固定レイアウト(左サイドバー) */
.layout-two-column-left #content {
    float: left;
    width: 478px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
}
.layout-two-column-left #content { /* for IE6 */
    margin-left: 92px;
}
html>body.layout-two-column-left #content {
    margin-left: 185px;
}
.layout-two-column-left #links-left-box {
    float: left;
    width: 185px;
}
.layout-two-column-left #links-left-box { /* for IE6 */
    margin-left: -663px;
}
html>body.layout-two-column-left #links-left-box {
    margin-left: -665px;
}
.layout-two-column-left #links-left {
    padding: 15px 15px 0;
}

/* 1カラム固定レイアウト */
.layout-one-column #content {}

/* 3カラム固定レイアウト(ブログ記事全体) */
.layout-three-column-right .blog,
.layout-three-column .blog {
    padding: 10px 15px;
}

/* 2カラム固定レイアウト(左サイドバー:ブログ記事全体) */
.layout-two-column-left .blog {
    padding: 10px 15px;
}

/* 2カラム固定レイアウト(右サイドバー:ブログ記事全体) */
.layout-two-column-right .blog {
    padding: 10px 15px;
}

/* 1カラム固定レイアウト(ブログ記事全体) */
.layout-one-column .blog {
    padding: 10px 15px 0;
}

/* リキッドレイアウト共通 */
.layout-three-column-liquid #content,
.layout-three-column-liquid-right #content,
.layout-two-column-liquid-right #content,
.layout-two-column-liquid-left #content,
.layout-three-column-liquid #links-left-box,
.layout-three-column-liquid #links-right-box,
.layout-three-column-liquid-right #links-left-box,
.layout-three-column-liquid-right #links-right-box,
.layout-two-column-liquid-right #links-right-box,
.layout-two-column-liquid-left #links-left-box {
    position: relative;
    display: inline;
    float: left;
}
.layout-three-column-liquid .blog,
.layout-three-column-liquid-right .blog,
.layout-two-column-liquid-right .blog,
.layout-two-column-liquid-left .blog,
.layout-three-column-liquid #links-left,
.layout-three-column-liquid #links-right,
.layout-three-column-liquid-right #links-left,
.layout-three-column-liquid-right #links-right,
.layout-two-column-liquid-right #links-right,
.layout-two-column-liquid-left #links-left {
    position: static;
}
.layout-three-column-liquid #content,
.layout-three-column-liquid-right #content,
.layout-two-column-liquid-right #content,
.layout-two-column-liquid-left #content,
.layout-three-column-liquid #links-left,
.layout-three-column-liquid #links-right,
.layout-three-column-liquid-right #links-left,
.layout-three-column-liquid-right #links-right,
.layout-two-column-liquid-right #links-right,
.layout-two-column-liquid-left #links-left,
.layout-three-column-liquid .entry,
.layout-three-column-liquid-right .entry,
.layout-two-column-liquid-right .entry,
.layout-two-column-liquid-left .entry {
    overflow-x: hidden;
}

/* ネガティブマージンで選択やクリックできない不具合の対処 */
.layout-three-column-liquid #links-left {
    position: relative;
    z-index: 2;
}

/* 3カラムリキッド */
.layout-three-column-liquid #content {
    width: 100%;
    height: 100%; /* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-three-column-liquid .blog {
    margin: 0 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-three-column-liquid .blog {
    padding: 10px 15px;
}

/* 3カラムリキッド(右サイドバー) */
.layout-three-column-liquid-right #content {
    width: 100%;
    margin-right: -385px;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-three-column-liquid-right .blog {
    margin-right: 385px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-three-column-liquid-right .blog {
    padding: 10px 15px;
}

/* 2カラムリキッド(右サイドバー) */
.layout-two-column-liquid-right #content {
    width: 100%;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-two-column-liquid-right .blog {
    margin-right: 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-right: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-right .blog {
    padding: 10px 15px;
}

/* 2カラムリキッド(左サイドバー) */
.layout-two-column-liquid-left #content {
    width: 100%;
    /* height: 100%; *//* for IE6 リサイズで中央カラムが右寄りになるのを防止 */
}
.layout-two-column-liquid-left .blog {
    margin-left: 200px;
    padding: 18px 15px 10px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    height: 100%; /* for IE6 */
}
html>body.layout-two-column-liquid-left .blog {
    padding: 10px 15px;
}

/* for IE7 */
*:first-child+html .layout-three-column-liquid-right .blog,
*:first-child+html .layout-three-column-liquid .blog,
*:first-child+html .layout-two-column-liquid-right .blog,
*:first-child+html .layout-two-column-liquid-left .blog {
    padding-top: 18px;
}

/* リキッドレイアウト・サイドバー */
.layout-three-column-liquid #links-left-box {
    top: 15px;
    width: 200px;
    margin-left: -100%;
}
.layout-three-column-liquid-right #links-left-box {
    top: 15px;
    right: 0px;
    width: 185px;
}
.layout-three-column-liquid #links-right-box,
.layout-three-column-liquid-right #links-right-box,
.layout-two-column-liquid-right #links-right-box {
    top: 15px;
    width: 200px;
    margin-left: -200px;
}
.layout-two-column-liquid-left #links-left-box {
    top: 15px;
    width: 200px;
    margin-left: -100%;
}
.layout-three-column-liquid #links-left,
.layout-three-column-liquid #links-right,
.layout-two-column-liquid-right #links-right,
.layout-two-column-liquid-left #links-left {
    padding: 0 15px;
    height: 95%; /* for IE6 */
}
.layout-three-column-liquid-right #links-left {
    padding: 0 0 0 15px;
    height: 95%; /* for IE6 */
}
.layout-three-column-liquid-right #links-right {
    padding: 0 15px;
    height: 95%; /* for IE6 */
}

/* リキッドレイアウト・フッタ */
.layout-three-column-liquid #footer,
.layout-three-column-liquid-right #footer,
.layout-two-column-liquid-right #footer,
.layout-two-column-liquid-left #footer {
    margin-top: 25px;
    border-top: 1px solid #669;
    height: 60px;
    color: #fff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 5.0;
}
/* for IE7 */
*:first-child+html .layout-three-column-liquid #footer,
*:first-child+html .layout-three-column-liquid-right #footer,
*:first-child+html .layout-two-column-liquid-right #footer,
*:first-child+html .layout-two-column-liquid-left #footer {
    width: 100%; /* for IE7 フッタのレイアウト崩れを防止 */
}

/* 1カラムリキッド(ブログ記事全体) */
.layout-one-column-liquid .blog {
    padding: 15px;
}

/* 1カラムリキッド */
.layout-one-column-liquid #content {
    margin: 0 100px;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    background: #fff;
}
/* 1カラムリキッド */
/* タイトルバナー */
.layout-one-column-liquid #header {
    margin-right: 100px;
    margin-left : 100px;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
}

/* 1カラム用 */
body.layout-one-column-liquid {
    background: #36414d;
}

/* フッタ */
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    border-bottom: 1px solid #669;
    height: 42px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 3.5;
}
.layout-three-column #footer,
.layout-three-column-right #footer {
    width: 850px;
}
.layout-two-column-left #footer,
.layout-two-column-right #footer {
    width: 665px;
}
.layout-one-column #footer {
    width: 478px;
}
.layout-one-column-liquid #footer {
    margin-right: 100px;
    margin-left : 100px;
}

input,textarea {
    font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

４．カラムレイアウト変更方法

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

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">

3カラム

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

3カラム・リキッドレイアウト

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

2カラム（左サイドバー）

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

2カラム・リキッドレイアウト（左サイドバー）

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

2カラム（右サイドバー）

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

2カラム・リキッドレイアウト（右サイドバー）

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

1カラム

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

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

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ブログの広告とクレジットバナーがページの一番下に表示されます）。

６．記事の日付表示等について

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>

を削除してください。

７．XHTML1.0 Transitional valid

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

８．プラグインについて

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

９．その他

基本的な動作は確認したつもりですが、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 [234] | Trackbacks [11]

小粋空間 - a cheap joke and a play on words site

FC2ブログテンプレートのtitle要素をカスタマイズする

１．完成例

２．ブログ名を表示する

３．ページ別に出力情報を変更する

３．ページ別の出力情報を細かく制御する

４．title出力用テンプレートタグ

５．FC2ブログテンプレート

FC2ブログテンプレート修正（SEO対策版）

１．改善点

２．テンプレートのダウンロード

FC2ブログテンプレート修正（フッタ付きリキッドレイアウト対応）

FC2 ブログテンプレート不具合のお知らせ

１．事象

２．原因

３．対策

FC2ブログの個別記事ページで前後記事のリンクを表示する

中央カラムに「ニュース」「お知らせ」を表示する

１．テンプレートの修正

２．スタイルシートの修正

３．テンプレートモジュールにする

３．１ 新しいテンプレートモジュールの作成

３．２ テンプレートの修正

FC2ブログテンプレート修正

公開テンプレートの背景色をCSSで変更する

１．固定レイアウト（3カラム／2カラム／1カラム）の場合

２．1カラムリキッドレイアウトの場合

３．変更例：背景色をグレーに変更

サイドバーの折りたたみ

１．動作条件

２．機能概要

３．ドネーション

４．スクリプトのダウンロード・アップロード

2カラム（左サイドバー）

2カラム（右サイドバー）

５．テンプレートの修正（スクリプトのインクルード）

Movable Type の場合

Serene Bach の場合

FC2ブログの場合

６．テンプレートの修正（折りたたみ用ナビゲーション追加）

６．１ 3カラムレイアウトの場合

６．２ 2カラムレイアウト（左サイドバー）

６．３ 2カラムレイアウト（右サイドバー）

７．テンプレートの修正（JavaScript 追加）

８．スタイルシート修正

FC2ブログでのテンプレート設定方法

FC2ブログテンプレート

１．動作確認環境

２．利用規定

３．テンプレート

４．カラムレイアウト変更方法

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

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

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

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

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

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

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

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

５．1カラムレイアウトについて

６．記事の日付表示等について

７．XHTML1.0 Transitional valid

８．プラグインについて

９．その他

３．１新しいテンプレートモジュールの作成

３．２テンプレートの修正