ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 文字の色を変えたい!

文字の色を変えたい!

文字の色やリンクの色を変える方法を紹介します

感覚的に変える方法

まず最初に覚えて欲しいのは、色はcolor: 色の値で決められています。
色の値は#FFFFFF(6桁)・#FFF(3桁)の様に#色で決められている場合と、aqua・coral・deepskyblueの様に色につけられた名前で決められている場合があります。

それがわかったらテンプレートの設定のスタイルシートの編集を見てみます。

スタイルシートに説明が書いてあって説明を見れば、大体どこがどの部分に当たるのかがわかる人は、該当箇所からcolor:を探してください。探せたらカラーコードを参考にして好きな色に変えて見て下さい。

理論的に変える方法

感覚的にはわからない人は前回の文字の間隔を広げたい!で説明した、HTMLで該当箇所を指定してある名前を見つけて、スタイルシートで検索して、そこにあるcolor:の色の値を変えて下さい。

例えば、「記事本文の文字の色」を変えたいなら、変数一覧を見てみて<%topentry_body>が記事本文の部分だとわかります。

そしてHTMLの<%topentry_body>を探してみると・・・
(例-公式テンプレのmame-people)


<div class="mainEntryBase">
<div class="mainEntryBody">
<%topentry_body>

という様に2つの名前で指定されています。

どっちの名前を見ていいのかわからないので両方ともの名前をスタイルシートで探してみましょう。

.mainEntryBase
{
color: #6e6e6e;
font-size: 12px;
line-height: 150%;
margin: 10px 0 0;
padding: 0;
width: 538px }

.mainEntryBody
{
margin: 0;
padding: 0 }

と言う事で、mainEntryBaseの方にcolor:がありました。この#6e6e6eを変えれば、文字の色が変わります。

名前を付けて指定してなかった場合

でも名前で指定してある所を見てみても、color:なんてないので困ったという人がいるかも知れません。
そんな人は多分ブログの文字の色が全部同じ色になっているのではないですか?(リンクの部分などは除く)

ブログで名前を付けて指定している構造は、[全体の文字色>記事部分の文字色>記事のタイトル部分の文字色]などの様にだんだん細かく指定しているものがほとんどだと思います。
でも細かく設定してなくて全体の文字色だけを指定して、ブログの中の文字の色が全部同じ物もあります。

だから名前で指定なんてしてないんです。指定がしていない場合はブログ全体を示す部分BODY { ~~~ }を見てみます。

例えば公式テンプレのmame-people場合は・・・

body
{
color: #FF4000;
background-color: #fff;
margin: 0;
padding: 0 }

となっていて色が指定してある部分がありました。ここの色の値を変えれば、全体が変わります。

※全体のBODY { color: 色の値;}を変えたけど変わらない人は、必ずどこかで名前をつけて指定してあるはずです。全体よりも個別に指定してある方が優先するからです。
例えば、本文記事の文字の色を変えたくて<%topentry_body>を見てすぐ上の<div class="名前">を探してcolor:がなくても、もっと上の方から大きなくくりで指定している場合などがあると思います。

自分で個別に指定したい場合

個別に指定してなくて全体で色が決められているけど、自分は全体ではなくて本文記事の文字の色だけを変えたいという人は、自分で名前をつけて指定してあげれば、記事の色だけを変えれるのでやってみましょう。

例えば、スタイルシートをスクロールさせて一番下に.honbunkiji { color: #679F5F;}(honbunkijiの部分はあなたの好きな名前をつける、#679F5Fの部分はあなたの変えたい色にする)と入力します。くれぐれも先頭の「.」を忘れないで下さい。

そして入力できたら今度はHTMLを見て、本文記事の文字の色を変えたいなら<%topentry_body>のすぐ上に<div class="honbunkiji">を入力して本文記事の終わりの部分に</div>と入力します。</div>は「ここまでが変更する部分ですよ」という意味なので忘れないで下さい。

例えばこんな感じです。

<div class="honbunkiji">
<%topentry_body>
<!--more_link-->
<p class="more"><a href="<%topentry_link>#m<topentry_no>" title="続きを読む">...続きを読む</a></p>
<!--/more_link-->
<!--more-->
<div id="m<%topentry_no>"><%topentry_more></div>
<!--/more-->
</div>
これで記事本文の部分はhonbunkijiという名前によって指定されて、内容は文字の色を#679F5Fにしますと決める事ができました。
他の部分を変えたい時も、自分の変えたい部分だけを赤字で囲ったように、囲えばいいのです。

次はリンクの色を紹介したいと思います。
<リンクの色を変えたい!へつづく>

関連ページ)
・文字の色を変えたい!
リンクの色を変えたい!
リンクの種類紹介.1
リンクの種類紹介.2
リンクの種類紹介.3


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
ブログタイトル
こんにちは。
また教えてください。
ブログタイトルのカラーを変更したいのですが、
一覧でみるとbolg_nameのようなのですが、該当の箇所を変更してみても
変わらないのです。
スタイルシートintroductionの上のtitleの部分を変えてみたのですが
やはり間違っていますか?
タイトルカラー
こんにちは!考え方はあっていますよ。
yuさんのブログURLやテンプレート名がわからないので、うまくいかない理由を推測すると、タイトルって大抵のテンプレートはリンクになっているのでただの色ではなくてタイトルのリンクの色を変えないといけないと思います。

トラックバック部分
はじめまして。こちらのサイトのトラックバックURLの部分は、マウスを乗せると背景色が変わりますよね?しかもリンクでもないし、JavaScriptオフでも動作する。
どういうふうにやっているのでしょうか?
はじめまして。
そーいえば前にカスタマイズした後にトラックバック部分の色が何故か変わるな~と思っててそのままにしていた事を思い出しました。なのであれは自分でやりたくてやっていたのではないんですよ!で、原因を調べたのですが、ページ内を移動するアンカータグを閉じ忘れていたためにリンクの様にマウスを乗せると背景色が変わっていたんです。
気づかせてもらってありがとうございます。
ありがとうございました。
なるほど。<a name="tb">文字列</a>としていたのですね。
でも、意図した動作ではないのですか。コピーしようとしたらコピーされるURLの色が変わって分かりやすいと思ったのですけど。
そうですね。
ずばりその通りで最後の</a>を書き忘れていたのでリンクになっていました。
でもトラックバックURLをアンカータグでちゃんとはさめば閉じ忘れでもないので問題ない気がしますね。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/136-3b25bf1e   

Template Designed by DW99