このエントリーをはてなブックマークに追加

SphinxでCSSのclassを変更する

r_rudiさんから引き継ぎました、Sphinx アドベントカレンダー 201221日目です。

Sphinx MLから拾ってきた小ネタです。

Figureをセンタリングしたい

figureやimageを使って画像を貼り付けたはいいけど、センタリングしたい!と言うときがあるかと思います。

そういうときは、以下のように、:figclass:オプションをつけてみましょう。こうすると、CSSのクラスに指定したクラスが付け加わります。

.. figure:: hoge.png
   :figclass: align-center

この例ではalign-centerというクラスが加わり、センタリングされます。

デフォルトのテーマでは

  • align-center
  • align-right
  • align-left

が設定されていますので、お好みに応じて設定すると良いと思います。

あるいは、自分でCSSを定義しておき、好きなクラスを振ることもできます。また、空白区切りで複数書くこともできます。

classオプション

さて、このfigclass、実は他のディレクティブにも使える場合があります。

.. csv-table:: Frozen Delights!
   :class: something-special-class

   "Albatross", 2.99, "On a stick!"
   "Crunchy Frog", 1.49, "If we took the bones out"
   "Gannet Ripple", 1.99, "On a stick!"

こんな感じで例えばcsv-tableにも設定出来ます。

詳しくはディレクティブの紹介を参照してください。

classディレクティブ

上のはディレクティブに対するオプションでした。でも、たまには「このパラグラフにクラスを適用したい!」ということもあるでしょう。

そういう場合には、rst-classディレクティブを使います。

.. rst-class:: hoge

   ほげですよ

こう書くと、「ほげですよ」の部分がhogeクラスとなります。

なお、通常のdocutilsではclassディレクティブを使うのですが、Sphinxではデフォルトドメインに class ディレクティブが存在するため、このディレクティブはそのままでは使用することができません。そのため、rst-classという名前で再定義されています。

この辺はreStructuredText入門を参照してください。

まとめ

今回は表示のときにクラスを制御するというちょっとしたtipsでした。

明日は @Harrison さんです。よろしくお願いします。