半年も経ってしまった笑

前回のブログの最後に書いた通り、html cssの基礎をがっつり学ぼうと思って
下記のサイトで勉強を始めた

無料コーディング練習所
https://webdesigner-go.com/coding-practice/

しかし本業が忙しくなってしまい、しばらく勉強できていなかった
（とは言え本業もIT関係の知識を深められる内容だったので良しとする）

年末年始休暇でやっとしっかり時間が取れるようになったので、勉強とブログを再開する。

無料コーディング練習所で、「【入門編】カフェサイト」は終わり、「【初級編】企業サイト」をやっている最中に、

「このまま一気に上級編までやり切らずに、習ったことを自分のブログでもちょいちょい適用していくのがいいのではないか？」と思いつき、久々にブログのコードを開いた


とにかくトップページのオーロラの画像が不細工なので、
その画像をトップの背景画像にすることに挑戦

「bootstrap　背景画像」で検索すると、「ジャンボトロン」というクラスの記事が多く出てくる

しかしこれはbootstrap4までで、5では削除されてしまったとのこと。

下記に5でのやり方があった
https://bootstrap-guide.com/category/jumbotron

とりあえず該当部分をコピペし、変更が必要そうな部分だけ変更

CSSも使うとのこと。
今までこのDjangoブログの開発ではcssは全く使わずに来たが、ここで出てきた

最初はblogディレクトリに置いてみたが、
画像が上手く表示されなかったので調べたところ、
CSSは静的ファイルの扱いなので、staticディレクトリに配置するとのこと。

そこで既に白くま画像などが入っているstaticに一緒に配置し、下記のように書いた

body {
padding-top:54px;
}

.bg-img {
background-image: url('./aurora.jpg');
background-size: cover;
background-position: center 60%;
}

無事ローカルで背景画像が設定できた！
この感覚ひさびさ。

あとは無料コーディング練習場で習った通り、JSファイルの読み込みはbodyタグの閉じる直前に移動した。

久々にお決まりのデプロイ作業。
ついでなので開発用サーバーの起動方法も含めておさらい。

◆開発用サーバーの起動方法
Windows PowerSellを開く
cdでプロジェクトディレクトリの仮想環境起動用ディレクトリに移動
cd C:\Dev\DjangoMyBlog\.MyBlogEnv\Scripts
仮想環境起動
./Activate
プロジェクトディレクトリに戻り、runserverコマンド
py manage.py runserver

◆（コード改修後）ローカル⇒リモートリポジトリにpush
git add .
git commit -m "ジャンボトロン的な背景画像化"
git push origin main

◆リモートリポジトリ⇒AWSにpull
プロジェクトディレクトリに移動
cd ~/pyprojects/DjangoMyBlog
仮想環境の起動
source .MyBlogEnv/bin/activate
GitHubから最新コードをpull
git pull
Gunicornを再起動
sudo systemctl restart gunicorn


本番環境を開いてみたところ、背景画像だけ表示されていなかった
CSSは静的ファイルなので、collectstaticが必要だと思い出し、下記を実行

python3.9 manage.py collectstatic

無事に表示された！



（記事からホームへ戻るボタンが無くなって不便なため、
ナビゲーションバーの「ホーム」を押すとトップに戻れるように追加変更した）



これからも「無料コーディング練習所」を進めつつ、このブログのUI改善も進めよう！