上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 今回は3FaithBlackの色調を一括で変更する方法を紹介します。
 黒に近いグレーをほとんどの部分に適応しているので、「ノートパッド」などの、テキスト編集ソフトを利用します。

3FaithBlack・色のカスタマイズ




一括編集



色を決める

 まず最初に、変えたいカラーコードを決定します。カラーコードに関しての詳細説明はこちらから。
RGBカラー・色の基本 | スタンダード・デザインラボ



ノートパッドにCSSをコピペ

 色が決まったら、ノートパッドなどの「文字の置き換えツール」がついたソフトを立ち上げて、3FaithBlackの「スタールシート(以降CSS)」を全文コピペします。

ノートパッドの置き換えツール

 そして、上図のように「置き換えツール」を立ち上げ、

「#555」→「好きなカラーコード」

 このように、文字を一括置き換えします。
 その後、置き換えが終わった文書を、全文「FC2管理画面・スタイルシートの編集ボックス」へコピペして戻せば…
 プレビューすると、テンプレートが好きな色に変わっていることが分かると思います。





文字色の修正



 後は、細かい部分の修正を行っていきます。
 例えば、文字色も一括で変わってしまうので、これらを修正していきます。以下から必要な部分を探してみて下さい。
 変更する場所を探すには、「Ctrl」+「F」で、画面内検索を使うのが効果的。



検索ボックスなどのテキストエリア全体の文字色

input,textarea{
color:#555;
}



全体的なリンク色

/* デフォルトのリンク設定
------------------------------------------------------------ */
a{
text-decoration:none;
}
a:link{
color:#788bfa; (基本のリンク色)
}
a:visited{
color:#787baa; (訪問済みリンク)
}
a:hover{
color:#69f; (マウスオーバー時のリンク)
}
a:active{
color:#f55; (マウスクリック時のリンク)
}



全体的な文字色

body{
text-align:center;
background:#666 url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/3faith-black-001.gif") repeat;
color:#555;
}



ブログタイトルの文字色

#header h1 a{
color:#fff; (通常時)
border:none;
}
#header h1 a:hover{
color:#ccf; (マウスオーバー時)
}



ブログ概要文の文字色

.intro{
font-size:12px;
width:500px;
padding:10px;
color:#fff;
margin:10px 20px;
}



パンくずリスト文字色(リンク以外)

.pan_bar_left a{
color:#;
font-size:12px;
font-weight:bold;
}



ナビゲーションバー(カテゴリバー)文字色(リンク以外)

#navigation{
text-align:left;
margin:0 auto 1px;
background:#555;
padding:5px 1px;
color:#fff;
position:relative;
font-size:12px;
}



ナビゲーションバー(カテゴリバー)文字色(リンク)

#navigation a{
padding:2px 4px 2px 8px;
color:#fff; (通常)
}
#navigation a:hover{
background:#fff;
color:#000; (マウスオーバー時)
}



※子カテゴリバーの「背景色」

.cate_sub{
display:none;
background:#777;
position:absolute;top:24px;left:0px;
z-index:2;
padding:5px;
border-top:1px solid #fff;
border-left:10px double #fff;
}



----------

記事トップの大きな日付文字色

.title_date{
font-style:italic;
font-family:impact,arial black,sans-serif;
font-size:60px;
font-weight:bold;
color:#eef;
}



記事トップ・カテゴリの文字色

.title_category h2 a{
color:#555; (通常時)
}
.title_category h2 a:hover{
color:#ccf; (マウスオーバー時)
}



記事トップ・エントリータイトルの文字色

.title_entry a{
color:#788bfa; (通常時)
}
.title_entry a:hover{
color:#ccf; (マウスオーバー時)
}



記事下・コメントやトラックバックへのリンク色

.text_footer a{
color:#555; (通常時)
}
.text_footer a:hpver{
color:# (マウスオーバー時)
}



-----------

コメント番号(大きな数字)文字色

.com_num{
font-style:italic;
font-family:impact,arial black,sans-serif;
font-size:100px;
font-weight:bold;
color:#f5f5f5;
position:absolute;top:-10px;
z-index:0;
}



サーチエリアの各記事概要文

.sub_title_entry{
padding:5px 20px;
background:#555;
color:#fff;
}



----------

サイドバーの全体的な文字色(リンク)

#side a,.left_box a{
color:#384bba; (通常時)
}
#side a:visited,.left_box a:visited{
color:#484b7a; (訪問済みリンク)
}
#side a:hover,.left_box a:hover{
color:#09f; (マウスオーバー時)
}



各プラグインタイトルの文字色

.plg_title{
padding:4px 15px;
font-weight:bold;
background:#555;
color:#fff;
font-size:12px;
margin:0 1px;

}



----------

フッター「コピーライト」文字色

address{
font-style:normal;
font-size:12px;
color:#fff;
}



※FC2ブログad

.fc2ad{
margin:0 auto;
text-align:left;
padding:3px 0px 5px;
font-size:11px;
font-family:arial;
color:#fff;
}
.fc2ad a,
.adrs a{
color:#dff;
}
.fc2ad a:hover,
.adrs a:hover{
text-decoration:underline;
}
.fc2ad #ad1,.fc2ad #ad2{
color:#fff;
}
※注意

 この部分は、FC2ブログの「ad」です。絶対に「見えなく」したり、「文字サイズを極端に小さく」したりしてはいけません。はっきり見えるようにカスタマイズしないと、突然ブログが消去されても文句は言えません。
 特に、「body」の色を変えたときは、注意して確認してください。
 FC2ブログの利用規約をきちんと確認しておいてください。



 全部をカスタマイズする必要はないと思います。ただ、ローコントラスト(非常に明るい色調)にしたときは、いろいろな場所で文字が見えなくなりますので、その時にはちょっと苦労するかも知れません。



■メニューに戻る
3FaithBlack徹底攻略・はじめに
このエントリーをはてなブックマークに追加
Wed.06.22.2011
Comment
120
記事のタイトルの背景に画像を指定したいのですが
どのようにすればいいのでしょうか?
宜しく御願いたします。

121
sakilab
http://designlabolatory.blog16.fc2.com/blog-entry-160.html

 こちらで背景画像の設定方法を解説しています。
 3faith-blackの場合は、デフォルトのヘッダーサイズは960 x 120px です。

Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。