なにこれ
Honkit (開発が終了したgitbook v1がフォークされたもの)でドキュメントを作成しているときに、画像を差し込んだときに初期設定だと左揃えなことに気づいた。見た目が良くないので中央揃えにしたかったけど、若干手間取ったので備忘がてらメモ。
まとめると
- book.jsonとstyles/website.cssを作って、cssの中に中央揃えにしたいclassにtext-align: centerを指定する
詳しく
Asciidocで画像を表示させたいとき、その前の行にタイトルを記入することができる。
Document.adoc
= 画像サンプル
:imagesdir: img
.寿司寿司寿司
image::sushi.png[width="300"]
(QiitaってAsciidocのシンタックスハイライトできないんだ……悲しい)
このように書くと、タイトル（と寿司）が左に偏ってしまう。
悲しい。そこで、ドキュメントのフォルダにbook.jsonとwebsite.cssを追加する。
フォルダ構成
img/
sushi.png
styles/
website.css
SUMMARY.adoc
Document.adoc
book.json
book.jsonは{}だけ書いてあればOK。
book.json
{}
website.cssが中央揃えのための本体で、ここに設定を書いてあげる。
website.css
.title {
text-align: center;
}
.content{
text-align: center;
}
本当はこれだけでいいと思ったんだけど、imagesタグの方にもalign centerを書いてあげなきゃいけない。
Document.adoc
= 画像サンプル
:imagesdir: img
.寿司寿司寿司
image::sushi.png[width="300", align="center"]
こうすることでやっと中央揃えできるようになった。
寿司も見違えたように美しい。
おわりに
Gitbook使おうと思ったら謎のホスティングサイトと化してるし、Asciidoc使えなくなってるしでほとほと困っていた。Honkit本当にありがとうございます。大変助かっています。