GitBookはMarkdown記法で記述された文章を書籍化するためのWebサービス/ツールです。
非常に簡潔で覚えやすいMarkdown記法で記述したテキストから、HTMLやPDFなどの複数の形式のドキュメントを一斉に出力できる便利なサービスです。

GitBookは便利に便利なサービスですが、GitBookから生成されるデフォルトのHTMLやPDFのデザインは、世の中の書籍と比べると非常にシンプルなデザインで物足りないと感じる方も多いと思います。
そこで本記事では、GitBookから生成されるPDF・HTMLのデザインを変更する方法を紹介します。

なお、本記事ではGitBookのバージョンが 2.6.7 であることを前提に説明しています。
GitBookのバージョンによっては、デザインの変更の仕方が異なる可能性がありますのでご注意ください。

本文のデザインをカスタマイズする

最初に本文のデザインを変更するために、本文に適用されるスタイルシートをカスタマイズする方法を紹介します。

デフォルトで本文に適用されているスタイルシート

GitBookから生成されるPDF・HTMLの本文には、GitBookがデフォルトで持つスタイルシートが適用されています。
基本的に本文のデザインを変更するためには、デフォルトで適用されているスタイルシートを参考にしながら、独自のCSSを作成していくことになります。

HTMLとPDFについて、デフォルトで適用されているスタイルシートを確認する方法を示します。

HTML（Webpage）

ブラウザの開発ツールを利用することで、生成されたHTMLに適用されているスタイルシートを確認することができます。

PDF

HTML出力時のようにブラウザの開発ツールを利用できないため、適用されているスタイルシートを確認することができません。
このため、 GitBookをインストールしたマシンに置かれたスタイルシート を参考にします。

例えばDebian環境において、PDF出力時に使用するスタイルシートは、 /usr/local/lib/node_modules/gitbook/theme/assets/ebook/pdf.css に配置されています。

ユーザ独自のスタイルシートを適用する方法

GitBookで独自のスタイルシートを適用するためには、 book.json に以下の記述を追加します。

CSS

book.json

{
    "styles": {
        "website": "my_website.css",
        "pdf": "my_pdf.css"
    }
}

GitBookはCSSだけでなく、CSSメタ言語であるSCSS(Sass)/LESSにも対応しています。
CSSの代わりにこれらCSSメタ言語を利用したい場合は、 プラグインのインストール が必要です。

CSSの代わりにSCSS、SASS、LESSを用いる場合は、 book.json に以下の記述を追加します。

SCSS

book.json

{
    "plugins": ["styles-sass"],
    "styles": {
        "website": "my_website.scss",
        "pdf": "my_pdf.scss"
    }
}

SASS

book.json

{
    "plugins": ["styles-sass"],
    "styles": {
        "website": "my_website.sass",
        "pdf": "my_pdf.sass"
    }
}

LESS

book.json

{
    "plugins": ["styles-less"],
    "styles": {
        "website": "my_website.less",
        "pdf": "my_pdf.less"
    }
}

サンプル1：見出し1のフォントサイズを変更する

本文のデザインを変更する例として、見出し1（<h1>タグ）のフォントサイズを変更するためのスタイルシートを記載します。
サンプルでは、CSSメタ言語であるSCSSを用いています。

PDF

change_h1_font_size_pdf.scss

.page {
    .section {
        h1 {
            font-size: 20px;
        }
    }
}

HTML（Webpage）

change_h1_font_size_html.scss

.book {
    .book-body {
        .page-wrapper {
            .page-inner {
                section.normal {
                    h1 {
                        font-size: 20px;
                    }
                }
            }
        }
    }
}

サンプル2：PDF出力時の目次のタイトルの色を赤に変更する

続いて、PDF出力時に出力される目次のタイトルの色を赤に変更する例を示します。
こちらのサンプルでも、CSSメタ言語であるSCSSを用いて記述しています。

change_glossary_title_font_color.scss

.page {
    .section {
        &.glossary {
            >h1 {
                color: #FF0000;
            }
        }
    }
}

ヘッダー、フッターのカスタマイズ

GitBookでPDFを出力すると、各ページの本文の上下にそれぞれヘッダーとフッターがつけられて出力されます。

デフォルトのヘッダーとフッターの出力が気に入らない方のために、GitBookはヘッダーとフッターを編集する手段を用意しています。
ヘッダーとフッターを編集するためには、 book.json に以下のようにヘッダーおよびフッターのHTMLを記述します。

以下では、ヘッダーに Custom Header 、フッターに Custom Footer と表示する例を示しています。

book_header_footer.json

{
    "pdf": {
        "headerTemplate":
        "<html><body>Custom Header</body></html>",
        "footerTemplate":
        "<html><body>Custom Footer</body></html>"
    }
}

さらにカスタマイズしたい方のために

これまで紹介したカスタマイズでは物足りない方は、 GitBookが公式で公開しているデフォルトテーマのレイアウト を参照し、カスタマイズの参考にするとよいと思います。

GitbookIO/theme-default

上記リポジトリのうちカスタマイズ時に参考になるのは、以下のパスに置かれたデータです。

パス	内容
`_layout`	生成されるドキュメント本体の雛形(HTML形式)
`src/less`	ドキュメント本体の雛形(`_layout`に置かれたHTML)に適用されるスタイルシート(LESS形式) 出力形式ごとに用意されている
`src/js`	ドキュメント本体の雛形(`_layout`に置かれたHTML)で使用されているJavascript

[GitBook] GitBookから生成されるPDF・HTMLのデザインを変更する方法

本文のデザインをカスタマイズする

デフォルトで本文に適用されているスタイルシート

HTML（Webpage）

PDF

ユーザ独自のスタイルシートを適用する方法

CSS

SCSS

SASS

LESS

サンプル1：見出し1のフォントサイズを変更する

PDF

HTML（Webpage）

サンプル2：PDF出力時の目次のタイトルの色を赤に変更する

ヘッダー、フッターのカスタマイズ

さらにカスタマイズしたい方のために