DreamerDreamのブログ

夢想家の夢です。〜揚げたてのモヤっとしたものをラフレシアと共に〜

Django奮闘記⑨百聞は一見にしかずーstaticディレクトリー

前回は面白く無いテストばかりでした。 

dreamerdream.hateblo.jp

 

 

今回はサイト作成にはとても重要な要素、楽しい楽しい画像やスタイルシートについてです。

情報を伝えるのに見た目ってすごく大事!

チュートリアルは6/7ページ目

はじめての 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のスタイルだそうです)

f:id:DreamerDream:20180905141804p:plain

なるほど!

 

次に背景画像の追加方法。

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;
}

サーバーを起動すると

f:id:DreamerDream:20180905143033p:plain

あら、かわいい。

成功です。

 

今回はエラーも吐く事無く完了しました。(逆に気持ち悪いぐらい)

 

 次回、最終回です。

dreamerdream.hateblo.jp