Bootstrap Studio
前回、Bootstrap Studioで作成した感じ間違い探しクイズをDjangoに移植し、とりあえず表示できるようにしました。
ここからそれぞれのページの修正やプログラミングをしていきましょう。
今回はindex.htmlを修正していきます。
修正点としては、前回の状態では動画が再生されなかったので、リンクの修正を行います。
現在のフォルダ構造としてはこんな感じです。
findthedifferentkanji
├── contents
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── static
│ │ └── contents
│ │ └── assets
│ │ ├── bootstrap
│ │ │ ├── css
│ │ │ │ └── bootstrap.min.css
│ │ │ └── js
│ │ │ └── bootstrap.min.js
│ │ ├── css
│ │ │ ├── Footer-Dark.css
│ │ │ ├── Navigation-Clean.css
│ │ │ └── styles.css
│ │ └── img
│ │ ├── FindTheDifferentKanji_1920x600.jpg
│ │ ├── about.png
│ │ ├── make.png
│ │ ├── play.png
│ │ ├── question.png
│ │ └── twitter.png
│ ├── templates
│ │ └── contents
│ │ ├── about.html
│ │ ├── index.html
│ │ ├── make.html
│ │ └── play.html
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── db.sqlite3
├── findthedifferentkanji
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── manage.pyそれでは始めていきましょう。
動画用フォルダの作成と動画の配置
まずは動画を保存するためのフォルダを作成していきます。
作成する場所は finthedifferentkanji > contents > static > contents フォルダ内です。
ここに新たに「video」というフォルダを作成します。
そしてその「video」フォルダ内に動画を配置します。
ということでこんな感じ。
findthedifferentkanji
├── contents
│ ├── ...
│ └── static
│ └── contents
│ └── assets
│ ├── bootstrap
│ │ ├── css
│ │ │ └── bootstrap.min.css
│ │ └── js
│ │ └── bootstrap.min.js
│ ├── css
│ │ ├── Footer-Dark.css
│ │ ├── Navigation-Clean.css
│ │ └── styles.css
│ ├── img
│ │ ├── FindTheDifferentKanji_1920x600.jpg
│ │ ├── about.png
│ │ ├── make.png
│ │ ├── play.png
│ │ ├── question.png
│ │ └── twitter.png
│ └── video <- 新規作成
│ └── FindTheDifferentKANJI.mp4 <- 配置
├── db.sqlite3
├── findthedifferentkanji
│ └── ...
└── manage.pyリンクの修正
次にindex.htmlファイル内の動画のリンクを修正します。
html内でこのような「video」のタグを探します。
<video width="65%" controls="" autoplay="">
<source src="FindTheDifferentKANJI.mp4" type="video/mp4">
</video>修正するのはこの中の「src=”FindTheDifferentKANJI.mp4″」という部分です。
ここが動画のリンク先になっていますので、このように修正します。
<video width="65%" controls="" autoplay="">
<source src="{% static 'contents/assets/video/FindTheDifferentKANJI.mp4' %}" type="video/mp4">
</video>これで動画リンクの修正は完了です。
サーバーを起動し確認してみましょう。
確かに動画が表示されるようになりました。
背景画像のリンクの修正
次に背景画像のリンクの修正をしていきましょう。
背景画像を指定している部分はこちらです。
<div class="container-fluid" style="background: url("assets/img/FindTheDifferentKanji_1920x600.jpg");height: 600px;margin-top: 72px;">ここで一つ気になるのが「"」ですが、実はこれ「ダブルクオーテーション」のことなんです。
実はここのコードではダブルクオーテーションを「style=”…”」で使用しており、さらに内部で使ってしまうとダブルクオーテーションで括られる部分が変わってしまいます。
そこで「"」を使うことで、ダブルクオーテーションで括る部分を調整しているのです。
そして修正したのがこちら。
<div class="container-fluid" style="background: url("{% static 'contents/assets/img/FindTheDifferentKanji_1920x600.jpg' %}");height: 600px;margin-top: 72px;">画像のURLである「assets/img/FindTheDifferentKanji_1920x600.jpg」の部分を「{% static ‘contents/assets/img/FindTheDifferentKanji_1920x600.jpg’ %}」にしています。
これで背景画像が表示されるようになりました。
これでindex.htmlの修正は完了です。
次回はplay.htmlの修正を行なっていきましょう。
ではでは今回はこんな感じで。
コメント