CSS blockを使う

home.html

<style>
{% block style %}

{% endblock %}
</style>

base.html

    {% include 'head_css.html' %}

    <style>
    {% block style %}

    {% endblock %}
    </style>

みたいな感じ。

{% block style %}
.lead {
    text-align: center;
}
{% endblock %}

という感じで、cssの設定ができる。

<style>
{% block style %}
.text-align-center {
    text-align: center;
}
{% endblock %}
</style>

とtext-align-centerを設定しておいて、

<p class='lead text-align-center'>{{ title }}</p>

と表示することで、同じことを表現できる。

*これは結構便利かもしれなくて、

<style>
{% block style %}
.text-align-center {
    text-align: center;
    color: red;
}
{% endblock %}
</style>

とかで、文字のカラーとかも変更できる。

body {
  min-height: 2000px;
}

.navbar-static-top {
  margin-bottom: 19px;
}

.text-align-center {
    text-align: center;
}

記載すると、text-align-center　を持つタグは、全部に適応されるようになって便利かも。globalで設定しておくものはこちらに記載するようにしよう。

ここでちょっとハマったポイント。 static_root　の方のnavbar-static-top.cssを直接、編集してしまい、localのnavbar-static-top.cssが更新されていなくて、cssが反映されないという現象が発生。 staicfileは、必ずlocalを編集→collectstaticで、デプロイ用にコピーするというのを肝に命じる。
さらに一歩進んで、 navbar-static-top.css に直接ではなく、customs.cssというファイルを作って、そこにカスタムcssを書き込むという方法もあり。

customs.css

.text-align-center {
    text-align: center;
}

head_css.html

<link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'css/customs.css' %}" rel="stylesheet">

こんな感じ。

Djangoroidの奮闘記