4. HTMLのカスタマイズ¶

4.1.1. 静的CSS/JSのカスタマイズ¶

• CSSのカスタマイズ : 見出しに顔文字を入れてます。

  ソースコード番号 - 4.1.1 /_static/mycustom.css¶

  // test
  h1:before {
    content: "(^o^)章";
  }
  
  h2:before {
    content: "／(^o^)＼節";
  }
  
  h3:before {
    content: "(´・ω・｀)項";
  }
  
  h4:before {
    content: "(；ﾟДﾟ)項";
  }
  

• JSのカスタマイズ : console.logを見てみてください。

  ソースコード番号 - 4.1.2 /_static/mycustom.js¶

  // test
  console.log('mycustom.js');
  

上記CSS/JSは、conf.pyにて以下のように読み込んでます。

def setup(app):
  app.add_stylesheet('mycustom.css')
  app.add_javascript('mycustom.js')

4.1.2. layout.htmlのカスタマイズ¶

テーマの方でlayout.htmlに用意済みのblockや変数などは、/_templates/layout.html で元のlayout.htmlを継承してカスタマイズできる。

{% extends "!layout.html" %}

{%- block extrahead %}
{{ super() }}
<!-- my custom "_template/layout.html" extraheader beacon -->
{%- endblock%}

{% block footer %}
<!-- my custom "_template/layout.html" footer beacon -->
{{ super() }}
{% endblock %}

ただし、当然テーマの方で用意していないblockは埋め込めない。同じテーマでも、バージョンによって新しいblockが追加されていたりするので、もし新し目のlayout.htmlカスタマイズ記事の通りにしても「あれ？このblockが展開されない・・・」となった場合は、インストールしているテーマのバージョンが古い可能性がある。

4.2.1. mytheme1 テーマのファイル内容¶

[theme]
inherit = sphinx_rtd_theme
stylesheet = main.css

[options]
myval1 = hello
myval2 = world
myval3 = good night

{% extends "sphinx_rtd_theme/layout.html" %}

{% set script_files = script_files + [ "_static/mytheme.js" ] %}
{% set css_files    = css_files    + [ "_static/mytheme.css" ] %}

{%- block extrahead %}
{{ super() }}
<!-- my theme custom extrahead beacon -->
{%- endblock%}

{% block footer %}
<div id="mytheme_common">
  <p>my theme, {{ theme_myval1 }}, {{ theme_myval2 }} - {{ theme_myval3 }}</p>
</div>
{{ super() }}
{% endblock %}

/* load sphinx_rtd_theme css */
@import url('css/theme.css');

p.mytheme {
  border: 1px solid black;
  margin: 30px;
  padding: 30px;
}

.mytheme li {
  font-size: large;
  color: red;
  font-weight: bold;
}

// test
console.log("mytheme.js");

4.2.2. mytheme1 のCSSクラスを使ってみる¶

↓main.cssで定義した p要素の mytheme classを使用 .. rst-class:: mytheme

ああああああああああ いいいいいいいいいい うううううううううう

えええええええええええええ おおおおおおおおおおおおおお

↑ここまで。

ABCDEFG ABCDEFG ABCDEFG ABCDEFG

↓main.cssで定義した p要素の mytheme classを使用

• item1
• item1
• item1
• item1

↑ここまで。