FC2ブログのテンプレートを紹介しています

FC2ブログをやってみよう

FC2ブログはテンプレートを自由にカスタマイズ出来て、自分の思い通りのブログが作れます。


[ 2014/07/01 00:00 ] テンプレート | TB(0) | CM(1)

FC2ブログにてテンプレート配布中

当ブログのテンプレートをご使用されたい方は、

ブログ【FC2ブログ】の「ブログ管理画面」
     ↓
「テンプレートの設定」
     ↓
「共有テンプレート追加」
     ↓
名前検索で「gd」と検索してもらえば表示されます。


黒バージョンのテンプレートも配布しております。
[ 2010/01/01 00:00 ] テンプレート | TB(1) | CM(3)

テンプレートのカスタマイズ

当ブログのテンプレートは、カスタマイズが可能な【FC2ブログのテンプレート工房】さんが配布しているテンプレート(lightframe)を元に少しデザイン重視にカスタマイズしてみました。

初心者の方や、テンプレートをカスタマイズされる方は、以下のサイトを参考にしてみて下さい。

【FC2ブログのテンプレート工房】
【HTMLクイックリファレンス】
[ 2010/01/01 00:00 ] テンプレート | TB(0) | CM(0)

テンプレートの2カラム化

■左側をメニュー、右側を記事にする場合

【サンプルテンプレート】

1.【FC2 ブログのテンプレート工房】さんの記事を参考に設定して下さい。

2.このままではデザインが崩れるので少し修正します。

・スタイルシートの全体の値をcenter_leftの値より+12px以上に設定。

・スタイルシートのプラグイン2を以下のように設定。(赤字が変更箇所)

/*************************** ▼ 右側メニュー(プラグイン2) ▼ */
.plugin2_outline {
border-top: #e0e0e0 1px solid; /* 個別枠(上) */
border-right: #e0e0e0 1px solid; /* 個別枠(右) */
border-bottom:#e0e0e0 1px solid; /* 個別枠(下) */
border-left: #e0e0e0 1px solid; /* 個別枠(左) */
margin-bottom:10px; /* 次のプラグインまでの間隔 */
margin:0px 0px 10px 12px;
}



■ 右側をメニュー、左側を記事にする場合

【サンプルテンプレート】

1.【FC2 ブログのテンプレート工房】さんの記事を参考に設定して下さい。

2.このままではデザインが崩れるので少し修正します。

・スタイルシートのcenter_leftの値を中央の値より+12px以上に設定。
・全体の値を(center-left+右+10px)以上に設定。

・スタイルシートのプラグイン1を以下のように設定。(赤字が変更箇所)

/*************************** ▼ 左側メニュー(プラグイン1) ▼ */
.plugin1_outline {
border-top: #e0e0e0 1px solid; /* 個別枠(上) */
border-right: #e0e0e0 1px solid; /* 個別枠(右) */
border-bottom:#e0e0e0 1px solid; /* 個別枠(下) */
border-left: #e0e0e0 1px solid; /* 個別枠(左) */
margin-bottom:10px; /* 次のプラグインまでの間隔 */
margin:0px 12px 10px 0px;
}


[ 2009/12/12 12:12 ] テンプレート | TB(0) | CM(1)

テンプレートの色の変更

タイトルのグラデーション部分の色をブラックを含め全15色ご用意いたしました。

色の変更をされたい方は、↓にあるスタイルシートのコードをコピーして、テンプレートの設定からスタイルシート編集にあるスタイルシートのコードを全て削除して張り替えて下さい。

個別にタイトルの色を変更されたい方は、スタイルシート編集部分にある
http://blog-imgs-43.fc2.com/f/l/a/flashgameking/gd150.pngを↓にあるお好みのURLに張り替えて、枠の色など調整して下さい。
※間違えてサイド背景画像とヘッダー・フッター背景のURLを変更しないで下さい。


■シルバー(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ブルー(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ライトブルー(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■レッド(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ダークレッド(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ワインレッド(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■グリーン(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ライトグリーン(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■オレンジ(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ピンク(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■パープル(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ブラウン(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ゴールド(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード



■ダークイエロー(画像をクリックするとサンプルテンプレートが閲覧できます。)


スタイルシートコード


URL


枠の色のコード




[ 2009/11/11 11:11 ] テンプレート | TB(0) | CM(0)
Sponsored Link
カテゴリー