ABlogに独自のCSSを適用する¶

ABlogのデフォルトテーマはalabasterですが、alabasterは英文に合わせてあるようですので、自分用にCSSを拡張してみます。

自分用cssファイルをプロジェクトに設定する¶

ドキュメントルートディレクトリの conf.py ファイルに、下記の記述があるかどうか確認します。

html_static_path = ['_static']

そうしたら、同じく conf.py に下記を書き足します。

html_style = 'mycss.css'

mycss.cssというスタイルファイルがこのプロジェクトのスタイルファイルですよということをSphinxに伝えるわけです。

次に、ドキュメントルートディレクトリに _static というディレクトリがありますので、そこに mycss.css というファイルを作ります。このcssファイルに書式を指定していきます。

ABlogをビルドすると、このmycss.cssが _website/_static ディレクトリに自動的にコピーされます。

mycss.css が空のままABlogをビルドすると、思いっきり表示が崩れます。alabaster.cssが読み込まれなくなるからですね。

というわけで、mycss.cssの冒頭でalabaster.cssをインポートします。

@import url("alabaster.css");

あとは思うとおりにCSSを設定していけば良いわけですね。