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

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

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本に簡単に装飾を追加できます。

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

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

もし、ひとりでは難しいと感じたら……
BOOK LAB STUDIOではkindle出版のサポート・執筆代行サービスを行っています。
ぜひお気軽にご相談ください。
▶ ご相談はこちらから

Kindle出版のやり方や、Amazonランキング上位を狙う具体的な方法についてまとめた動画講座を作りました。
初めての方でも迷わず出版できる内容になっていますので、ぜひチェックしてみてください。
▶ Kindle出版講座の詳細を見る