前回は面白く無いテストばかりでした。
今回はサイト作成にはとても重要な要素、楽しい楽しい画像やスタイルシートについてです。
情報を伝えるのに見た目ってすごく大事！
チュートリアルは６／７ページ目
はじめての Django アプリ作成、その 6 | Django documentation | Django
さいしょにpollsディレクトリにstaticディレクトリを生成します。
raspberrypi:~/draemon $ mkdir polls/static
Djangoがここから画像やスタイルシートを探してくれるのですね。
このディレクトリの中にさらにpollsを作り、その中にstyle.cssファイルを作るようです。
テンプレートと同じ構成ですね。
raspberrypi:~/draemon $ mkdir polls/static/polls
raspberrypi:~/draemon $ nano polls/static/polls/style.css
中身は
li a {
color: green;
}
だけ。
raspberrypi:~/draemon $ nano polls/templates/polls/index.html
テンプレートにstaticからスタイルシートを読み出すコードを追記します。
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}
で、サーバー起動！
raspberrypi:~/draemon $ python3 manage.py runserver 0:8000
見事に文字が緑になりました！（Djangoのスタイルだそうです）
なるほど！
次に背景画像の追加方法。
imagesディレクトリを生成します。
raspberrypi:~/draemon $ mkdir polls/static/polls/images
で、適当なgifファイルをbackground.gifとしてディレクトリ内に配置します。
raspberrypi:~/draemon $ nano polls/static/polls/style.css
の中身を編集します。
li a {
color: yellow;
}
body {
background: white url("images/background.gif") no-repeat;
}
サーバーを起動すると
あら、かわいい。
成功です。
今回はエラーも吐く事無く完了しました。（逆に気持ち悪いぐらい）
次回、最終回です。
