Windows10のCreators UpdateにてEdgeがアップデートされ、 モダンブラウザのほとんどがCSS-Variablesという仕様に対応したため、 はてなブログテーマ"Notebook"のカスタマイズが容易になりました。
IEや古いAndroidブラウザ、Opera MiniなどはCSS-Variablesに対応していないため、 これらのブラウザで閲覧した場合にはカスタマイズ結果は反映されず、デフォルトの見た目で表示されます。
右の四角が緑に見えるなら対応ブラウザ、赤に見えるなら非対応ブラウザです。
カスタマイズ方法
Notebookテーマのインストール
当たり前ですが、まずはてなブログのテーマをNotebookにする必要があります。 テーマストアよりインストールしてください。 レスポンシブデザインなので、ブログメニューの「デザイン」>「スマートフォン」（スマホのアイコン）>「詳細設定」の「レスポンシブデザイン」にチェックを入れることをお忘れなく。
このカスタマイズ方法はNotebookテーマ専用です。 他のテーマで同様のカスタマイズをしたい場合にはテーマの製作者さんに問い合わせてみると、対応してくれるかもしれません。
デザインの変更
デザインの変更はブログメニューの「デザイン」>「カスタマイズ」（スパナのアイコン）>「デザインCSS」にて行います。
特別な設定（背景の指定など）をしていなければ、次のような記述になっているはずです。
/* <system section="theme" selected="10328749687191215643"> */ @import url("http://hatenablog.com/theme/10328749687191215643.css"); /* </system> */
この欄の一番下に次のように書き加え、{と}の間に上書きしたい設定項目（後述）とその内容を書いていきます。
/* <system section="theme" selected="10328749687191215643"> */ @import url("http://hatenablog.com/theme/10328749687191215643.css"); /* </system> */ :root { （ここに設定項目を書いていく） }
rootの前の:（コロン）を忘れないように注意してください。
設定項目は次の形式で一行ずつ書いていきます（CSSの書き方と同じ）。
（設定項目の名前）:（設定値）; （設定項目の名前）:（設定値）; （設定項目の名前）:（設定値）;
間に挟まっているのは:（コロン）で行末にあるのは;（セミコロン）です（どちらも半角）。
間違えないように注意。
設定を書き終えたら、「設定を保存する」を押して設定を反映すればOKです。
記述例
青系のデザインに変更する例。
:root { --color-main: #4040a7; --color-main-light: #644fcb; --color-main-dark: #3b3b79; --color-main-clip: #efecfa; --color-highlight-r: 100; --color-highlight-g: 78; --color-highlight-b: 203; --color-background: #ffffff; --color-border: #4040a7; --color-title: #4040a7; --border-width-entry: 1px; --border-width-sidebar: 1px; }
設定項目一覧
すべての設定項目はハイフン二つ--から始まります。
色や大きさの指定方法はCSSの記述方法を参照してください。
「（未使用）」と書いてあるものは現在使っていませんが、 今後のデザイン変更で使用される可能性があります。 デザイン変更があった場合にデザイン崩れを最小限に抑えたい場合には設定しておくといいでしょう。
基本色
テキストカラー
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-text |
テキストの色 | #454545 |
--color-text-light |
明るめのテキストの色 | #5f5f5f |
--color-text-dark |
暗めのテキストの色 | #2c2c2c |
--color-text-clip |
切り抜き時のテキストの色（未使用） | #c5c5c5 |
--color-text-white |
かなり明るめのテキストの色 | #c5c5c5 |
メインカラー
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-main |
メインの色 | #a74040 |
--color-main-light |
明るめのメインの色 | #cb644f |
--color-main-dark |
暗めのメインの色 | #793b3b |
--color-main-clip |
切り抜き時のメインの色 | #faefec |
サブカラー
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-sub |
サブの色（未使用） | #454545 |
--color-sub-light |
明るめのサブの色 | #5f5f5f |
--color-sub-dark |
暗めのサブの色（未使用） | #2c2c2c |
--color-sub-clip |
切り抜き時のサブの色（未使用） | #c5c5c5 |
ハイライト
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-highlight-r |
ハイライトの赤成分(0-255) | 203 |
--color-highlight-g |
ハイライトの緑成分(0-255) | 100 |
--color-highlight-b |
ハイライトの青成分(0-255) | 78 |
要素色
背景
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-background |
背景の色 | #4c4c4c |
--color-content |
コンテンツの背景の色 | #ffffff |
--color-border |
コンテンツの枠線の色 | --color-textの値 |
タイトル等
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-title |
タイトルの文字色 | #cccccc |
--color-description |
ブログ説明文の文字色 | --color-titleの値 |
--color-footer |
フッターの文字色 | --color-descriptionの値 |
文章の一部
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-link |
リンクの文字色 | --color-mainの値 |
--color-link-visited |
訪問済みリンクの文字色 | --color-main-lightの値 |
--color-link-hover |
マウスを重ねた際のリンクの文字色 | --color-main-darkの値 |
--color-rule |
罫線の色 | --color-text-lightの値 |
--color-rule-light |
明るめの罫線の色 | --color-text-whiteの値 |
ソースコード
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-code-background |
コードの背景色 | transparent |
--color-code-statement |
文キーワードの文字色 | #3344ff |
--color-code-type |
型キーワードの文字色 | #3344ff |
--color-code-identifier |
識別子の文字色 | --color-textの値 |
--color-code-constant |
定数の文字色 | #cc4422 |
--color-code-preproc |
プリプロセッサの文字色 | #3344ff |
--color-code-comment |
コメントの文字色 | #449933 |
--color-code-special |
特殊キーワードの文字色 | #cc4422 |
グローバルヘッダ
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--color-globalheader |
ヘッダの文字色 | --color-main-clipの値 |
--color-globalheader-background |
ヘッダの背景色 | --color-main-darkの値 |
色以外
各種大きさ
| 設定項目 | 意味 | デフォルト値 |
|---|---|---|
--border-width-entry |
記事の枠線の太さ | 0 |
--border-width-sidebar |
サイドバーの枠線の太さ | 0 |
--height-title-image |
タイトル画像の高さ | 200px |
--font-size-title |
タイトルの文字の大きさ | 2rem |
--font-size-description |
ブログ説明文の文字の大きさ | 1rem |
おわりに
Notebookテーマを使ってくれている方のブログをいくつか拝見したのですが、 カスタマイズしようと試みている人がけっこういるようだったので、 Edgeがアップデートされたタイミングでカスタマイズ方法を提供することにしました。
もともとオープンソースで改造可能ではあったのですが、SCSS必須ということで初心者にはちょっと難しい作業でした。 現在はCSS-Variablesのおかげで初心者でもなんとかできるレベルになったのではないかと思います。
明るめの色/暗めの色とか、赤成分/緑成分とか若干面倒な設定の仕方になっていますが、 CSSには色の計算や成分分解ができないという制限があるため現状ではどうしようもありません、ご容赦ください。 CSSはもっと柔軟な指定ができてもいいと思うのですが、パフォーマンスとかセキュリティを考えると案外難しいのでしょうね。
