【はてなブログカスタマイズ】ブログ中の複数箇所の色を一括指定する

このブログのデザインを考える際、配色に頭を悩まされました。そして、色々な配色を試すにあたって、記事タイトル・サイドバーの色・見出し・目次・日付などたくさんの箇所の色を一つ一つ手作業で変更するのが億劫でした。

色を表す変数のようなものを使って、複数の箇所の色を一括指定することはできないかと調べたところ、CSSの「カスタムプロパティ」を使えば良いことがわかったため、その方法について今回は共有させいていただきます。

配色
色の一括指定
何が嬉しいのか？
最後に

配色

配色については以下のサイトを参考にして決めました。好きな四色の色の組み合わせを選ぶことができ、その色を組み合わせてブログの配色を決めることが可能で非常に便利です。

Color Palettes for Designers and Artists - Color Hunt

色の一括指定

色の指定に限らず、デザインCSSのコードを編集する際は、元のCSSのバックアップを取ってから編集するようにしてください！

ここからはこの記事の本題です。はてなブログで統一感のある配色をしようと思ったら、ブログタイトル・記事タイトル・見出し・サイドバーの見出しなど様々な箇所の色を指定しなければなりません。

色を一括で指定できるようにしたかったので、以下の記事を参考に、カスタムプロパティを用いてデザインCSSを記述しました。

CSS カスタムプロパティ (変数) の使用 - CSS: カスケーディングスタイルシート | MDN

例えば、以下のように設定する場合を考えます。

メインカラー：記事タイトルの背景色、サイドバーの見出しの背景色
サブカラー：記事の見出しの色、日付の背景色、グローバルメニューの背景色

はてなブログの「デザイン」→「カスタマイズ」→「デザインCSS」を開きます
CSSでメインカラー・サブカラー・アクセントカラーを指定します。

/*ブログで使う色を指定*/
:root {
  --main-bg-color: #ee7674;
  --sub-bg-color: #B61919;
}

次に、2で定義した色を、var(--main-bg-color)という形式を用いて、適応したいところに代入していきます。

/*記事タイトル*/
.entry h1{
padding:10px;
background: var(--main-bg-color); /*記事タイトルの背景色を指定: メインカラー*/
color: #ffffff;
}

/*サイドバー*/
.hatena-module-title {
    position: static;
    background-color: var(--main-bg-color); /*サイドバーの背景色を指定: メインカラー*/
    border: 0.1px solid var(--main-bg-color); /*サイドバーのボーダーの色を指定: メインカラー*/
    color: #fff;
    padding: 6px 8px;
}

/*大見出し*/
.entry-content h2 {
  position: relative;
  color: #000000;
  padding: 6px 8px;
  margin-bottom: 10px;
  padding-left: 20px;
  font-size:22px;
}
.entry-content h2:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: var(--sub-bg-color);  /*見出しの色を指定: サブカラー*/
    border-radius: 3px; /* 線幅の半分 */
    content: "";
    display: inline-block;
    width: 6px; /* 線幅 */
}

.date
{
color: #ffffff; /*日付の文字色*/
background: var(--sub-bg-color); /*日付の背景を指定: アクセントカラー*/
padding: 0px 6px ; /*日付の文字まわりのスペース*/
width: 100px; /*ボックスの幅（100%にすれば端まで広がる）*/
}

これで複数の場所の色を、:root{} の部分の色の指定を変えるだけで一括で変更することができるようになりました。