エフアンダーバー

個人開発の記録

はてなブログテーマ "Notebook" のカスタマイズについて

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;
}

f:id:fspace:20170410002840p:plain

設定項目一覧

すべての設定項目はハイフン二つ--から始まります。

色や大きさの指定方法は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はもっと柔軟な指定ができてもいいと思うのですが、パフォーマンスとかセキュリティを考えると案外難しいのでしょうね。