Kindleのおしゃれな見出し装飾アイデア3選｜SigilでCSSを使う方法
booklabstudioKindle本の見出し、デフォルトのままになっていませんか？
実は、Sigilという無料ツールを使って
CSSで見出しをおしゃれに装飾することができます。
この記事では、
・Kindleで使える見出し装飾アイデア3選
・実際のCSSコード
・Sigilでの設定方法
をわかりやすく解説します。
少しだけ手間はかかりますが、無料で簡単にできるので、ぜひ試してみてくださいね。
※リフロー型EPUB向けの方法です。
Kindleで見出し装飾はできる？
結論から言うと、できます。
ただし注意点があります。
Kindleは高度なCSS（positionや疑似要素など）が正しく表示されない場合があります。
そのため、borderやpaddingを使ったシンプルな装飾が安全です。
今回は、再現性の高い3つのデザインを紹介します。
① 左に細長いカラーライン
シンプルですが、ビジネス書や実用書に相性抜群です。
CSS
h1 {
border-left: 6px solid #9edec5;
padding-left: 12px;
}
・安定表示
・上品
・読みやすい
② 太めのカラー下線
やわらかく、おしゃれな印象になります。
CSS
h1 {
border-bottom: 5px solid #9edec5;
padding-bottom: 6px;
}
・存在感あり
・デザイン性アップ
・シンプルで安全
③ 上下を細い黒線で挟む
少しフォーマルな印象。
ビジネス書向きです。
CSS
h1 {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px 0;
}
・高級感
・落ち着いた印象
・崩れにくい
SigilでCSSを設定する方法
Sigilという無料ツールを使ってCSSを設定していきます。
→Sigilとは？ 解説記事はこちら
1．SigilでEPUBファイルを開く
2．左側の「Styles」フォルダを開く
3．book-style.css（または同じようなタイトルのファイル）を開く
4．一番下にCSSをそのままコピペ
保存すれば、装飾が反映されます。
カラーコードの調べ方
装飾の色は自由に変更できます。
例：#9edec5
この「#から始まる6桁の英数字」が16進数カラーコードです。
カラーコードは、下記のようなサイトで簡単に調べることができます。
お好みのカラーコードをコピーして、そのままCSSにペーストするだけです。
※Kindle専用端末では白黒表示になることにはご留意ください。
まとめ｜Kindle見出しはCSSで簡単におしゃれにできる
Kindleの見出しは、
・CSSで装飾できる
・Sigilで簡単に編集可能
・シンプル設計が安全
ほんの少し手を加えるだけで、本の完成度は大きく変わります。
ぜひ、あなたのKindle本にもオリジナルデザインを取り入れてみてください。
→Kindleで蛍光マーカー風の装飾をする方法はこちら
→Kindleの奥付の作り方はこちら
→Kindleの中扉についての解説はこちら
もし、ひとりでは難しいと感じたら……
▶ 無料相談はこちら
