【はてなブログ】文字色・背景色のカスタマイズ一覧！

はてなブログは、「CSS」というプログラムの部分を変更することで、ブログの背景色や文字の色、大きさなどのデザインを自分の好みに合わせて変更することができます。

そこで、この記事では、CSSを使って文字の色、または背景色を変更する方法を書き留めておきます。

変更方法

これ以下の内容で、タイトルや本文など、様々な部分の文字色、背景色を指定するCSSプログラムを列挙していきます。
それを、「デザイン」→「カスタマイズ（🔧マーク」→「デザインCSS」の部分にコピペします。

　
「変更を保存する」ボタンを押すと、「デザインCSS」で変更したデザインが適応され、ブログのデザインが変化します。変更を保存するときは、バックアップを取ることを強くお勧めします。
もとのデザインに戻したくなった、失敗した！という時に、もとのCSSコードを記憶をたどって復元するのはとても困難な作業です！

色の指定方法

今から出てくるプログラムの中で、

.entry-title a{
  color: #ffffff;
}

のような文が出てきます。このなかで、「＃ffffff」というのが色を指定している文字列です。つまり、「#ffffff」の部分を変更すると、特定の部分の色が変化します。

そして、どの文字列が何色を表しているのか？は以下のページをご覧ください。
www.netyasun.com

ブログの背景色の変更

ブログ全体の背景色を変更するプログラムです。

body{
    background:#fffdf2;
}

サイドバーの背景色変更

サイドバーの背景色を変更します。

#box2-inner {
    background-color:#ffffff;
}

記事タイトルの色変更

それぞれの記事のタイトルの文字色と、その背景色を一括で変えるプログラムです。
文字色を変えるには、color:のあとの#ffffffを変更します。
背景色を変えるには、background-colorのあとの#ffffffを変更します。

.entry-title {
   background-color: #fffff;
}
.entry-title a{
  color: #ffffff;
}

記事の本文の文字色変更

それぞれの記事の本文の文字色を一括で変えるプログラムです。
color:のあとの#ffffffを変更します。

.entry-content {
    color: #ffffff;
}

記事の見出しの文字色変更

それぞれの記事の見出しの文字色を一括で変えるプログラムです。
color:のあとの#ffffffを変更します。

h1.entry-title a{
color: #ffffff;
}

リンクの文字色変更

リンクの文字列（デフォルトでは青色。クリックすると特定のページにジャンプする文字列）の文字色を変更するコードです。
リンク文字列全般の色を変えるには、a{ color: のあとの#ffffffを変更します。
まだクリックしていないリンク文字列の色を変えるには、a:link{ color: のあとの#ffffffを変更します。
以前にクリックしたリンク文字列の色を変えるには、a:visited { color: のあとの#ffffffを変更します。
クリックしていないけど、マウスを重ねているリンク文字列の色を変えるには、a:hover{ color: のあとの#ffffffを変更します。

/*リンクされた文字*/
a{
    color:#ffffff; 
}

/*未訪問のリンク*/
a:link {
    color:#fffffff;
}

/*訪問後のリンク*/
a:visited {
    color:#ffffff;
}

/*マウスをのせたとき*/
a:hover{
     color:#ffffff;
}

表の背景色の変更

はてなブログは、このような票を作ることができます。

見出しセル1	通常セル1
見出しセル2	通常セル2

この表の文字列や背景の色を変更するCSSです。

見出しセルの背景色変更

見出し部分のセルの背景色を変更します。デフォルトでは灰色に設定されています。

.section table th {
     background:#ffffff; 
}

通常セルの背景色変更

通常セルの背景色を変更します。デフォルトでは白（透明？）に設定されています。

.section table td {
    background:#ffffff; 
}

記事一覧ページの文字色の変更

記事一覧ページの背景色変更

記事一覧ページの背景色を変更します。

section {
    background-color:#ffffff;
}

記事の説明文の文字色変更

記事一覧ページを開くと、記事のタイトルの下に、小さな文字でそれぞれの記事の本文の最初の数十文字がひょじされていると思います。そこの文字色を変更します。

.archive-entry{
    color: #EEEEEE;
}

目次の背景色

記事の目次の背景色を指定します。

ul.table-of-contents {
　background: #ffffff;
}

3.サンプルプログラム

以上の内容を参考にして、このブログの色関連のCSSは次のようになっています。

/*本文色*/
.entry-content {
    color: #ffffff;
}

h1.entry-title a{
color: #ffffff;
}

#blog-description {
     color:#ffffff;
}

/*リンクされた文字*/
a{
  color:#A7F1FF; 　/*←色指定*/
}

a:hover{
color:#81F7F3;
text-decoration:underline;
}

a:visited{
color:#819FF7;
text-decoration:underline;
}

.table-of-contents{
background:#000010;
 border: 3px solid #707070; /* 枠の色*/
}


/* 表 */
.section table th { /* 見出しセル */
 background:#222222; /* 背景色 */
}

.archive-entry{
    color: #EEEEEE;
}