はてなブログテーマ「Color Book」の基本カスタマイズ方法。

はてなブログテーマ「Color Book」の基本カスタマイズ方法を解説していきます。

参照までに、カスタマイズしたブログ↓

https://www.nijinokosodate.com/

基本設定。
ヘッダー画像を設定しよう。
背景色または背景画像を設定しよう。
カテゴリーの背景色と文字色を変えよう。
見出しにデザインを付けよう。
目次にデザインを付けよう。

基本設定。

まずは基本設定です。

「設定」→「詳細設定」

トップページの表示形式を「一覧形式」にします。

（無料版の方はこれできないので飛ばしてください）

次に、「デザイン」→「スマーとフォン」→「詳細設定」の「レスポンシブデザイン」にチェックを入れます。

ヘッダー画像を設定しよう。

ヘッダー画像を設定しましょう。

ヘッダー画像はなくてもよいですが、

このテーマはスマホ・タブレットでもヘッダー画像が見切れることなく表示されるので、

ぜひ設定してみてください。

ヘッダー画像サイズは1000×200pxがピッタリですが、

用意できなければなんとなく横長のものでOK。

※あまりにもサイズが違う場合、スマホ画面でヘッダー画像がうまく表示されない場合があります。ご注意下さい。

「デザイン」→「カスタマイズ」→「ヘッダ」

「ヘッダー画像」→「ファイルを選択」で画像をアップロードします。

画像にタイトル文字が入っていなければ「画像とテキストを表示」
画像にタイトル文字が入っていれば「画像のみ表示」

どちらもスマホ・タブレットできれいに表示されます。

背景色または背景画像を設定しよう。

背景は白のままでもいいですが、好みの色や画像に簡単に変えられます。

「デザイン」→「カスタマイズ」→「背景画像」または「背景色」

ここで選んだものに背景が変わります。

記事やサイドバーのところは白にしてあるので、いい感じに背景が付きます。

もしこの中に好みの色がなかった場合は、

下のコードを「デザインCSS」にコピペして、カラーコード（#で始まるやつ）を好きなものに変えることで、好きな背景色を付けられます。

カラーコード参照↓

WEB色見本原色大辞典 - HTMLカラーコード


body{
  background:カラーコード;
}

ここにコピペ↓

背景色を付けると、画像まわりにうっすらと線がついてしまうので↓

気になるかたは下のコードを「デザインCSS」にコピペすると線が消えます。


.page-archive .archive-entry{
  border:none;
}

カテゴリーの背景色と文字色を変えよう。

カテゴリーの背景色と文字色を変えましょう。

下のコードを「デザインCSS」にコピペし、カラーコードを好きなものに変えて下さい。

なお、どちらかでいい場合は、いらないほうの行を削除してください。


.categories a{
  background:カラーコード;/*カテゴリーの背景色*/
  color:カラーコード;/*カテゴリーの文字色*/
}

見出しにデザインを付けよう。

記事やサイドバーの見出しには好みのデザインを付けられるように、あえてデザインを付けてません。

なのでデザインを付けましょう。

参考になるのがこの「サルワカ」さんのサイト↓

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

このサイトのなかから好きなデザインを選び、

コードを「デザインCSS」にコピペし、

コードの「h1」の部分を、はてなブログ用に以下のように変えます。

記事の大見出しなら「h3」
中見出しなら「h4」
小見出しなら「h5」
サイドバーの見出しなら「.hatena-module-title」

よくわからないという方は、

とりあえず下のコードを「デザインCSS」にコピペすると、下の画像のようなデザインが付きます。


/*大見出し　サイドバー見出し*/
.hatena-module-title,h3 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}

/*中見出し*/
h4 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

/*小見出し*/
h5 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}

カラーコードを好きなものに変えて下さい。

目次にデザインを付けよう。

目次にもデザインが付いてないので、好みのデザインを付けるといいでしょう。

「はてなブログ　目次　カスタマイズ」と検索するとたくさん記事が出てくるので、

好みのデザインを見つけて、CSSをコピペしてみてください。

特にこだわりない方は、

下のコードを「デザインCSS」にコピペすると、下の画像のようなデザインが付きます。


/*目次*/
.entry-content .table-of-contents {
    position: relative;
    margin: 0;
    padding: 1em 1.2em 1em;
    border-top: solid 40px #dfefff;
    border-right: solid 3px #dfefff;
    border-bottom: solid 3px #dfefff;
    border-left: solid 3px #dfefff;
    border-radius: 4px;
}
.entry-content .table-of-contents::before {
    content: "目次";
    position: absolute;
    top: -33px;
    left: 20px;
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    color: #454545;
    border: none;
    font-size: 120%;
}