■新テンプレート配布開始。

と言っても以前のテンプレの改訂版ですが。
不具合の修正ついでに3カラム版も作成しました。

カスタマイズ方法はこちらです。

変更点はこれと言って無いですが、

・日付の部分から記事の編集画面へリンクしました。※ただしログイン後でないと編集画面に飛ばない模様。
・タグに対応しました。
・Operaでサイドバーのプルダウンリンクが機能するようになりました。
・画像を貼り付けると外枠が消えるバグにも対応…できたはず?

このくらいです。

今のところ黒と青と水色の2カラムまで公開されてるみたいです。
登録は全部終わっているので、
FC2側でのチェックが済み次第
順次公開されるのではないかと思われます。

改訂版が全て配布され始めたら古いテンプレートは削除していきます。

■simple_2、simple_3のカスタマイズ方法。

共有テンプレート、simple_2、simple_3の
ちょっとしたテンプレのカスタマイズ方法を載せていきます。

■背景色を変えたい場合。

↓スクロールバーの色

html {
scrollbar-track-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;

↓背景色

body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#666666;
font-size :10pt;
}

↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。

■文字色を変えたい場合。

body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#000000;
font-size :10pt;
}

textarea,input,select {
background-color :#FFFFFF;
font-size :10pt;
color :#000000;
border :1px #000000 solid;
}

↑赤字部分を好きな色のコードに変えてください。全部同じ色になるようにして下さい。

■リンク色を変えたい場合。

/* リンクの設定
------------------------------------------------------ */
a {
text-decoration:none;
color : #000000;
}

a:hover {
text-decoration:underline;
color : #000000;
}

↑赤字部分を好きな色のコードに変えてください。
a /リンクの色
a:hover /マウスを乗せたときのリンクの色

■ページの上下左右の余白の幅を変えたい、無くしたい場合。

body {
margin :15px;
background-color :#FFFFFF;
text-align :center;
color :#000000;
font-size :10pt;
}

↑赤字部分を書き換えてください。
余白を無くしたい場合は0pxにしてください。

■2カラム版の記事とサイドバーを左右入れ換えたい場合｡

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 445px;/* コンテンツ幅 */
}

/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}

↑の赤字部分を↓のように書き換えてください。

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : left;
width : 445px;/* コンテンツ幅 */
}

/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : right;
width : 190px;
}

↑このようにfloatのrightとleftを逆にしてください。

■2カラム版の記事の幅を変えたい場合。

↓コンテナの幅

------------------------------------------------------ */
div#container {
width : 650px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過（bodyで指定した値が有効になります） */
text-align : left;
}

↓本文の幅(3箇所とも同じ数値になるようにしてください。)

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 445px;/* コンテンツ幅 */
}

div.section{
margin-bottom :15px;
width : 445px;/* コンテンツ幅 */
border : 1px #000000 solid;
}

/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 445px;/* コンテンツ幅 */
margin-bottom :14px;
border : 1px #000000 solid;
}

↓サイドバーの幅

/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}

↑赤字部分を増やしたり減らしたりしてみてください。
本文部分とサイドバー部分の合計が、コンテナの幅以下になるようにして下さい。
本文部分+サイドバー部分+15=コンテナの幅
くらいが丁度よいかと思います。
元のテンプレだと、
本文445px + サイド190px + 余白15px = コンテナ650px
という感じです。

■3カラム版の記事の幅を変えたい場合。

3カラム版はちょっと面倒です。

↓コンテナの幅

/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : 850px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過（bodyで指定した値が有効になります） */
text-align : left;
}

↓本文と左サイドバーの幅

div#wrap {
float : left;
width : 645px;
}

↓本文の幅(3箇所とも同じ数値になるようにしてください。)

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
}

div.section{
margin-bottom :15px;
width : 440px;/* コンテンツ幅 */
background-color :#FFFFFF;
border : 1px #000000 solid;
}

/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 440px;/* コンテンツ幅 */
margin-bottom :14px;
border : 1px #000000 solid;
}

↓左サイドバーの幅

/* 左サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
}

↓右サイドバーの幅

/* 右サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column2 {
float : right;
width : 190px;
}

↑赤字部分を増やしたり減らしたりしてみてください。
本文部分ブロックと左右のサイドバーブロックの合計が、コンテナの幅以下になるようにして下さい。
左サイドバー+余白15px+本文部分+余白15px+右サイドバー=コンテナの幅
くらいが丁度よいかと思います。
この際、左サイドバー+余白15px+本文部分の幅を
#wrap部分に指定してください。
元のテンプレだと、
左サイド190px + 余白15px + 本文440px =#wrap 645px
#wrap 645px + 余白15px + 右サイド190px =コンテナ850px
となります。
…分かりにくいですね…。

■サイドバーが落ちる。

記事内の画像やテーブルが、下記のコンテンツ幅より大きかったり、
同じくサイドバー内の画像やテーブルが、
サイドバー幅より大きい場合に、サイドバーが落ちます。
ブログ自体の幅を広げる場合は、
上記の｢■記事の幅を変えたい場合。｣を参考にして下さい。
幅はそのままで、はみ出した部分を表示しないようにするには、
下記のよう追加してください。

2カラムの場合

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
overflow: hidden;
}

/* サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
overflow: hidden;
}

↑赤字部分を書き加えてください。

3カラムの場合

/* 本文部分の設定
------------------------------------------------------ */
div#primary-column {
float : right;
width : 440px;/* コンテンツ幅 */
overflow: hidden;
}

/* 左サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column {
float : left;
width : 190px;
overflow: hidden;
}

/* 右サイドバー部分の設定
------------------------------------------------------ */
div#secondary-column2 {
float : right;
width : 190px;
overflow: hidden;
}

↑赤字部分を書き加えてください。

■コンテナの背景色。

/* コンテナ部分の設定
------------------------------------------------------ */
div#container {
width : 850px;
margin-left : auto;/* 左側のマージンを自動計算 */
margin-right : auto;/* 右側のマージンを自動計算 */
background-color : transparent;/* 背景を透過（bodyで指定した値が有効になります） */
text-align : left;
}

↑赤字部分を好きな色のコードに変えてください。

■記事の背景色。

div.section{
margin-bottom :15px;
width : 440px;/* コンテンツ幅 */
background-color :#FFFFFF;
border : 1px #000000 solid;
}

#himitu {
background-color :#FFFFFF;
border :0px;
}

↑赤字部分を好きな色のコードに変えてください。

■サイドバーの背景色。

.plugin {
margin-bottom :15px;
background-color :#FFFFFF;
border : 1px #000000 solid;
}

↑赤字部分を好きな色のコードに変えてください。

■全記事一覧の背景色。

/* 全記事表示部分の設定
------------------------------------------------------ */
div#titlelist {
padding :10px;
width : 440px;/* コンテンツ幅 */
margin-bottom :14px;
background-color :#FFFFFF;
border : 1px #000000 solid;
}

↑赤字部分を好きな色のコードに変えてください。

■ベースカラーを好きな色に変えたい場合。

ブログタイトルの背景色、日付の背景色、記事の枠など、
ブログのベースカラーを丸ごと変えたい場合、
メモ帳などにスタイルシートをコピーして、
置換を使うと楽に出来ます。

置換する文字:ベースカラーのコード
置換後の文字:好きなカラーコード

↓ベースカラーはこの辺にあります。赤字部分がベースカラーです。
　(全部同じ色のはずなのでどれでもいいです。)

scrollbar-darkshadow-color:#000000;

/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
background-color:#000000;

div.entry-date{
padding :3px 5px;
background-color :#000000;
text-align : right;
font-weight :bold;
color :#FFFFFF;
}

■コメント、トラバ、アーカイブ等のタイトルの背景色。

/* コメント、トラックバックの設定
------------------------------------------------------- */
h3 {
margin-bottom:0px;
padding :3px 5px;
background-color :#000000;
border-bottom : 1px #000000 solid;
font-size :10pt;
font-weight :bold;
}

/* 検索、月別、カテゴリ別タイトルの設定
------------------------------------------------------ */
h5 {
margin-bottom:15px;
padding :3px 5px;
background-color :#000000;
border : 1px #000000 solid;
font-size :12pt;
font-weight :bold;
}

↑赤字部分を好きな色のコードに変えてください。

■タイトル部分の背景を画像にする場合。

例)タイトル部分に高さ250pxの背景画像を左上に固定して表示したい場合。

/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
background-color : #000000;
color : #FFFFFF;
}

↑の赤字部分を消して、
↓青、赤、緑、オレンジ部分を必要に応じて書き加えてください。

/* ヘッダー部分の設定
------------------------------------------------------ */
div#header {
margin-bottom:15px;
padding:20px;
height : 250px;
background : url("画像のURL") top left no-repeat;
color : #FFFFFF;
}

青字部分:高さの指定
画像に合わせて、タイトル部分の縦幅を変えたいときは
青字部分のheight(高さ)も追加してください。

赤字部分:画像の指定

緑字部分:表示位置の指定
繰り返し等の表示の指定例
★左上固定、繰り返し無し。
background : url("画像のURL") top left no-repeat;

★右下固定、繰り返しあり。
background : url("画像のURL") bottom right repeat;

★中央固定、横方向に繰り返し。
background : url("画像のURL") center repeat-x;

画像の配置は以下の要素を組み合わせて指定してください。
何も指定しない場合は左上から繰り返し表示になります。
top(上)
bottom(下)
center(中央)
right(右)
left(左)

repeat、もしくは指定無し(繰り返し)
no-repeat(繰り返し無し)
repeat-x(横方向に繰り返し)
repeat-y(縦方向に繰り返し)

オレンジ部分:文字色の指定

■フォームのカスタマイズ。

textarea,input,select {
background-color :#FFFFFF;
font-size :10pt;
color :#000000;
border :1px #000000 solid;
}

background-color : 背景色
color : 文字色
border : 枠線の太さ、色、種類

■追記部分を折りたたみにしたい場合。

思いつき次第増やしていきます。

■simple_2、simple_3の追記部分を折りたたみにする。

↓この共有プラグインを利用しました。
プラグインの折りたたみ

HTMLをカスタマイズしていない場合は、
simple_2をご利用の方はこちら
simple_3をご利用の方はこちら
を右クリックで｢対象をファイルに保存｣等でダウンロードしてパソコンに保存して、保存したファイルを開き、テンプレートのHTMLに上書きしてください。

HTMLをカスタマイズしている方は下記の部分だけ書きかえてください。

<head>〜</head>内に下記のスクリプトを書き加えてください。

<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>

↓<body>〜</body>内。

<!--more_link-->
<div class="entry-more"><a href="<%topentry_link>#more" title="「<%topentry_title>」の続きを読む">続きを読む >></a></div>
<!--/more_link-->

↑の部分を↓の様に書きかえてください。

<!--more_link-->
<div id="PlagOpen<%topentry_no>">
<div class="entry-more"><a href="#" title="続きを読む" onclick="showPlagin(<%topentry_no>);return false;">続きを読む▽</a></div></div>
<div id="PlagClose<%topentry_no>" style="display: none">
<%topentry_more>
<div class="entry-more"><a href="#" title="続きを閉じる" onclick="showPlagin(<%topentry_no>);return false;">続きを閉じる△</a></div></div>
<!--/more_link-->

※更に個別記事も折りたたみにしたい場合は

<!--more-->
<br id="more"><%topentry_more>
<!--/more-->

↑の部分も↓の様に書きかえてください。

<!--more-->
<div id="PlagOpen<%topentry_no>">
<div class="entry-more"><a href="#" title="続きを読む" onclick="showPlagin(<%topentry_no>);return false;">続きを読む▽</a></div></div>
<div id="PlagClose<%topentry_no>" style="display: none">
<%topentry_more>
<div class="entry-more"><a href="#" title="続きを閉じる" onclick="showPlagin(<%topentry_no>);return false;">続きを閉じる△</a></div></div>
<!--/more-->

続きを読む >>