Kindle原稿にグレー背景ボックスを付ける方法｜HTML＋CSSで重要ポイントを強調

2026年3月6日 2026年4月4日

booklabstudio

Kindle本を作っていると、ここは重要なので目立たせたいと思う場面があります。

例えば

・まとめ
・注意点
・ワンポイントアドバイス

などです。

そのようなときに便利なのが、背景ボックス（グレーの囲み）装飾です。

今回は、無料EPUB編集ツールSigilを使ってKindle本に背景ボックスを付ける方法を紹介します。

EPUB装飾はHTML＋CSSが一番安定

Wordで背景色をつけても、EPUBに変換すると

・背景色が消える
・余白が崩れる
・表示が安定しない

といったことが起こる場合があります。

そのため、Kindle本ではHTML＋CSSで装飾する方法が一番確実です。

まずSigilで本文HTMLを開き、
背景ボックスにしたい部分を次のように囲みます。

<div class="gray-box">
ここは重要ポイントです。
</div>

次にCSSファイル（例：book-style.css）を開いて、以下のCSSを追加します。

.gray-box{
background-color: #f2f2f2;
padding: 0.8em;
margin: 1em 0;
}

これで、本文の周囲にグレー背景のボックスが表示されます。

Kindle Previewerで表示を確認しておきましょう。

Sigilを使えば、Kindle本に簡単に装飾を追加できます。

背景ボックスは、「ここは少し意識して読んでほしい」という部分を伝えるのに便利です。

重要ポイントや補足説明など、読者に強調したい部分にぜひ活用してみてください。