Infomation

使用上の注意

このテンプレはFC2ブログでのみ使用が出来ます。
著作権は放棄していませんので、常識の範囲でご利用ください。

禁止事項～絶対してはいけないこと

HTML、CSSのカスタマイズ。
（レイアウトが崩れるなどの理由で消したい部分がある場合は聞きに来て下さい。）
画像の加工。
再配布。
FC2の共有テンプレートに登録。
アダルト、商用、アフィリエイトブログでの使用。
著作権部分、FC2の広告部分の削除。

してもいいこと

HTML、CSSの書き足し。
Java Scriptの追加。
ブログタイトルテキストの画像差し替え（背景画像の差し替えは不可。）

使用方法

ブログのカスタマイズはIE系ブラウザ（IE、Sleipnir、Lunascapeなど）、もしくはFireFoxで行ってください。
その他のブラウザでコードのコピーや貼り付けをすると上手く表示出来ない場合があります。

ブログ管理画面の「テンプレートの設定」をクリック。
テンプレートの設定画面が開いたら、どれでもいいのでいらないテンプレートの「編集」を開く。
（いらないテンプレートがない場合は公式からでも抵当にダウンロードしてきて下さい。）
テンプレートの名前を使用するテンプレートのタイトル（例：cp_mb_0）にする。
HTML編集とCSS編集の部分を全て消す。
HTMLのコードをコピーして貼り付ける。
CSSのコードをコピーして貼り付ける。
プレビューで確認し、正しく表示されていたら更新ボタンを押して終わり。

コメントリストはブログ管理画面の環境設定 → ブログの設定 → 拡張表示設定の
コメントリスト<%topentry_comment_list>を「有効にする」にしてください。
ここが無効になっていると書き込まれたコメントが表示されません。

Template #1

Template cp_mb_0

マビノギの公式風テンプレート。
2007.10.31

Template #2

Template cp_xmas_0

クリスマス用テンプレート。
2007.11.18

Template #3

Template cp_winter_0

冬テンプレート。
2007.12.26

Template #4

Template cp_ny_0

和風テンプレート。
2007.12.26

Template #5

Template cp_vt_0

バレンタインテンプレート。
2008.01.18

Template #6

Template cp_haru_0

春のテンプレート。
２カラムと３カラムがあります。
2008.03.16

Template #7

Template cp_color_0

蛍光色をカコよく使ったテンプレート。
３カラムのみ。シンプルタイプもあります。
※カスタマイズ向けカテゴリ対応済み。
2008.06.20

PIYO Plugin CSS

What's "PIYO Plugin CSS"?

「FC2ミニブログPIYO」をブログに表示する際のCSSです。

FC2PIYO　

Agreement for Use

著作権は放棄していません。
こちらのリンクは貼っても貼らなくてもどちらでも構いません。（貼ってもらえると嬉しいですけど。）
自分が作ったかのようになりすまして紹介記事を書いたり、再配布をするのだけは本気でヤメテクダサイ。

Customize Code

#1

公式のデフォルトＣＳＳ改良スクロール版

絵文字の中央表示と長いアドレスがはみ出してしまう部分を見えないようにしています。

a.nickname:link,a.nickname:visited { color:#339900;font-weight:bold;}

a.nickname:hover { color:#ffa500;}

div.tab{ 
	float:left;
	width:100%;
	font-size:93%;
	border-bottom:1px solid #f45551;
	line-height:normal;
	}

.b1{ background-image: none;}

.b2{ background-image: none;}

div.mylog { 
	width: 160px;
	padding: 5px;
	border: 1px solid #a5a5a5;
	font-size: small;
	text-align: left;
	color: #666666;
	background-color: #ffffff;
	overflow: hidden;/* 枠からはみ出る部分の非表示設定 */
	}

div.mylog img { vertical-align: middle;}/* 絵文字の位置を中央に設定 */

div.mylog p.title { 
	font-weight: bold;
	color: #838383;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	margin: 0 0 10px;
	padding: 0 0 3px;
}

div.mylog dl { 
	margin: 0;
	padding: 0;
	}

div.mylog dt.day { 
	width: 160px;
	color: #339900;
	font-size: x-small;
	margin: 0;
	padding: 0 0 5px;
	background-color: #ffffff;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog {
	margin: 0 0 5px;
	color: #333333;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	padding: 0 0 10px;
	}

div.license {
	font-size: x-small;
	text-align: right;
	}

公式のデフォルトＣＳＳ改良スクロール版

公式のデフォルトＣＳＳ改良版にスクロールを付けたものです。
プラグイン部分が長くなってしまうのを防ぐ為に表示の高さを固定したものです。

a.nickname:link,a.nickname:visited { color:#339900;font-weight:bold;}

a.nickname:hover { color:#ffa500;}

div.tab{
	float:left;
	width:100%;
	font-size:93%;
	border-bottom:1px solid #f45551;
	line-height:normal;
	}

.b1{ background-image: none;}

.b2{ background-image: none;}

div.mylog {
	width: 160px;
	height: 180px;/* 表示する高さ */
	padding: 5px;
	border: 1px solid #a5a5a5;
	font-size: small;
	text-align: left;
	color: #666666;
	background-color: #ffffff;
	overflow: auto;/* 枠からはみ出る部分の設定 */
	overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */
	scrollbar-3dlight-color: #a5a5a5;/* スクロールバーの配色 */
	scrollbar-arrow-color: #a5a5a5;
	scrollbar-darkshadow-color: #a5a5a5;
	scrollbar-face-color: #ffffff;
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #ffffff;
	scrollbar-track-color: #ffffff;
	}

div.mylog img { vertical-align: middle;}/* 絵文字の位置を中央に設定 */

div.mylog p.title { 
	font-weight: bold; 
	color: #838383; 
	border-bottom-width: 1px; 
	border-bottom-style: dashed; 
	border-bottom-color: #a5a5a5; 
	margin: 0 0 10px; 
	padding: 0 0 3px; 
	}

div.mylog dl { 
	margin: 0; 
	padding: 0; 
	}

div.mylog dt.day { 
	width: 160px; 
	color: #339900; 
	font-size: x-small; 
	margin: 0; 
	padding: 0 0 5px; 
	background-color: #ffffff; 
	background-image: none; 
	text-align: left; 
	}

div.mylog dd.piyolog { 
	margin: 0 0 5px; 
	color: #333333; 
	border-bottom-width: 1px; 
	border-bottom-style: dashed; 
	border-bottom-color: #a5a5a5; 
	padding: 0 0 10px; 
	}

div.license { 
	font-size: x-small; 
	text-align: right; 
}

#2

背景色なしフォント指定版

背景色を設定せずにどんなブログで浮かないシンプルなCSSです。
文字の大きさをpx指定しています。（ブラウザのテキストサイズに左右されません。）
文字の色も指定しています。

明るい背景用

a.nickname:link , a.nickname:visited {
	color: #4a4a4a;
	font-weight: bold;
	text-decoration: underline;
	}

a.nickname:hover {
	color: #848484;
	text-decoration: underline;
	}

div.tab{
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: normal;
	}

div.tab input {
	width: 49%;
	border-color: #a5a5a5;
	background: #ffffff;
	margin-bottom: 5px;
	color: #a5a5a5;
	}

.b1 {
	background-image: none;
	margin-right: 2px;
	}

.b2 { background-image: none;}
    
div.mylog {
	width: 95%;
	padding: 5px;
	font-size: 12px;
	text-align: left;
	color: #666666;
	overflow: hidden;
	}

div.mylog p.title {
	font-weight: bold;
	color: #4a4a4a;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A5A5A5;
	margin: 0 0 10px;
	padding: 0 0 3px;
	}

div.mylog img { vertical-align: middle;}

div.mylog dl {
	margin: 0;
	padding: 0;
	}

div.mylog dt.day {
	width: 160px;
	color: #555555;
	font-size: 12px;
	margin: 0;
	padding: 0 0 5px;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog {
	margin: 0 0 5px;
	color: #444444;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	padding: 0 0 10px;
	}

div.license {
	font-size: 12px;
	text-align: right;
}

明るい背景用スクロール版

a.nickname:link , a.nickname:visited { 
	color: #4a4a4a;
	font-weight: bold;
	text-decoration: underline;
	}

a.nickname:hover {
color: #848484;
text-decoration: underline;
	}

div.tab{ 
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: normal;
	}

div.tab input { 
	width: 49%;
	border-color: #a5a5a5;
	background: #ffffff;
	margin-bottom: 5px;
	color: #a5a5a5;
	}

.b1 { 
	background-image: none;
	margin-right: 2px;
	}

.b2 { background-image: none;}

div.mylog { 
	width: 95%;
	padding: 5px;
	font-size: 12px;
	text-align: left;
	color: #666666;
	height: 180px;
	overflow: auto;
	overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */ 
	scrollbar-3dlight-color: #a5a5a5;
	scrollbar-arrow-color: #a5a5a5;
	scrollbar-darkshadow-color: #a5a5a5;
	scrollbar-face-color: #ffffff;
	scrollbar-highlight-color: #ffffff;
	scrollbar-shadow-color: #ffffff;
	scrollbar-track-color: #ffffff;
	}

div.mylog p.title { 
	font-weight: bold;
	color: #4a4a4a;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A5A5A5;
	margin: 0 0 10px;
	padding: 0 0 3px;
	}

div.mylog img { vertical-align: middle;}

div.mylog dl { 
	margin: 0;
	padding: 0;
	}

div.mylog dt.day { 
	width: 160px;
	color: #555555;
	font-size: 12px;
	margin: 0;
	padding: 0 0 5px;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog { 
	margin: 0 0 5px;
	color: #444444;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	padding: 0 0 10px;
	}

div.license { 
	font-size: 12px; 
	text-align: right; 
	}

暗い背景用

a.nickname:link , a.nickname:visited {
	color: #848484;
	font-weight: bold;
	text-decoration: underline;
	}

a.nickname:hover {
	color: #d8d8d8;
	text-decoration: underline;
	}

div.tab {
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: normal;
	}

div.tab input {
	width: 49%;
	border-color: #848484;
	background: #4a4a4a;
	margin-bottom: 5px;
	color: #848484;
	}

.b1 {
	background-image: none;
	margin-right: 2px;
	}

.b2 { background-image: none;}
    
div.mylog {
	width: 95%;
	padding: 5px;
	font-size: 12px;
	text-align: left;
	color: #a9a9a9;
	overflow: hidden;
	}

div.mylog p.title {
	font-weight: bold;
	color: #848484;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	margin: 0 0 10px;
	padding: 0 0 3px;
	}

div.mylog img { vertical-align: middle;}

div.mylog dl {
	margin: 0;
	padding: 0;
	}

div.mylog dt.day {
	width: 160px;
	color: #7d7d7d;
	font-size: 12px;
	margin: 0;
	padding: 0 0 5px;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog {
	margin: 0 0 5px;
	color: #a9a9a9;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	padding: 0 0 10px;
	}

div.license {
	font-size: 12px;
	text-align: right;
	}

暗い背景用スクロール版

a.nickname:link , a.nickname:visited { 
	color: #848484;
	font-weight: bold;
	text-decoration: underline;
	}

a.nickname:hover { 
	color: #d8d8d8;
	text-decoration: underline;
	}

div.tab { 
	float: left;
	width: 100%;
	font-size: 12px;
	line-height: normal;
	}

div.tab input { 
	width: 49%;
	border-color: #848484;
	background: #4a4a4a;
	margin-bottom: 5px;
	color: #848484;
	}

.b1 { 
	background-image: none;
	margin-right: 2px;
	}

.b2 { background-image: none;}

div.mylog { 
	width: 95%;
	padding: 5px;
	font-size: 12px;
	text-align: left;
	color: #a9a9a9; 
	height: 180px;
	overflow: auto;
	overflow-x: hidden;/* 横方向スクロールバー非表示設定(IEのみ) */
	scrollbar-3dlight-color: #4a4a4a;
	scrollbar-arrow-color: #4a4a4a;
	scrollbar-darkshadow-color: #4a4a4a;
	scrollbar-face-color: #848484;
	scrollbar-highlight-color: #848484;
	scrollbar-shadow-color: #848484;
	scrollbar-track-color: #848484;
	}

div.mylog p.title { 
	font-weight: bold;
	color: #848484;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	margin: 0 0 10px;
	padding: 0 0 3px;
	}

div.mylog img { vertical-align: middle;}

div.mylog dl { 
	margin: 0;
	padding: 0;
	}

div.mylog dt.day { 
	width: 160px;
	color: #7d7d7d;
	font-size: 12px;
	margin: 0;
	padding: 0 0 5px;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog { 
	margin: 0 0 5px;
	color: #a9a9a9;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #a5a5a5;
	padding: 0 0 10px;
	}

div.license {
	font-size: 12px;
	text-align: right;
	}

#3

吹き出し版

「CSS Speech Bubbles」を参考にして作った吹き出しタイプのCSS。
※１）三角部分は画像なので、この画像を持って帰って、自分のブログにアップロードし、
「http://castleofpeach.blog57.fc2.com/file/tip.gif」の
「http://castleofpeach.blog57.fc2.com」部分を
自分のブログアドレスに書き換えて使ってください。
このまま使っても問題はないですが、うちのブログ鯖に不具合が起きると
三角部分だけ消えてしまうことがあるかもしれないです。

a.nickname:link , a.nickname:visited {
	color: #339900;
	font-weight: bold;
	}

a.nickname:hover { color: #ffa500;}

div.tab{
	float: left;
	width: 100%;
	font-size: 12px;/* 文字サイズ12pxに指定 */
	line-height: normal;
	}

.b1 {
	background-image: none;
	margin-right: 2px;/* タブの右側を2px開く設定 */
	}

.b2 { background-image: none;}

/* タブの装飾（いらなければ消す部分）ここから */
div.tab input {
	width: 42%;/* タブを両方同じ大きさに */
	border-color: #a5a5a5;/* タブを両方同じ大きさに */
	background: #ffffff;/* タブの背景色 */
	margin-bottom: 5px;/* 下のスペース */
	color: #a5a5a5;/* タブの文字の色 */
	}
/* タブの装飾（いらなければ消す部分）ここまで */

div.mylog {
	width: 95%;/* PIYOログ全体の幅 */
	padding: 5px;
	font-size: 12px;/* 文字サイズ12pxに指定 */
	text-align: left;
	color: #666666;
	}

div.mylog p.title { display:none;} /* 「最近のPIYO」非表示 */

div.mylog dl {
	margin: 0;
	padding: 0;
	}

div.mylog dt.day {
	clear: both;/* フロートのクリア */
	width: 95%;/* 日付枠の幅（必ずdd.piyologの幅設定と同じである事） */
	color: #339900;
	font-size: 11px;/* 文字サイズ11pxに指定 */
	margin: 0;
	padding: 5px 5px 0;/* 枠と文字のスペース */
	border-top: 1px solid #c9c2c1;/* 枠の上部分の線 */
	border-left: 1px solid #c9c2c1;/* 枠の左部分の線 */
	border-right: 1px solid #c9c2c1;/* 枠の右部分の線 */
	background: #ffffff;
	text-align: left;
	}

div.mylog img { vertical-align: middle;} /* 絵文字の位置を中央に設定 */

div.mylog dd.piyolog {
	width: 95%;</font>/* ログ枠の幅（必ずdt.dayの幅設定と同じである事） */
	margin: 0;
	color: #333333;
	background-color: #ffffff;
	border-right: 1px solid #c9c2c1;/* 枠の右部分の線 */
	border-left: 1px solid #c9c2c1;/* 枠の左部分の線 */
	border-bottom: 1px solid #c9c2c1;/* 枠の下部分の線 */
	padding: 0 5px 5px;/* 枠と文字のスペース */
	overflow: hidden;/* 枠からはみ出る部分の非表示設定 */
	}

/* ログのリンク色設定（いらない場合は消す部分）ここから */
div.mylog dd.piyolog a:hover,div.mylog dd.piyolog  a:active {
	color: #8a8a8a;
	text-decoration: underline;
	}
/* ログのリンク色設定ここまで */

div#block { display: none;} /* 9月28日追記部分「ポップアップ:on/off」の部分を表示しないようにします。（常にONの状態になります。 */

/* 噴出しの三角部分（分からない人はそのままコピーでおｋ） */
div.license {
	font-size: 10px;/* 文字サイズ10pxに指定 */
	text-align: right;
	position: relative;
	width: 93%;
	margin: 0px;
	padding: 7px 0 0 15px;
	top: -1px;
	background: transparent url(http://castleofpeach.blog57.fc2.com/file/tip.gif) no-repeat 15px 0;/* ※１ */
	font-style: normal;
	}

etc

自分・PIYO友の切り替えタブの非表示

CSSから　div.tab {～～～～}　.b1 {～～～～} .b2{～～～～}　の部分を消して
div.tab, .b1, .b2 { display: none;}　を追加すればタブの部分が消えます。

PIYOログの表示件数変更方法

PIYOの設定で取得出来るタグを少しだけ変えるだけで簡単に出来ます。
タグの文字列の中に「limit」というのがあるのでそこを探します。
<script src='http://piyo.fc2.com/contents/bparts/?action=log～～略～～limit=1'>
見つけたらそこの数値を変えるだけ。

例）
１つにしたい場合　･･･　limit=1
２つにしたい場合　･･･　limit=2

公式のデフォルトＣＳＳ

公式のCSSそのまま。何も触ってないものです。

a.nickname:link,a.nickname:visited {
	color:#339900;
	font-weight:bold;
	}

a.nickname:hover {color:#ffa500;}

div.tab{
	float:left;
	width:100%;
	font-size:93%;
	border-bottom:1px solid #F45551;
	line-height:normal; 
	}

.b1{ background-image: none;}

.b2{ background-image: none;}

div.mylog {
	width: 160px;
	padding: 5px;
	border: 1px solid #A5A5A5;
	font-size: small;
	text-align: left;
	color: #666666;
	background-color: #FFFFFF;
	}

div.mylog p.title {
	font-weight: bold;
	color: #838383;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A5A5A5;
	margin: 0px 0px 10px;
	padding: 0px 0px 3px;
	}

div.mylog dl {
	margin: 0px;
	padding: 0px;
	}

div.mylog dt.day {
	width: 160px;
	color: #339900;
	font-size: x-small;
	margin: 0px;
	padding: 0px 0px 5px;
	background-color: #FFFFFF;
	background-image: none;
	text-align: left;
	}

div.mylog dd.piyolog {
	margin: 0px 0px 5px;
	color: #333333;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #A5A5A5;
	padding: 0px 0px 10px;
	}

div.license {
	font-size: x-small;
	text-align: right;
	}

Castle of Peach - FC2 Blog template

Infomation

使用上の注意

禁止事項～絶対してはいけないこと

してもいいこと

使用方法

Template #1

Template cp_mb_0

Template #2

Template cp_xmas_0

Template #3

Template cp_winter_0

Template #4

Template cp_ny_0

Template #5

Template cp_vt_0

Template #6

Template cp_haru_0

Template #7

Template cp_color_0

PIYO Plugin CSS

What's "PIYO Plugin CSS"?

Agreement for Use

Customize Code

#1

公式のデフォルトＣＳＳ改良スクロール版

公式のデフォルトＣＳＳ改良スクロール版

#2

背景色なしフォント指定版

明るい背景用

明るい背景用スクロール版

暗い背景用

暗い背景用スクロール版

#3

吹き出し版

etc

自分・PIYO友の切り替えタブの非表示

PIYOログの表示件数変更方法

公式のデフォルトＣＳＳ