fc2ブログ
2005/12/26 の記事
  

bizzare_columnと3color_columnの色カスタマイズ方法

bizzare_columnと3color_columnは同じテンプレートをベースとして
色違いで作られています
他の色を使ったものが欲しい
という要望がありましたので
以下に色を変更する方法を記載します

簡単なので自分の好きな色で様々なバリエーションを楽しんで見てくださいv

また色の組み合わせを考えるのが大変
という場合は「トリカラーパレット」というツールが大変便利です
ダウンロードはこちらから出来ます

変更する箇所は以下のbackground-color:の色指定の部分だけです
(赤で表示してあります)
簡単なので色を変えたい場合は一度ぜひチャレンジしてみてください)
CSSテキスト部分に以下のような場所がありますので探して変更願います

td#left-column1 {
background-color: #D24812;
padding-left : 5px;
padding-right: 2px;
}

td#left-column2 {
background-color: #EAE2B3;
padding-left : 20px;
}

td#left-column3 {
/*background-color: #E0E0C2;*/
background-color: #EAE2B3;
padding: 20px;
}

td#left-column1
はCALENDARや、RECENT ENTRIES、COMMENT、TRACKBACKなどが表示されている部分の色を指定します

td#left-column2
はtd#left-column1の左側に表示される飾り帯の色を指定します

td#left-column3
はコメントやトラックバックの内容を表示した時に現れる部分の色を指定します
(/*background-color: #E0E0C2;*/のように/**/で囲まれた部分はコメントアウトされているため
ブログの表示を確認した際にはその設定は反映されていません
私のCSSには時々こういったコメントアウトされた部分があるのですが
その際にはその部分の表記は無視してくださって結構です)

#header {
background-color: #A90505;
padding: 10px 20px;
border-bottom: 1px solid #A90505;
}

#header
はブログのタイトル部分の色を指定するところです

div#calendar {
margin-top: 2px;
background-color: #D24812;
}

div#calendar
のバックグラウンドの色はtd#left-column1の色と一緒にすると違和感なく表示されます

.comment-header {
/*background-color: #D7CD99;*/
background-color: #E59B1B;
padding-left: 2px;
padding-right: 2px;

}

.comment-footer {
background-color: #EAE2B3;
}

.trackback-header {
/*background-color: #D7CD99;*/
background-color: #E59B1B;
padding-left: 2px;
padding-right: 2px;
}

.trackback-footer{
background-color: #EAE2B3;
margin-bottom: 20px;
}

.comment-header、.comment-footer、.trackback-header、.trackback-footer
はtd#left-column3の色と同じにするか
.comment-header、.comment-footer
だけ少し違う色合いにするなど
自分で好きなようにアレンジしてみて下さい
スポンサーサイト



FF12 ジャッジ3人の情報+1月にさらに情報流出予定!!«  | HOME |  »FF12 ジャッジ3人の名前が判明!

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック

http://ff12expo.blog6.fc2.com/tb.php/1062-3c58f42d

 | HOME | 

FF12発売中
FF12関連ゲーム+音楽
発売中のお勧めゲーム
これから発売予定のお勧めゲーム
    とてもいい励みになっています!
    一日ワンクリックお願いします!↓
  • psBlogRanking.gif
今日: 昨日:
TOTAL:

RECENT ENTRIES

CATEGORIES

RECENT COMMENTS

【リンクについて】
このサイトはリンクフリーです

FF12 Expo お勧め


    Micro Button黒_logobmb




    アフィリエイトはここからスタート!LinkShare


APPENDIX

//-->
Powered by : Designed by ch*nu
当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。