読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

django備忘録13 CSS with Blocks

CSS blockを使う

  • home.html 内に,以下のような箇所を作る

home.html

<style>
{% block style %}

{% endblock %}
</style>
  • base.html の、css関連の情報を読み込んだ後に、blockを挿入する。

base.html

    {% include 'head_css.html' %}

    <style>
    {% block style %}

    {% endblock %}
    </style>

みたいな感じ。

  • 例えば、lead タグのtext を中心に寄せるには、以下のような感じ、
{% 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>

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

  • 全体に反映させるには、navbar-static-top.css のような大元のcssファイルに直接書いてしまう。例えば、以下のように、
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;
}
  • で、customs.cssをhead_css.html に読み込ませる。

head_css.html

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

こんな感じ。

  • この後、collectstatic するのを忘れない。