皆様ごきげんよう、今回はstaticフォルダ内に設置した画像ファイルの参照方法について書き残しておきます。前回投稿した記事の補足情報になります。

必ず入れるコード

staticフォルダ内の画像やcssファイルを利用するhtmlでは必ず事前に宣言が必要です。記載する場所はhtmlの一番最初の行。※必ず一行目でなくてはならないわけではない。

{% load static %}

画像を指定する方法

画像を指定するには、以下のようにimgタグの中に{% static “ファイル名” %}を入れ込む必要があります。※staticフォルダの中に、imgフォルダを作成してその中に画像を置いています

<img src="{% static "img/titlelogo.png" %}" width="370" height="190"/>

CSSファイルを指定する方法

画像の時と同様に、cssファイルも{% static “ファイル名” %}を入れ込む必要があります。

templatesフォルダ内に、css.htmlなどを作成して以下のコードを記載（htmlの<header></header>の中に以下コードを入れておく）。

<link rel="stylesheet" href="{% static "css/navigator.css" %}">

CSSファイルの動作確認

CSSファイルに修正を加えた後、起動中の仮想サーバーを起動しなおす必要があります。その為、現在起動している仮想サーバーはCTR＋Cで停止させて、再度以下のコマンドで起動。※PCスペックによるかもしれませんが、私の場合はCSS変更が反映されるのに少し時間がかかります。一定時間が過ぎてリフレッシュすると反映。

python .\manage.py runserver

複数のHTMLに同じ内容を記載する場合の記述方法

たとえばcopyrightなどの部分を複数のhtmlに記述する場合、毎回同じように書くのは面倒。そこで利用できるテクニックがあります。staticフォルダ内に、_ファイル名.htmlという名前でhtmlを作成し、その中に共通する部分のhtmlのみを書きます。

例： _copyrights.html　というファイルをstaticフォルダ内に作成。そしてファイルの中には通常のhtmlのように記述して、その他htmlで読み込む祭には以下の形式で行う。

.
.
.※上のコードは省略
</body>
{%include "_copyrights.html" %}
</html>

共通テンプレートを使いたい場合

共通テンプレートを利用する事も可能。その場合はベースとなるhtmlを作成して、以下のように共通テンプレートを利用したいhtml（例：about.html）の最初の行に宣言する。

{% extends "共通テンプレート.html" %}

また共通テンプレートとなるhtmlの中には、利用するhtmlによって修正を加えられる箇所も指定が可能です。

{% block ブロック名 %}
テスト　テスト　テスト
{% endblock %}

例：たとえばabout.htmlに対して共通テンプレートを利用する場合、about.htmlの最初の行には・・・

{% extends "共通テンプレート.html" %}

{% block main %}
<h1>About</h1>
{% endblock %}

このように記載して、各htmlに紐づく情報を盛り込む事が可能です。