①Bootstrapテンプレートを利用する
https://startbootstrap.com/themes/one-page-wonder/
からダウンロード
[プロジェクト名]/static/下に[vendor、img、css]フォルダーごとコピーする
②静的ファイル（static下のファイル）のパスを追加する
[プロジェクト名]/settings.pyの変更
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
③各ページ共通のベーステンプレーの作成
[アプリケーション名]/templates下にbase.htmlを作成する
<!-- loadタグをを使いstaticタグを使えるようにする -->
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- 各ページのタイトルをここに埋め込むための記述 -->
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS staticタグを使った相対パスの記述 -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Custom styles for this template staticタグを使った相対パスの記述 -->
<link href="{% static 'css/one-page-wonder.min.css' %}" rel="stylesheet">
<!-- My style staticタグを使った相対パスの記述 -->
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
<!-- 各ページ固有のhead情報を埋め込むための記述 -->
{% block head %}{% endblock %}
</head>
<body>
<!-- フッターを最下部に固定するためのdivを追加する（独自CSSスタイル） -->
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
<div class="container">
<!-- ナビゲーションバーに表示するリンク、urlタグを使ってURLを逆引きしている -->
<!-- 'diary:index' はdiaryアプリケーションにあるurls.pyでindexという名前のルーティング参照する意味 -->
<a class="navbar-brand" href="{% url 'diary:index' %}">PRIVATE DIARY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<!-- ナビゲーションバーをクリックした際に文字色をかえるBootstrap効果 -->
<!--各ページのテンプレートでactiveというテキストを使って実現する -->
<li class="nav-item {% block active_inquiry %}{% endblock %}">
<a class="nav-link" href="{% url 'diary:inquiry' %}">INQUIRY</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 各ページのテンプレートで必要に応じてヘッダーをここに埋め込むための記述 -->
{% block header%}{% endblock %}
<!-- 各ページのテンプレートでコンテンツをここに埋め込むための記述 -->
{% block contents%}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-black">
<div class="container">
<p class="m-0 text-center text-white small">Copyright © Private Dairy 2019</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript ライブラリーの読み込み -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</div>
</body>
</html>
④独自CSSスタイル定義のファイルを作成する
[プロジェクト名]/static/css/mystyle.css
body, #wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
footer {
margin-top: auto;
}
.my-div-style {
margin-top:6rem; # 直ぐには反映されないようです（一定期間が必要か？）
}
⑤トップページを作り変える
[アプリケーション名]/templates/index.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Web上にあなた専用の日記ページを保存できるサービス | Private Diary{% endblock %}
{% block header%}
<header class="masthead text-center text-white">
<div class="masthead-content">
<div class="container">
<h1 class="masthead-heading mb-0">Private Diary</h1>
<h2 class="masthead-subheading mb-0">あなた専用の日記保存サービス</h2>
<a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">LOG IN</a>
</div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>
{% endblock %}
{% block contents %}
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="{% static 'img/001.jpg' %}" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">Web Diary</h2>
<p>Web上で作成/編集/削除ができる日記</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="p-5">
<img class="img-fluid rounded-circle" src="{% static 'img/002.jpg' %}" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="p-5">
<h2 class="display-4">Save Your Diary</h2>
<p>あなたの日記をWebに保存</p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="{% static 'img/003.jpg' %}" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">Membership System</h2>
<p>会員制のWeb日記サービス</p>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
