Djangoで、ブログ②のベーステンプレートファイルを作る

Python Django

概要

Djangoで、ブログを作るシリーズ②の一つです。ベーステンプレートファイルを作成していきます。

base.htmlの作成

base.htmlとして、次のようなテンプレートファイルを作ります。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>{% block meta_title %}NARITO DESIGN NOTE{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}デザインに関する、自分用のノートです。{% endblock %}">
    <link rel="stylesheet" href="{% static 'nblog2/style.css' %}">
    <link rel="stylesheet" href="https://use.typekit.net/vrt4lod.css">
    <script>
        (function (d) {
            var config = {
                    kitId: 'jjv2htu',
                    scriptTimeout: 3000,
                    async: true
                },
                h = d.documentElement, t = setTimeout(function () {
                    h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
                }, config.scriptTimeout), tk = d.createElement("script"), f = false,
                s = d.getElementsByTagName("script")[0], a;
            h.className += " wf-loading";
            tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
            tk.async = true;
            tk.onload = tk.onreadystatechange = function () {
                a = this.readyState;
                if (f || a && a != "complete" && a != "loaded") return;
                f = true;
                clearTimeout(t);
                try {
                    Typekit.load(config)
                } catch (e) {
                }
            };
            s.parentNode.insertBefore(tk, s)
        })(document);
    </script>
    {% block extrahead %}{% endblock %}
</head>
<body>

<header id="site-header" class="container">
    <h1><a href="{% url 'nblog2:note_list' %}">{% block title %}NARITO DESIGN NOTE{% endblock %}</a></h1>
</header>

{% block content %}{% endblock %}

<footer id="site-footer">
    <div class="container">
        <ul id="footer-link">
            <li><a href="https://twitter.com/toritoritorina/" target="_blank">Twitter</a></li>
            <li><a href="https://github.com/naritotakizawa/" target="_blank">Github</a></li>
            <li><a href="https://narito.ninja/" target="_blank">プログラミング関連のブログ</a></li>
            <li><a href="https://narito.ninja/diaries/" target="_blank">日記</a></li>
            <li><a href="mailto:toritoritorina@gmail.com" target="_blank">メール</a></li>
            <li><a href="https://github.com/naritotakizawa/django-narito-blog2/" target="_blank">ソースコード</a></li>
        </ul>
        <p>© 2019 Narito Takizawa</p>
    </div>
</footer>

</body>
</html>

難しそうに見えますが、一つ一つは単純です。上から順番に説明していきます。

まず1行目で、{% load static %}とします。のちほどcssファイルを読み込むのですが、その際にstaticというテンプレートタグを使います。staticタグを使うためには、この{% load static %}が必要なのです。

<meta charset="UTF-8">はUTF-8で書かれていることの宣言で、<meta name="viewport" content="width=device-width">はレスポンシブにするために必要な宣言です。これらはもう、考えるまでもなく記述するのが当たり前になってきましたね。

<title>{% block meta_title %}NARITO DESIGN NOTE{% endblock %}</title>は、titleタグにサイトのタイトルを指定しています。なんでblockタグで囲んだかというと、タイトルはページ毎に変更することが多いからです。他のテンプレートファイルで上書きできるようにblockタグを使っています。また、デフォルト値的な意味として、blockタグ内にはNARITO DESIGN NOTEと入れています。

その次の<meta name="description"も同様です。この2つはSEO的に重要なので、忘れないようにしましょう。

<link rel="stylesheet" href="{% static 'nblog2/style.css' %}">は、今回使うcssファイルを読み込んでいます。自分で作ったcssやjs、画像は、このように読み込みます。後程、style.cssの内容についても説明します。

<link rel="stylesheet" href="https://use.typekit.net/vrt4lod.css">は、Adobe FontsからWebフォントを読み込んでいます。その下のscriptタグも同様で、そちらは日本語のWebフォント読み込みです。日本語のようなフォントデータが大きいものは、少し特殊な読み込み方必要なのか、別の読み込み方になっています。

{% block extrahead %}{% endblock %}は、他のテンプレートファイルで<head>内に追加したい場合のための記述です。

<body>の中はシンプルですね。ヘッダーとフッターをベーステンプレートファイルで定義しつつ、メインコンテンツは{% block content %}{% endblock %}としておき、各テンプレートファイルで上書きできるようにしています。

style.cssの作成

アプリケーション内にstaticディレクトリを作り、中にnblog2ディレクトリを作り、そしてstyle.cssファイルを配置します。テンプレートファイルと同様の流れです。置き場所をカスタマイズしたい方は、好きにしてください。style.cssの中身は、次のようにします。

@charset "UTF-8";
/* 共通設定 */
* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1;
  font-family: gill-sans-nova, noto-sans-cjk-jp, sans-serif;
  font-size: 14px;
  color: #333;
  font-weight: 400;
}

h1, h2, h3 {
  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 1024px) {
  body {
    font-size: 16px;

  }

  h1, h2, h3 {
    font-size: 16px;
  }
}


a {
  color: #1a0dab;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


img {
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 5px #ccc;
}

li {
  margin: 12px 0;
}


/* コンテナ */
.container {
  padding: 0 10px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .container {
    padding: 0 50px;
  }
}

@media (min-width: 1366px) {
  .container {
    width: 1366px;
    margin: 0 auto;
  }
}

/* ヘッダー */
#site-header {
  margin-top: 200px;
  margin-bottom: 200px;
  text-align: center;

}

#site-header h1 {
  font-size: 26px;
  letter-spacing: 5px;
}

#site-header a {
  color: #333;
}

/* フッター */
#site-footer {
  padding: 1em 0;
  margin-top: 200px;
  text-align: center;
  background-color: #000;
  color: #fff;
}

#site-footer > p {
  font-weight: bold;
}

#footer-link {
  list-style-type: none;
  padding: 0;
}

#footer-link li {
  display: inline-block;
  margin-left: 1em;
}

#site-footer a {
  color: #fff;
}

bodyのスタイルから見ていきます。

line-height: 1は、行間や空間の高さを1にしています。ざっくり説明すると、例えばh1はデフォルトでfont-sizeが32pxですが、実際はline-heightでの行間の値...1.2とか1.3とかの値が加味され、要素の高さは32*1.2と言った高さになります。マージンを厳密にとるようなデザインだと、このline-heightで作られる空白が、少々面倒なことがあります。なのでline-height:1として、全ての要素の高さをfont-sizeと同じにしています。ここから、必要な要素だけline-heightを個別に設定します。

font-family: gill-sans-nova, noto-sans-cjk-jp, sans-serif;は、今回読み込んだWebフォントを使っています。Gill Sans NovaとNoto Sans CJK JPです。これは結果的に、アルファベットにはギルサンが、日本語にはノトサンが使われるようになります。このように和文と欧文で別のフォントを使うこともよくあります。

font-size: 14px;はデフォルトのフォントサイズの指定ですね。その後の@media (min-width: 1024px) {にも書いているとおり、1024pxまでのときだけフォントサイズが14px、それ以上では16pxになります。小さい画面では14pxということです。

color: #333は、#000の色は白背景に対してコントラストが強すぎる場合があるので、少し薄めた黒をデフォルトで使っているということです。

font-weight: 400;は、フォントの太さですね。Webフォントの読み込み方によっては、デフォルトのフォントの太さが通常よりも細目とか太目のフォントになっていることもあります。今回は400と書くことで、400のウェイトのフォントを読み込んでいることを明示しています。なくても動作的には変わらないです。

次にh1, h2, h3の設定です。これは、今回見出し要素のフォントサイズを14px、画面幅が1024px以上のときは16pxにしている、という内容です。見出し要素は通常もっと大きくするのが一般的ですが、今回は敢えて小さくして、周りの余白を使って目立たせるというデザインをしている為です。

a要素の設定では、リンク色を#1a0dabにして、下線をなくし、ホバー時に下線を表示するようにしています。よく見る。

img要素には、画像を親要素か、自身のもともとのサイズまで拡大するような指定をしています。つまり、どんなに大きい画像を使っても、親要素に合わせて表示されるということです。height: auto なので、縦横比も崩れません。box-shadow: 0 0 5px #ccc;で影をつけていますが、これをしないと、画像の隅っこに白い色があった場合に、ページが白背景だと区別つかなくなるので、画像をちょっと浮かせて境界をハッキリさせています。borderとかで線をつけるのもよく見ます。

li要素では、上下に12px程度のマージンをとっています。line-heightを1にしたこととも関係あるのですが、リストはそのままだと詰まって見えがちです。特に、リスト項目をリンクにしたい場合なんかだと、詰まっててクリックしづらい、ってことがあります。そういったことが起こりがちなので、上下の余白を多くしてゆったりさせています。

containerクラスは何かというと、画面幅に応じてコンテンツの幅を設定しています。小さい画面では左右に10pxや50px程度の余白だけ取ってコンテンツを表示して、大きい画面では、画面幅全部使うとデザイン的に難しい場合があるので、コンテンツ幅を1366px(正確には1266px)にしているということです。この場合、1920pxとかのモニターで見ると、左右が結構開いている感じになります。

残りは、ヘッダー部分とフッター部分のスタイルを設定しています。

Relation Posts

Comment

記事にコメントする

まだコメントはありません。