FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

色を変える 

色を変える方法を紹介します。
スタイルシートの次の数値を変えると色が変わります。

/* 画面全体 */
body {

  background-color: #eeeeee; /* 画面背景の色 */

}

/* サイト全体 */
.base_table {

  background-color: #000000; /* 外枠の色 */

}

/* ヘッダーレイアウト */
#header {

  background: #000000; /* ヘッダー背景の色 */

}

/* サイトタイトル */
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {

  color: #ffffff; /* タイトルの色 */

}

/* サブタイトル(サイト説明) */
h2 {

 color: #ffffff; /* サブタイトルの色 */

}

/* メインボディ */
#main_body {

  background-color: #ffffff; /* ボディ背景の色 */

}

/* エントリー(記事)タイトル */
h3 a:link,h3 a:visited,h3 a:active,h3 a:hover{

  color: #000000; /* 記事タイトルの色 */

}
h3 {

  background: #ffffff; /* 記事タイトル背景の色 */

  border-left: #000000 10px solid; /* 飾りの色(左) */
  border-right: #000000 1px solid; /* 飾りの色(右) */
  border-bottom: #000000 1px solid; /* 飾りの色(下) */

}

/* エントリー(記事)スタイル */
.article {

  color: #000000; /* エントリー(記事)の文字の色 */

}

/* メニュータイトル */
.menu_title {

  color: #ffffff; /* メニュータイトルの色 */

  background: #000000; /* メニュータイトル背景 */

}

/* メニューコンテンツ */
.menu_cont {

  color: #000000; /* メニューコンテンツの文字の色 */

}

/* レフトカラム(左側メニューカラム)の外枠 */
.left_outline {

  border: 1px #000000 solid; /* レフトカラムの外枠の色 */

}

/* ライトカラム(右側メニューカラム)の外枠 */
.right_outline {

  border: 1px #000000 solid; /* ライトカラムの外枠の色 */

}

/* フッター */
#footer {

  background-color: #000000; /* フッターの背景の色 */

  color: #ffffff; /* フッターの文字の色 */

}

/* カレンダー */
.calender {
  color: #000000;

}

リリーステンプレートに定義していないのですが、もしフッターのリンクの色を変えたくなった場合は次をスタイルシートに加えてください。

#footer a{
  color: #ffffff; /* フッターのリンクの色 */
}

一部リリース時期によってクラス名、コメントアウトが違う場合があります。もし解からないところがあれば出来るだけサポート致しますのでブログURLと色を変えたいところを明示してお知らせください。

お好みの色にカスタマイズしてくださいね。
このコメントは管理人のみ閲覧できます
[ 2006/01/22 22:58 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/03/06 23:31 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/03/07 08:58 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/03/14 23:02 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/07/10 00:22 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/09/17 15:27 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2006/09/17 15:45 ] [ 編集 ]
はじめまして、いたお様。

つい先日、こちらのテンプレートを知り乗り換えさせて頂きました。字も画面も大きく、使い勝手が抜群です。愛犬家でもあり、月夜の咆哮が好きです。

実はカスタマイズ全くの初心者で、最初このテンプレを3カラムにするのに丸3日間かかったくらいです(笑)。1〜3可変とあったので、色々試した結果3カラムに偶然になり嬉しかったです^^。
さて質問なんですが、タイトルの色を変えたいのですが・・#000000;とかの番号は一体何色を示すのか、何色が何番なのか?もし簡単な早見表とかあれば教えて頂けないでしょうか
初歩レベルの質問で申し訳ありません。
[ 2006/09/19 21:10 ] [ 編集 ]
こんばんは、Rokujizouさん。
何気にしっかりカスタマイズされてますよ^^

色を設定するとき私はよくこちらにお世話になっています。
http://www.nazca.co.jp/main-data/chart.html
この他にもGoogleで「カラーチャート」と検索するとカラーコードを紹介したサイトが沢山でてきますよ。

字も画面も大きいですか?ちなみに私のテンプレート(standardシリーズ)は伸縮自在です。ブラウザの「表示」→「文字のサイズ」で大きさを切り替えられるので好きな大きさで見てください。

既にカラム数の変え方はご存知だと思いますが一応説明させてください。私のテンプレートはカテゴリー1を左側メニュー、2を右側メニュー、3を真ん中の一番上に設定しています。
カテゴリー2(右)を空にすれば左側メニューだけの2カラムにすることも可能です。もちろんその逆も可能ですし、極端な話1カラムにすることも可能です。

お好きなように配置して自分好みにカスタマイズしてくださいね。
[ 2006/09/19 23:58 ] [ 編集 ]
こんばんは〜、いたお先生!
昨日は、ご丁寧に有難うございました。
おかげでイメージに近い色に仕上がりました。

そして、タイトル中央寄せにも成功!ムズカッタ〜^^
サブタイトルはさらに右寄せ〜^^
ほんと気分良い〜!

そして、さらなる質問・・・
記事の字をまだ大きくするのには、その度に(大きな字)で書き込むのか、HTML編集でしてしまった方が良いのか、いかがなものでしょうか。
[ 2006/09/20 22:11 ] [ 編集 ]
こんばんは、Rokujizouさん。
カスタマイズを楽しんでもらえて私も嬉しいです^^

記事の字を大きくするにはスタイルシートを編集します。

/* エントリー(記事)スタイル */
.article {

/* ----------------------------------------------------- */
font-size: 80%; /* エントリー(記事)の文字の大きさ */
/* ----------------------------------------------------- */


この数値を変えてお好みの大きさにしてくださいね。
[ 2006/09/20 23:32 ] [ 編集 ]
はじめまして!
この度fc2に引越しをしようと思い、いたお様のlightframeテンプレを使わせて頂きカスタマイズ中です<(_ _)>
すごく分かり易い説明で初心者の私もどんどんカスタマイズが進んでいるのですが、1つ教えてください!
全体をグリーン系で作成してるのですが、サイドバーの文字がピンクから変更することができません。
どこを変更したらいいのか教えてください!
よろしくお願いしますm(__)m
[ 2006/10/28 01:56 ] [ 編集 ]
こんばんは、みゆみさん。
現状を確認したいのでFC2のブログURLを教えて頂けないでしょうか。宜しくお願い致します。
[ 2006/10/28 02:26 ] [ 編集 ]
いたお様
すみません!
FC2のリンクを貼ったつもりが現在のリンクを貼ってしまってました(>_<)
改めてfc2のリンクを貼りましたが、なんと自己解決しました!
リンクを貼ってるところがピンクだったのでLINKの部分の色を変更したら出来ましたヽ(^o^)丿
お騒がせしました<(_ _)>
完成まで、色々参考にさせて頂きます!
よろしくお願いいたします!!
[ 2006/10/28 03:52 ] [ 編集 ]
こんばんは、みゆみさん。
おめでとう御座います。自己解決されましたか。
ブログを拝見しました。素晴らしいカスタマイズですね。これでまだ作成中なのかな。記事に掲載されているカスタマイズ以外にも希望の機能があれば教えてください。可能な限り対応しますよ。
[ 2006/10/28 19:58 ] [ 編集 ]
初めまして。テンプレート工房の作品はカスタマイズし易く見た目が良くて非常に気に入っています。
題名の通り、[standard_skyblue]と同じように色の変更を行いたいと思っておりますが、どうしても上手くいきません。
アドバイス頂けないでしょうか?
宜しく御願い致します。
[ 2007/01/06 06:29 ] [ 編集 ]
テンプレートの編集画面→スタイルシートの編集の各項目の「色」のついた部分の数字を変えることで変更出来ますよ。

例:
/* 外側背景色 */
/* サイト背景色 */
▼ リンクの色と下線の有無 ▼ */

* ▼ ヘッダー ▼ */の
/* 外枠の色 */
/* 背景色 */
/* 内枠の色 */

のなどです。

いたお様>横レスすみませんm(__)m
[ 2007/01/06 14:46 ] [ 編集 ]
初めまして、トロさん。
ちゃんさんが説明されているとおり、スタイルシートに簡単な説明コメントを付けていますので大体の編集箇所は解かると思いますが、記事にも掲載しますのでもう少々お待ちくださいね。

説明有難う御座います。ちゃんさん^^
[ 2007/01/06 15:30 ] [ 編集 ]
ちゃんさんの編集箇所を参考に再チャレンジしてみます。
出来上がったら報告にきまーす。

説明ありがとうございました┏○ ペコッ
[ 2007/01/06 19:38 ] [ 編集 ]
イメージ通りに編集する事が出来ました。
ちゃんさん、いたお様、ありがとうございました。
[ 2007/01/06 22:56 ] [ 編集 ]
なんと、もうカスタマイズされたのですか。速いですね^^
たしかにこれはstandard_skyblueの感じがでてますね。「ブログではないサイト」に見せるカスタマイズもお見事ですよ。
[ 2007/01/07 00:26 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2007/01/20 22:32 ] [ 編集 ]
ご無沙汰しております。
その節は、お世話になりました↑。スタンダード・シリーズ「狼の月夜の咆哮」、大事に使わせてもらっています。

さて、先日急にマイブログへのコメントが反映されなくなりました。試しに、一時的にライトフレームにすると反映され、他のスタンダードだと反映されません。しかし、ライトに変えようとしたところ、どうしてもカラム2が右にいかずカラム1で引っ付き、型崩れがひどくなります。いろいろと試したのですが、無理でした。

そこで、とりあえず今のスタンダードのままでコメントが反映される方法はないものでしょうか。
トラバ・コメントの設定は、今まで通りです。

ライト・シリーズに変える力がつくまで、何卒ご指導宜しくお願いします。^^

[ 2007/02/10 12:57 ] [ 編集 ]
こんばんは、Rokujizouさん。
いつも愛用してくれて有難う御座います^^
左プラグインの『BGM』がタグ切れをおこしているようです。このプラグインを外してコメントが反映されるか試してみてくださいね。
[ 2007/02/11 00:46 ] [ 編集 ]
直りました〜^^ 有難うございます。
もう、尊敬〜! 一人で解決しようと悪戦苦闘でしたが、聞いてみるもんですねぇ。笑

それに、ライトフレームも型崩れせずに表示されます。v
いずれ近いうちに、ライトフレームをカスタマイズしてみたいと思います。

他のテンプレに変えずに、いたおさんのを引き続き使わせてもらうことが出来て嬉しく思います。
今後とも、宜しくお願いします。
取り急ぎ、御礼まで。
[ 2007/02/11 01:31 ] [ 編集 ]
こんばんは、Rokujizouさん。
直りましたか^^ おめでとうございます。
多少間違いがあっても表示が正しいように見えるテンプレートもありますが、私のテンプレートは小さな間違いでも表示に影響がでやすいほうです。どちらが良いかは一概には言えないですが。
引き続き私のテンプレートを使って頂けるなんて嬉しいです^^
またなんでも聞いてくださいね。
[ 2007/02/12 03:20 ] [ 編集 ]
背景を画像にしたんですがヘッターとメインボディに
色が付いているので背景の画像が見えない状態なんですが
色自体付けないで透明というか背景を透過させることって
可能なんでしょうか?
[ 2007/05/22 12:46 ] [ 編集 ]
可能ですよ。スタイルシートを編集してヘッダーやメインボディなどのbackground-colorで色を指定している行を削除してください。これで透過にできます。
[ 2007/05/23 01:47 ] [ 編集 ]
返答遅くなりましてすみません
カラーを指している行の削除で透過に出来ました
ありがとうございました
また分からないことあれば質問させて下さい
[ 2007/05/27 03:19 ] [ 編集 ]
私も解らないことがまだまだ多いのですが、解ることであればなんでも答えますのでまた質問してください。
[ 2007/05/27 23:00 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2007/06/22 19:11 ] [ 編集 ]
いつもお世話になってます。

standard_blueを愛用させていただいているのですが

背景色の変更において左右のカラムの中身だけに限定して背景色を変更する事は可能でしょうか・・?

お暇な時で構いませんので、よろしければご教授のほどお願いします!
[ 2007/07/16 23:06 ] [ 編集 ]
長い間、テンプレートを使用させていただいてます。
ありがとうございます・・・

FC2が新しくなったことにより、
投稿画像に枠がつくようになってしまいました。
(枠に色がつくようになってしまいました)
この設定をどこかで調節できるようでしたら、
教えていただけますでしょうか。
よろしくお願いいたします。
[ 2007/08/24 15:39 ] [ 編集 ]
FC2ブログ新管理画面公式発表に伴い、新管理画面での
不具合はリニューアル関連掲示板に投稿されています。

画像に枠がつくようになったことに関しても
リニューアル関連掲示板内にトピックがあります。

画像の周りに枠が表示されます
http://blog.fc2.com/forum/viewtopic.php?t=17732

>初期状態では現行と同様にし、
>環境設定のページで切り替えられるように改善致します


とのことですので、近い内にFC2で
対応がなされることと思います。

今、投稿画像に枠がついてしまうのに関しては
border="0"をつけて回避する方法が妥当かと。

<img src="画像のURL" border="0" />

※8月31日追記
FC2が対応をしてくれ、初期設定でborder="0"が入り、
環境設定でも変更が出来るようになりました。
[ 2007/08/24 19:22 ] [ 編集 ]
こちらのテンプレートを使わせていただいてからというもの、カスタマイズにはまってしまいました。新しいカスタマイズの記事が載るたびに試しています。

ところで便利ナビの“最新の記事”や“アーカイブ”と書かれる部分の前、あるいは後ろ、あるいは前後両方にアイコンを飾る方法がありましたら、お教えくださいませんか。white_eagleの場合、どうも便利ナビの部分が地味な印象になってしまうのです。
[ 2007/08/24 20:10 ] [ 編集 ]
「最新記事の便利ナビ」のことでいいんですよね?
それでしたら・・・

<!--▼最新記事ナビゲーション▼-->
<!--not_permanent_area-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_search_area-->
<!--not_titlelist_area-->
<!--index_area-->
<div class="menu_title"><img src="画像のURL" align=absmiddle />最新の記事</div>
<!--/index_area-->
<!--not_index_area-->
<div class="menu_title"><img src="画像のURL" align=absmiddle />アーカイブ</div>

赤色のように記述を加えると
タイトルの前にアイコンがつくと思います。

タイトルの後ろであれば青字の部分。
<div class="menu_title">最新の記事<img src="画像のURL" align=absmiddle /></div>

前後にということであれば、赤字と青字の両方を
記述すればよいのではないかと思います。
[ 2007/08/24 23:22 ] [ 編集 ]
かどりんさま、迅速かつ適切な解答をありがとうございました。解説が丁寧でわかりやすかったので、簡単に、失敗せずにカスタマイズができました。
[ 2007/08/25 18:55 ] [ 編集 ]
スタイルシート末尾に次の記述を加えてください。

/* ▼ レフトカラム(左側メニュー) ▼ */
.left_outline {
background: #cccccc;
}

/* ▼ ライトカラム(右側メニュー) ▼ */
.right_outline {
background: #cccccc;
}

色の数値はお好みのものを設定してください。
[ 2007/08/26 20:01 ] [ 編集 ]
> cheeseさん、かどりんさん
私が少し離れている間にFC2がリニューアルされているようですね^^;
FC2が環境設定で設定可能にしてくれるまでは、かどりんさんがおっしゃる通りborder="0"をつけて対応するしかなさそうですね。

> akiraさん、かどりんさん
akiraさん、かどりんさんのおかげで思い通りのカスタマイズができたようですね。
いつも有り難うございます、かどりんさん^^
[ 2007/08/26 20:08 ] [ 編集 ]
standard_orangeを使わせてもらっています。

簡単なことかもしれないんですが、コメントの文字色を変えたいんです。
タイトル文字はカラーなどで、コメント本文は黒にしたいんですがなかなかできません。

それと、同じコメントの部分なんですが、コメントを見やすくしようと思って、枠をつけるためここの記事を見て試したのですが、『コメントタイトル枠』のみ枠を付けようと文字色の設定をしたのに1つのコメント全部に枠が付いてしまいました・・・。
コメントのタイトル部分のみ枠をつけることはできないのでしょうか??
ちなみに、『コメント本文枠』には白を設定しました。

よろしかったら教えて下さい。お願いします。
[ 2007/10/25 01:52 ] [ 編集 ]
standard_orangeにはコメント各自(タイトル・本文)などには設定が施されていない様なので、自分設定しなければなりません。

適当にですが、例です。
まずはスタイルシートの一番下の方にでも下記の様な設定を加えます。

/*コメント設定*/
#comment-title {
color: #003399;/*コメントタイトルの色*/
padding: 3px;/*枠の中の余白設定*/
border: 1px solid #666; /*枠の設定*/
}

加えたらその後はHTMLの編集で
<!--▼コメント表示▼-->の中の
<%comment_title>の前に<div id="comment-title">を入れる

<div id="comment-title"><%comment_title></div>
こんな感じで

上記の様な形にすればコメントのタイトル部分だけに枠をいれて、タイトルの文字色も変えられると思います。
[ 2007/10/25 03:24 ] [ 編集 ]
通りすがりさんが教えてくれた通りにやったら、すぐにできました^^

分かりやすい説明のお陰で助かりました。
ありがとうございます。


あと、図々しいかもしれないのですが、もう一つ質問です。
コメントタイトルに枠を引いたのはいいのですが、タイトルと本文の間が詰まってしまい・・・少し間隔を開けたいのですが。
それと、タイトルは余白設定で左側に少しスペースを開けてから表示されるようになったのですが、本文はどうしても同じようにならず困ってます。
自分でも頑張って色々と試してはいるんですが分からなくて・・・。
テンプレートはstandardを使っていますが、コメント部分はlightframeのようにしたいんです。

質問ばかりですいませんが、よろしくお願いします。
[ 2007/10/26 02:54 ] [ 編集 ]
無事できた様で、良かったですね。
本文との間の取り方ですが、前回同様の作業でスタイルシートに設定を追加します。前回の下に追加しておけばいいかと思います。

#comment-body {
padding: 1px 2px 3px 4px;
}

paddingは上記の様にする事で余白の設定を個別に設定できますので自分の良い様に設定して下さい。
[1px] /*上の余白*/
[2px] /*右の余白*/
[3px] /*下の余白*/
[4px] /*左の余白*/
です。

スタイルシートに書き込んだら次にHTMLの編集で
<!--▼コメント表示▼-->の中の<%comment_body>を下記の様に囲って下さい。

<div id="comment-body"><%comment_body></div>
あとはpaddingの数値を変更して調整して下さい。
[ 2007/10/26 04:24 ] [ 編集 ]
FC2テンプレート工房をいつも使わせていただいてます。

質問なのですが、記事タイトルの文字色を白にしたいのですが、スタイルシートの記事欄に、【文字色】がありません・・・。
なので、自分なりに考えて、


.ently_title {

color:#ffffff; /* 文字色 (タイトル) */



と、入れてみたのですが変化がありません・・・。

URLはhttp://specialtools.blog42.fc2.com/です。
解決策ありますか??
教えてくださいm(_ _)m

[ 2008/01/16 19:22 ] [ 編集 ]
スタイルシートの以下の部分

/******************************************** ▼ 記事 ▼ */
 〜
/* ▽文字色とリンクの下線有無▽ */
h2 a:link { color:#555555; text-decoration:none; } /* 通常 */
h2 a:active { color:#555555; text-decoration:none; } /*実行中*/
h2 a:visited { color:#555555; text-decoration:none; } /*訪問済*/
h2 a:hover { color:#0000ff; text-decoration:none; } /*マウス*/
/* △文字色とリンクの下線有無△ */

ここで記事タイトルの色が変更できます。
白色にしたい場合だったらこんな感じで↓

h2 a:link { color:#ffffff; text-decoration:none; } /* 通常 */
[ 2008/01/17 16:29 ] [ 編集 ]
できました!
ありがとうございました。
[ 2008/01/17 18:03 ] [ 編集 ]
このコメントは管理人のみ閲覧できます
[ 2008/01/17 23:18 ] [ 編集 ]
はじめまして、質問なんですが
記事枠内と外の色を別々にしたいんですが
どうすればいいんでしょうか?
テンプレートはstandard_monotoneです
[ 2008/03/07 14:06 ] [ 編集 ]
「記事枠内」は「記事を書く部分」と言うことで良いでしょうか?

/* エントリー(記事)スタイル */部分を編集します。

.article {
/* - - - - - - - - - - */
color: #000000; /* エントリー(記事)の文字の色 */
background-color:#666666; /* 背景色 (記事本文) */

色文字を追加して下さい。

外側は、
▼▼ メインボディ(コンテンツ部) ▼▼ */
#main_body {
/* - - - - - - - - - - - */
background-color: #ffffff; /* ボディ背景の色 */

ここで変えられます。





[ 2008/03/08 10:27 ] [ 編集 ]
あ、できました。ありがとうございます
[ 2008/03/09 00:05 ] [ 編集 ]
いたおさん、お久し振りです。
相変わらず、スタンダード「月夜の咆哮」に愛着があり使っています。

さて、色とは関係ありませんが、検索や個別の記事で閲覧した際には「続きを読む」が消え、シームレスになりコメント欄も同じく表示されますよね?

これを「Home」から入った時と同じように、別々に「続きを読む」または「コメント」をクリックしない限り表示されないようにする方法はあるのでしょうか?
[ 2008/05/19 19:15 ] [ 編集 ]
お久しぶりです。Rokujizouさん^^
残念ながら今のところその方法はありません。
ご希望の添えず申しわけありません。
m(__)m
[ 2008/05/19 20:58 ] [ 編集 ]
それは残念。。。

ついでに質問です。
「Home」全体から入れば軽いのに、検索から及び記事を個別に閲覧すると、めっちゃ重くて表示されるのに時間がかかることが多いのは何故なんでしょうか?
[ 2008/05/20 12:39 ] [ 編集 ]
それはある特定のページが重いのでしょうか?
それとも同じページでも時間が違うと重いのでしょうか?
[ 2008/05/21 21:34 ] [ 編集 ]
初めまして。

記事枠や、プラグイン枠以外の色を変えようと思い挑戦したのですが、右プラグイン枠の下の部分の所が変化せず、線が出てしまいます。
この部分は、白くしたいのですが・・・
[ 2008/07/17 15:10 ] [ 編集 ]
twilightさん、こんにちは、初めまして。
いたおさんではないですが書き込ませていただきます。

もし私の解釈違いだったら申し訳ないのですが、質問されているのは「右プラグインの全体枠内に水色の背景が出てしまっているのを白くしたい」と言うことでしょうか?
それだったらCSSの.right_outlineのところにbackground-color: #ffffff;を記述でどうでしょうか。
もし見当違いだったらすみません。
[ 2008/07/17 18:06 ] [ 編集 ]
ardin様

全体枠内ではなく一部だったのですが、
試しましたところ解決することが出来ました。

ありがとうございました。
[ 2008/07/17 22:21 ] [ 編集 ]
ありがとうございます、ardinさん。
大変助かります。

twilightさん、解決して良かったですね。
[ 2008/07/20 00:32 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL


ブログ検索
カテゴリー
プロフィール

Author:いたお
皆さんに喜ばれるテンプレートを目指して頑張ります!


当サイトはリンクフリーです。
ブログ全記事表示
カレンダー
08 | 2008/09 | 10
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -