文字色の変更（livedoorBlog編）
2006年5月 7日
具体的に、エントリー本文の文字色を変更する方法を例に挙げて、説明します。
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。
■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
＜スタイルシート＞
| .main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; } |
エントリー部分の文字色を変更するには、.main,.mainmore内で、color というプロパティを追加して、文字色を指定します。
初期設定では、bodyで「color: #444;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。
＜スタイルシートの編集例＞
| .main,.mainmore{ font-size:small; margin:10px 20px 0; text-align:left; color: #666666; } |
文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。
■ 16進表記で指定
| color: #666666; |
16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。
■ カラーネームで指定
| color: blue; |
16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。
HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。
■ カラーチャート表（標準カラー16色）
| Aqua #00FFFF |
Yellow #FFFF00 |
Fuchsia #FF00FF |
White #FFFFFF |
| Teal #008080 |
Olive #808000 |
Purple #800080 |
Gray #808080 |
| Blue #0000FF |
Lime #00FF00 |
Red #FF0000 |
Silver #C0C0C0 |
| Navy #000080 |
Green #008000 |
Maroon #800000 |
Black #000000 |
文字色の変更について、エントリー本文の文字色の変更を例として説明しましたが、エントリー本文だけではなく、他の部分の文字色を変更したい場合、例えば、ブログのタイトルやエントリーの日付などを変更したい場合は、その該当するクラスの文字色の指定を変更すると、その部分の文字色が変更できます。
livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。
＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞
| クラス | 該当箇所 |
| .blogtitle | ブログのタイトル |
| .description | ブログの説明 |
| #content | エントリー全体 |
| .date | エントリーの日付 |
| .title | エントリーのタイトル |
| .main,.mainmore | エントリーの本文 |
| .posted | 投稿者・投稿時間・コメントなど |
| #left | サイドメニュー全体（左側） |
| #right | サイドメニュー全体（右側） |
| side | サイドメニュー |
| .sidetitle | サイドメニューのタイトル |
| .link-note | RSSへのリンクや検索ボックス |
| .calendarhead | カレンダーのヘッダ |
| .caltblwk td | カレンダーの週 |
| .caltblday td | カレンダーの日 |
以上、文字色の変更、指定方法について説明しました。
是非、読みやすい文字色にカスタマイズしてくださいね。
[次の講義へ] →行間の変更
参考になりましたら、応援お願いします。
パーマリンク | 投稿者 りっち | 2006年5月 7日 21:56
| 
| 
はてなブックマークに追加
Yahooブックマークに登録
トラックバック
このエントリーのトラックバックURL:
このリストは、次のエントリーを参照しています: 文字色の変更（livedoorBlog編）:
» ブログのカスタマイズ from むちえさんのブログ♪
ブログのカスタマイズ
僕も使っている↑「ＦＣ２」のブログですが、便利なのは自由にカスタマイズができることです。
今回はＳＥ... [続きを読む]
トラックバック時刻: 2006年5月11日 14:23
コメント
こんにちは。質問があります。いまだ解決せず・・・
ＨＰビルダーで文章をつくって、プレビューでみると、文字が大きく表示されます。5のフォントが10くらいで表示されます。文字づれがおこって、レイアウトが崩れてしまうのでこまっています。どうしたらいいでしょうか。エクスプローラは中に設定しています。ヤフートップはきれいに表示されます。
アドバイスよろしくおねがいします。
投稿者 まっく : 2006年5月 8日 05:03
はじめまして。
Shinと申します。
ランキングからやってまいりました。
うわ～、すごい充実してますねー。
ブログのカスタマイズをメインテーマにすること自体がすごいと思います。
私は一応カスタマイズはそこそこいけるほうだとは思っていますが、とてもメインで出来る自信はないです。
それではまた、いろいろと参考によらせていただきますね。
投稿者 情報商材感想レポート：ゴールドレヴュー : 2006年5月 8日 17:22
ブログ別！作成・カスタマイズ講座 管理者様、はじめまして。
JOBLOG(ジョブログ)事務局の高橋と申します。
初めての書き込み失礼いたします。
今回は貴殿ブログに、ぜひJOBLOGに
参加していただきたくコメントさせていただきました。
JOBLOGは、ブログから企業の求人情報を発信し
ブロガーさんには掲載していただくだけで報酬を
お支払いする、というシステムです。
ブログが人材と企業を結ぶ架け橋になる
今までにはないタイプの求人情報メディアです。
誠に勝手ではございますが、ご参加いただければ幸いです。
もしご興味がございましたら、詳しくはこちらをご覧ください。
http://www.joblog.jp/blogger/
突然の書き込み、大変申し訳ございません。
お邪魔でしたら削除していただければと思います。
どうぞよろしくお願いします！
投稿者 JOBLOG(ジョブログ)事務局 高橋 : 2006年5月15日 10:51
:tT!91gX, heartdesire.org/sp, スマホでテレエッチ, http://heartdesire.org/sp/
投稿者 スマホでテレエッチ : 2011年12月 9日 13:10
の部屋！私はちょうどあなたがハッカーで問題が発生したかどうか尋ねると思った？私の最後のブログ（ワードプレス）は、ハッキングと私はバックアップなしのため、ハードワークの数ヶ月を失うことになったいた。あなたは、ハッカーを阻止するために任意のメソッドを持っていますか？
投稿者 one hour payday loans : 2012年1月12日 17:32
そんなに書かれた内容をhavinを使用すると、これまでplagorismまたは著作権侵害の問題に実行するのですか？私のサイトは、私はどちらか自分で作成または外注が、それはだ、それの多くは、私の同意なしに、すべてWeb上でそれをポップアップされてきたユニークなコンテンツをたくさん持っている。あなたは、食い物にされてからコンテンツを保護するためのあらゆるソリューションを知っていますか？私は本当にそれをいただければと思います。
投稿者 search engine optimization vancouver : 2012年1月13日 10:57
コメントしてください
』
』