カスタムCSSで独自スタイルにする(上級者向け)
有料プランなら、CSSでビューアの見た目を細かく調整できます。
テンプレートや配色では届かない細かな調整をしたいときは、カスタムCSSが使えます。ブック設定「高度な設定」の「カスタムCSS」欄にCSSを書くと、公開ビューアに反映されます。
ℹ️ カスタムCSSの反映は、透かしなし(有料)の本(買い切り/サブスク)でのみ有効です。
- 1ブック設定(⋮→設定)を開き、「高度な設定」→「カスタムCSS」を開きます。
- 2要素の目印になるクラス(下の表)を使ってCSSを書きます。
- 3保存する を押すと、公開ビューアに反映されます。
使える主なクラス(要素の目印)
| クラス | 要素 |
|---|---|
| .mk-header | 上部ヘッダー帯 |
| .mk-title / .mk-logo | タイトル文字 / ロゴ画像 |
| .mk-toolbar | 右上の操作ボタン群 |
| .mk-stage | 本の表示エリア(周囲の余白・背景) |
| .mk-book / .page | 本そのもの / 各ページ |
| .mk-nav-prev / .mk-nav-next | 左右のめくり矢印 |
| .mk-bottombar / .mk-pagelabel | 下部バー / ページ番号 |
| .mk-search / .mk-thumbs / .mk-toc | 検索 / サムネ / 目次パネル |
記述例
- ・.mk-nav-prev, .mk-nav-next { box-shadow: 0 8px 24px rgba(0,0,0,.35); } — 左右の矢印に影をつける
- ・.mk-header { backdrop-filter: blur(6px); } — ヘッダーをすりガラス風に
- ・.page { border-radius: 8px; } — 各ページの角を丸くする
⚠️ 安全のため、外部の読み込み(@import・外部URL)、固定配置(position: fixed)、スクリプト等は自動で無効化されます。書いたCSSは、ビューア内だけに適用されるよう自動で範囲が限定されます。
💡 ここで入力したカスタムCSSは、ZIP書き出しにもそのまま含まれます(index.html の <style> に焼き込み済み・同じ mk-* クラスで有効)。さらに細かく編集したいときは、index.html 内の <style> を直接書き換えてください。