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

Python Django

概要

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

base.htmlの作成

今回、Djangoアプリケーション名はnblog1です。narito-blog1の略です。アプリケーション内にtemplatesディレクトリを作り、nblog1ディレクトリを作り、その中にbase.htmlを作りましょう。テンプレート用のディレクトリを変更したい方、例えばプロジェクト直下にtemplatesを置きたい方などは、お好きにしてください。

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="{% block meta_keywords %}Python,Django,プログラミング,ブログ{% endblock %}">
    <meta name="description" content="{% block meta_description %}Python/Djangoを中心に、プログラミングのメモや備忘録、チュートリアルを書いています。{% endblock %}">
    <title>{% block meta_title %}Narito Blog{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'nblog1/css/style.css' %}">
    <link rel="stylesheet" href="https://use.typekit.net/wfe6byb.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>

<main>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</main>

<footer id="site-footer">
    <div class="container" id="footer-container">
        <p id="copyright">© 2019 Narito Takizawa.</p>
    </div>
</footer>

</body>
</html>

子テンプレートでの上書き用に、{% block %}タグを幾つか使っています。それ以外はシンプルです。12行目のscriptタグ部分ですが、ここは日本語フォントの読み込みを行っています。Adobe Fontsでは、日本語のWebフォントを読み込む際にこんな書き方になるのです。

Bootstrap4やBulmaといったCSSフレームワークは使っていません。ちょっとCSSの記述が多いので、style.cssというファイルに書くことにします。アプリケーション内にstaticディレクトリを作り、中にnblog1ディレクトリを作り、そしてstyle.cssファイルを配置します。テンプレートファイルと同様の流れです。置き場所をカスタマイズしたい方は、好きにしてください。style.cssの中身は、今後書いていきます。

そして、テンプレートファイル1行目で{% load static %}とし、それを実際に使って{% static 'nblog1/style.css' %}と書いています。これが、Djangoで静的ファイルを利用する際の流れです。

CSSの基本設定

style.cssの中身を、次のようにしておきます。

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

body {
    line-height: 1;
    color: #333;
    font-family:  neue-haas-grotesk-text, noto-sans-cjk-jp, sans-serif;
    font-size: 14px;
}


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

a {
    text-decoration: none;
    color: #00809d;
}

a:hover {
    opacity: 0.5;
    text-decoration: underline;
}

p {
    line-height: 1.75;
}


/*
ユーティリティー
*/
/* コンテナ */
.container {
    margin: 0 10px;
}

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

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


/* メインコンテンツ */
main {
    padding: 48px 0;
    min-height: 40vh;
}


/* フッター */
#site-footer {
    background-color: #00809d;
    padding: 48px 0;
    color: #fff;
}

まず、全ての要素のmarginを0にしておきます。ブラウザの標準の設定が使いづらかったり、各ブラウザで設定値が違うこともあるため、このように設定をリセット・統一することはよくあります。paddingも0にしたりとか、色々とやり方はありますが、marginぐらいは全て0にしておいたほうが、使いやすいです。

body要素には、フォントの種類とサイズ、色を指定しています。欧文フォントはNeue Haas Grotesk(Helveticaと似たもの)で、和文フォントはNoto Sans CJK JP、フォントサイズは14pxがデフォルトで使われるようになります。色の#333は、すこーしだけ薄くなった黒です。#fffのような純粋な白と合わせるときは、こういう少し薄めた黒のほうが目に優しいと、もっぱらの評判です。また、マージンの計算もしやすいように、line-heightを1にしています。

@media (min-width: 768px)部分は何かというと、このサイズはiPad(縦)とかが当てはまります。これより大きい場合は基本となるフォントサイズを16pxにしています。つまり、横幅の大きい画面では文字サイズも大きくするということです。

a要素への設定は、リンクの下線をなくすようにして、#00809dという緑っぽい青色にし、マウスホバーのときに少し透明にする、という設定です。

p要素は、行間を気持ち広め、line-heightを1.75にしておきます。

containerは、コンテンツ幅の設定です。日記サイトでも解説していますが、このようなクラスはよく使います。

メインコンテンツ部分となるmain要素と、フッターのfooter要素は上下に48pxの余白を付けています。また、main要素は最低でも40vhの高さは持たせます。ブラウザや画面の高さの4割のことですが、このぐらいの高さを持たせておかないと、表示データ数が少ないときとかに、格好悪くなります。

フッターにはリンクにも使っている色を背景色として、中の文字は白にしていますね。

Relation Posts

Comment

記事にコメントする

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