Python Django 入門トップページ

« 戻る 次へ »

Django によるコメント掲示板の開発：目次

  1. プロジェクトの作成
  2. Git でコミット
  3. Web サーバを起動しておく
  4. Config
  5. Comments アプリケーションを作る
  6. アプリケーションを有効にする
  7. はじめてのビューを作成する
  8. モデルを作る
  9. マイグレーション
  10. テストデータの設定
  11. データベースからコメント一覧を取得して表示してみよう
  12. Bootstrap の導入
  13. コメントの詳細表示
  14. urls.pyの書き方
  15. HTML のテンプレート化
  16. コメントの新規投稿
  17. コメントの編集機能を追加する
  18. さらにテンプレート化
  19. モデル，マイグレーションファイル，フォームの関連
  20. 入力内容の検証（バリデーション）
  21. コメントを削除する
  22. 一覧を逆順にする
  23. ページネーション
  24. フラッシュメッセージ
  25. Static コンテンツの設置
  26. 更新や削除にもフラッシュメッセージを表示
  27. テストの自動化を実現しよう
  28. デバッグツールバーを使う
  29. generic モジュールを使わずにコメント一覧を取得する
  30. コメント一覧のページネーション
  31. 一覧の表示順序を制御する
  32. generic モジュールを使わずにコメントの詳細を表示する
  33. コメント詳細にページ送り機能を作成する
  34. generic モジュールを使わずにコメント登録機能を作成する
  35. generic モジュールを使わずにコメント編集機能を作成する
  36. generic モジュールを使わずにコメント削除機能を作成する

Django によるコメント掲示板の開発

Static コンテンツの設置

CSS や画像などの Static コンテンツの設置方法を確認しよう．具体的には，スタイルシートを設置して，上のフラッシュメッセージのデザインを整える．

まず，comments/templates/base.html のフラッシュメッセージにスタイルを適用するために class と onclick を追加する（16行目）．さらに，HTML ファイルの先頭で Static コンテンツを有効にするための命令（1行目）とスタイルシートを読み込むためのコード（5行目）追加する． 

comments/templates/base.html
{% load static %}<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
{% if messages %}
    <div class="container">
        <div>
            {% for message in messages %}
                <p class="flash_message" onclick="this.classList.add('hidden')">
                    {{ message }}
                </p>
            {% endfor %}
        </div>
    </div>
{% endif %}
{% block content %}
{% endblock content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

comments フォルダに static/css フォルダを作成し，その中に style.css ファイルを設置する． 

comments/static/css/style.css
.flash_message {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #ffc;
    background: #417690;
}

.hidden {
    display: none;
}

もしも web サーバを起動し続けているのであれば，comments/templates/base.html の編集後に再起動しておくことを忘れないように．起動したままでは Static ファイルが有効にならない可能性が高い． 

(py39) C:\Users\lecture\Documents\django\django_comment>python manage.py runserver ⏎
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
July 27, 2022 - 13:05:26
Django version 4.0.6, using settings 'django_comment.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

もう一度，新規に投稿すると，フラッシュメッセージのデザインが変更された．また，メッセージをクリックすると，<p> タグに hidden 属性が追加されるので表示されなくなることも確認しよう．

django2022-00028

目次に戻る

« 戻る 次へ »