Honkitで画像とタイトルを中央揃えにする

2772 ワード
小ネタ asciidoc honkit gitbook 小ネタ テキストリンク

なにこれ

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本当にありがとうございます。大変助かっています。