デザインテーマ Notive 紹介 - デザインテーマ Notive デモブログ

Notive のインストール・更新情報はこちら： Notive - テーマストア

notive-pointbox-20260324-01

デザインテーマ Notive は白地の 1 カラムテーマで、レスポンシブデザインです*1。
- 目次ボックス：目次を挿入すると、「目次」とラベルの付いた黒枠で強調します。
- 要点ボックス：グレーのボックスで「この記事の要点」を記述できます (これ)。
- 参考文献ボックス：参考文献を黒枠で強調し、番号または識別子を角括弧で囲んで表示できます。
- 一括カスタマイズ：アクセント色やボックスの見出しはカスタマイズできます。

notive-pointbox-20260324-01
各機能の説明
デザインの補足
- コンセプト
- pre記法 (コードブロック) の見た目
参考文献

各機能の説明

目次ボックス

目次を挿入すると、自動で「目次」とラベルの付いた黒枠で強調します。この強調はキャンセルできません。ラベルはカスタマイズできます (後述)。

参考文献ボックス

「参考文献」という見出しを記述し、その直後に番号付きリスト (ol) または説明リスト (dl) を続けると、「参考文献」とラベルの付いた黒枠で強調します。また、リストの番号または用語要素は [1] や [Devlin2019BERT] のように角括弧で囲まれます。このとき、元の見出しは表示されません (目次にはあらわれ、リンクはできます)。参考文献の強調はキャンセルできません。

要点ボックス

notive-pointbox-xxx (xxx は任意の文字列で、ページビュー内で重複しないよう日付などを付けてください) というダミー見出しを記述し、その直後に段落 (p) またはリスト (ul) または番号付きリスト (ol) を続けると、「この記事の要点」とラベルの付いたグレーのボックスになります。ダミー見出しは表示されないし目次にもあらわれません。ラベルはカスタマイズできます (後述)。

グレーのボックスになるのは、ダミー見出し直後の段落 (p) またはリスト (ul) または番号付きリスト (ol) のいずれか一つのみとなります (i.e. 段落と箇条書きを合わせてグレーのボックスに入れることはできません)。

一括カスタマイズ

以下のルート CSS 変数が一括カスタマイズ (上書き) 可能になっています。

アクセント色	`--color-accent`
やや薄めたアクセント色 (※)	`--color-accent-lighter-1`
見出しのフォント	`--font-family-title`
本文のフォント	`--font-family-text`
等幅フォント	`--font-family-mono`
目次ラベル	`--label-content`
要点ラベル	`--label-point`
記事の最大幅 (PC向け)	`--container-width`

テーマストアからテーマをインストールすると、ブログ管理画面の「デザイン > カスタマイズ (レンチのアイコンのタブ) > デザイン CSS」に以下のようにインポートされるので、それに続けて以下のように記入すると上書きできます。

/* <system section="theme" selected="17179246901369037364"> */
@import url("https://usercss.blog.st-hatena.com/-/theme/17179246901369037364.css?version=...");
/* </system> */

:root {
  --color-accent: #658b38;  /* デフォルトの青色 (#4682b4) からモスグリーンへ */
  --label-content: "もくじ";  /* デフォルトの目次ラベル「目次」を平仮名へ */
  --container-width: 690px; /* デフォルトの 850px より狭く */
}

(※) やや薄めたアクセント色は、アクセント色のボタンのホバー時に利用しますが、color-mix() (color-mix() - CSS | MDN) 対応ブラウザならアクセント色を薄くした色を自動で計算した色が採用されます。color-mix() 未対応ブラウザにも意図通りの色を表示したい場合や、薄め方を自分で決めたい場合には、自力で色を計算して上書きしてください。

デザインの補足

コンセプト

1 カラムにして記事の幅を広くとり、画面内にたくさんの文章を書くことができるようにしています。
タイトルがフェルトペンで、本文が鉛筆で書かれた、よく書き込まれたノートをイメージしています。
ノートなので、コードブロックのシンタクスハイライトが目立ちすぎないよう、彩度を抑えています。

pre記法 (コードブロック) の見た目

単なる pre 記法の場合は、コンソール画面のイメージで、黒地に白字になります (はてな記法でのみ動作確認しています)。

bash run.sh

スーパー pre 記法では薄灰色地になります。シンタクスハイライトの彩度を抑えています (以下は Python の例)。

class Fibonacci:
    def __iter__(self):
        print('===== __iter__() was called. =====')
        a, b = 1, 1
        for counter in range(1, 11):
            x = 1
            if counter > 2:
                x = a + b
                a, b = b, x
            yield x

参考文献

制作の手引き: デザインテーマ制作の手引き - はてなブログヘルプ
Boilerplate: GitHub - hatena/Hatena-Blog-Theme-Boilerplate · GitHub - デザインテーマ Notive の作成にあたり、こちらのはてなブログチームのリポジトリの動作確認の仕組みを利用させていただきました。

*1:実際にスマートフォンからの閲覧時にもデザインを反映させるには、管理画面の「デザイン > スマートフォン (スマートフォンのアイコンのタブ)」の最下部「詳細設定」内の「レスポンシブデザイン」をチェックしてください (ここにチェックを入れないと自動では反映されません)。