Bootstrap Studioを使って作成した漢字間違い探しクイズのページをDjangoに移植してみる その15:index.htmlの動画と背景画像のリンクの修正

  • URLをコピーしました!
目次

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;">

ここで一つ気になるのが「&quot;」ですが、実はこれ「ダブルクオーテーション」のことなんです。

実はここのコードではダブルクオーテーションを「style=”…”」で使用しており、さらに内部で使ってしまうとダブルクオーテーションで括られる部分が変わってしまいます。

そこで「&quot;」を使うことで、ダブルクオーテーションで括る部分を調整しているのです。

そして修正したのがこちら。

<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の修正を行なっていきましょう。

ではでは今回はこんな感じで。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次
閉じる