the dawn of yuriko hisory

アニメやら漫画関係で何か作りたいものと勉強したことのメモ用

DjangoGirlsに挑戦 ～CSSでカワイくしよう～

Django Python

CSSでカワイくしよう

カワイ←ここのカタカナがちょっとイラッてなるよね

BootStrap

BootStrapで作ったサイトはBootStrapで作ったんだなと
まあわかってしまうので、デザイン的に好まない人もいそうですが
デザインに深くこだわらなく画面周りを手早く作るならやっぱり使うべきですよね。

djangoのフォーム用にdjango-bootstrap-formとかあったり

pip install django-bootstrap3

普通にpipからインストールしてしまう方法もあるけど
公式のCDNを使ってるのでそのままCDNを使います。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

<! -- ここから -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<! -- ここまで -->

</head>
<body>
  <div>
    <h1><a href="">the dawn of yuriko hisory</a></h1>
  </div>
  {% for post in posts %}
    <div>
      <h1><a href="">{{ post.title }}</a></h1>
      <p>{{ post.text|linebreaks }}</p>
      <p>書いた人: {{ post.author }}</p>
    </div>

  {% endfor %}
</body>
</html>

https://i.gyazo.com/5c1c5c6102738eef47e5013d66623af7.png

蒼くなってますね。

何やってるかを確認してみると、タグに色指定してくれています。
[https://i.gyazo.com/5ca4a5be4a9f23ec5c63fe9da2287727.png:image=https://i.gyazo.com/5ca4a5be4a9f23ec5c63fe9da2287727.png]



BootStrapについては流行っているので日本語の記事いっぱいでてきます。

[http://www.venezia-works.com/edu/index.php:title]ひな形の作成なんかはこういったサイトを使うとより楽できますね。(※Chromeでは使えません)

静的ファイル

静的ファイル中々苦戦しました
しかもデプロイするとまたそれはそれで色々と設定しなきゃいけないらしくほんと静的ファイルマジやばい

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static'])) // 1

STATIC_URL = '/static/' //2

1.
STATIC_ROOTは読んでそのままだけどstaticフォルダまでのルートです
デバッグで確認したら
posixpath.join(*(BASE_DIR.split(os.path.sep)
こいつがプロジェクトまでの道のりでその後に静的ファイルが置いてあるフォルダで['static']で指定しているっぽい

アプリケーション側にSTATICフォルダを作って試してみたけど
ちゃんと読み込まれます。ただ、project/app/static/css/hoge.css
みたいな形でおいても
project/static/css/hoge.css　にファイルがコピーされてます。
ただDjangoGirlsの通りにproject/static/css/hoge.cssだけ作成しても
どうもファイルを探してくれていないのでアプリケーション側に実装でいいのかな？
今回はアプリケーション配下にcssファイルを実装
マジで静的ファイルのとりあつかいdjangoはめんどくさすぎる
ここだけは本当にDjango嫌い

2.
これはURLの指定先がstatic/以下　になるってことだよね、たぶん
URLルートの作成をしてくれているはず
gyazo.com

/app
├templates #追加
└static
    └css
      └blog.css

読み込まれていることを確認して
https://i.gyazo.com/d8979c82d9192dd873e76373446edb77.png

CSSを記述

h1 a {
    color: #FCA205;
}
body {
    padding-left: 15px;
}

HTMLファイルの先頭に以下を追加

{% load staticfiles %}

これは静的ファイルを読み込ませるための者です。

これでCSSはOK反映できました。
静的ファイルの取り扱いはもう少し勉強する必要がありますが。
gyazo.com

後はチュートリアル通りCSS書いていくだけです。
その部分はDjango関係ないので飛ばしていきます。
コピペでいいんですよコピペで

大体こんな感じになってればいいと思います。
DjangoGirlsのCSSの通りにやってもDjangogirlsの画面通りにならない気がする
CSSの指定怪しくない？
gyazo.com

以下HTML

{% load staticfiles %}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
  <div class="page-header">
    <h1><a href="">the dawn of yuriko hisory</a></h1>
  </div>
  <div class="content container">
      <div class="row">
          <div class="col-md-8">
              {% for post in posts %}
                  <div class="post">
                      <div class="date">
                          書いた人:{{ post.author }}
                      </div>
                      <h1><a href="">{{ post.title }}</a></h1>
                      <p>{{ post.text|linebreaks }}</p>
                  </div>
              {% endfor %}
          </div>
      </div>
  </div>
</body>
</html>

とりあえずこれで静的ファイルの取り扱いは終わりです。
実際に何か作成するときにもっと考えることがありそうですが。