Vivliostyle-CLIで作ったドキュメントに表紙をつくる [Vivliostyle]
前回ドキュメントに要素を追加してようやく体裁が整ってきました。今回は1ページ目を表紙にしようと思います。1ページ目の背景色をかえてページ番号を付与しないようにするため、次のような要素をCSSファイルに付け加えます。
これをプレビューしてみると次のようになりました。
これでは味気ないので、表紙の背景に画像を用いたいと思います。背景画像にはSVGフォーマットのものを使います。背景となる画像は次のサイトで作ることができます。
https://heropatterns.com/
適当なデザインをクリックすると画面があらわれます。その中にCSSのコードがあるので、それをコピーしてCSSファイルに転記します。
SVGファイルの定義がながいので一部省略をしていますが、次のようになりました。先程定義した背景色の定義は上書きするのに注意してください。
プレビューしてみました。少し本っぽくなってきたと思います。
次は章の飾り付けをしてみます。
※この記事は次の本を参考にしています。
前のVivliostyleの記事 次のVivliostyleの記事
@page:nth(1) { margin: 0; background-color: #888888; /* 背景色をグレーに設定 */ @bottom-center { content: none; /* ページ番号をなくすためにボトムセンターにコンテンツはなし */ } }
これをプレビューしてみると次のようになりました。
これでは味気ないので、表紙の背景に画像を用いたいと思います。背景画像にはSVGフォーマットのものを使います。背景となる画像は次のサイトで作ることができます。
https://heropatterns.com/
適当なデザインをクリックすると画面があらわれます。その中にCSSのコードがあるので、それをコピーしてCSSファイルに転記します。
SVGファイルの定義がながいので一部省略をしていますが、次のようになりました。先程定義した背景色の定義は上書きするのに注意してください。
@page:nth(1) { margin: 0; background-color: #DFDBE5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 ...(省略)... 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E"); @bottom-center { content: none; /* ページ番号をなくすためにボトムセンターにコンテンツはなし */ } }
プレビューしてみました。少し本っぽくなってきたと思います。
次は章の飾り付けをしてみます。
※この記事は次の本を参考にしています。
Web技術で「本」が作れるCSS組版 Vivliostyle入門
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2023/05/12
- メディア: Kindle版
前のVivliostyleの記事 次のVivliostyleの記事
タグ:技術同人誌 vivliostyle
コメント 0