全体の文字色をカスタマイズ・その１・初心者向け連載・アメブロカスタマイズ解体新書

投稿：2013年03月14日｜更新：2017年10月29日

お知らせ（2016年3月8日追記） 2016年3月より、「CSS編集用デザイン」テンプレートが新たに３つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

＞＞こちらもどうぞ

CSS編集用デザイン徹底解剖

(1) 文字のスタイル

文字のスタイルのブロックは以下のようにさらに４つのブロックに分かれています。

(1-1) 全体の文字
(1-2) ブログタイトル文字
(1-3) 記事／メッセージボード内の文字のスタイル
(1-4) サイドバー内の文字のスタイル

その中でも今回は(1-1) 全体の文字を解説します。

「(1-1) 全体の文字」の解説

ブログ全体の文字色をカスタマイズする方法を紹介します。
では早速CSS編集の画面を開いてください。

(1-1) 全体の文字の構成は以下のようになっています。

/* (1-1) 全体の文字
--------------------------------------------*//* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;ブログの全体の文字色を変更する
}/* リンク */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#0066cc;リンク文字の色を変更する
}/* 訪問済のリンク */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#996699;リンク文字を既に訪問した後の文字色を変更する
}/* マウスオーバーしたときのリンク */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#ff3366;リンク文字にマウスが乗った時の文字色を変更する
}/* 弱い文字（日付など）*/
.skinWeakColor,.skinBaseWeakColor{
color:#999999;記事の日付、テーマの文字色を変更する
}/* 強い文字（NEW! 更新!など）*/
.skinStrongColor,.skinBaseStrongColor{
color:#ff3399;記事の更新文字の色を変更する
}

赤字でハイライトした部分を見てください。この部分が文字の色を設定する部分です。そしてコロン（：）の後にナンバー（＃）に続くローマ字と数字を組み合わせた6ケタのコードが続きます。このコードのことをカラーコードと言い、これが色のコードを示す役割となっています。これを変更すると、それぞれの色を変更することができます。

カラーコードはどこで調べるの？

カラーコードは覚える必要はありません。私のコラムでも過去にカラーコードを紹介していますのでそちらも参考にあなた自身で文字色をいろいろ変えてみてくださいね。

カラーコードをこちらでしらべる。

実務上の注意点

あなたが文字色を変更する際に気を付けたいこと。それはできるだけ青い色は設定しないことです。青色は、間違いなくリンクだと思い訪問したユーザーはマウスを上にのっけてクリックしようとしてしまいます。そうならないためにもできるだけ文字色を青色にするのは控えましょう。

では

>>ページのトップへ