##############################################################
sphinxのカスタマイズ (2) - _static/custom.css - 
##############################################################

* sphinxは、CSSのテンプレートに従って、HTMLを装飾する．

  
=========================================================
custom.css の準備
=========================================================

* CSSテンプレート、  :red:`custom.css`  を **"source/_static/"** 以下に作成する．
* ここにカスタムテンプレートを作成、追記していく．
*  :blue:`conf.py`  に以下を追記して、読み込み設定する

.. code-block:: python
   
   html_static_path = ['_static']
   html_css_files = [custom.css]

|

=========================================================
外観スタイルの変更
=========================================================

例えば、

.. code-block:: css
   :linenos:
                
   cite, code, tt {
     font-family: "Ricty";
   }
   pre {
     font-family: "Ricty";
   }


によって、リテラルブロック内のフォントを変更できる．
使用可能なフォント名については、::

  $ fc-list | grep -i xxxx

などで調べられる．

|

=========================================================
ロールの追加
=========================================================

---------------------------------------------------------
やりたいこと
---------------------------------------------------------

* :blue:`独自のロール` （文中で装飾をつける機能）が設定可能．
* 赤文字やフォント変更など、打ち消し線が作れる．

|

---------------------------------------------------------
やること
---------------------------------------------------------

1. "." (ドット) + "ロール名"で  :blue:`css クラスを定義` する(custom.css) ．
2. conf.py の中のroles（リスト）に、ロールの名前を追記する．( "." (ドット)以下の名前 )

|

---------------------------------------------------------
記載例 (0) ( conf.py 内 )
---------------------------------------------------------

.. code-block:: python

   roles = ['strike', 'red', 'blue', 'ricty']


|

---------------------------------------------------------
記載例 (1) ricty フォントへの置き換えロール
---------------------------------------------------------

.. code-block:: css
   :linenos:
                
   .ricty {
     font-family: "Ricty", monospace;
   }

---------------------------------------------------------
記載例 (2) 打ち消し線
---------------------------------------------------------
      
.. code-block:: css
   :linenos:
                
   .strike {
     text-decoration: line-through;
   }


---------------------------------------------------------
記載例 (3) 色文字
---------------------------------------------------------
      
.. code-block:: css
   :linenos:
                
   .red {
     color: red;
   }
   .blue {
     color: blue;
   }

|