ブログのデザインをリニューアルしました（Bootstrap5）
本ページはプロモーションが含まれています
こんにちは！もなかです。メインブログをリニューアルしました。このブログは初めての自作テンプレで作ったブログでして、いろいろ試行錯誤しながら作ったので、（いい意味で）味があって気に入っていたのですが、Bootstrap 4を使い続けていたのが気になっていました。すでにBootstrap 5がでてそれなりの時間が経つので思い切って切り替えてみましたのでそのメモです。
主な変更点
【変更前】- Bootstrap v4.5.0
- Bootstrap Icons v1.4.0
- 人気の投稿ウィジェット
- SNSをバッジで表現（サイドバー＋記事内）
【変更後】
- Bootstrap v5.3.2
- Bootstrap Icons v1.11.3
- 人気の投稿ウィジェットを廃止（多分自分くらいしかみない）
- SNSをボタンで表現（サイドバー＋記事内）
- はてブボタンを記事内に追加
- Bootstrap関連のJSを削減
- 関連記事機能を追加
- 運営サイトウィジェットを追加
- TOPやアーカイブページの記事一覧の左上にラベル表示を追加
- カードのデザインを若干変更
- 「本ページはプロモーションが含まれています」バッジの追加
苦労した点
Bootstrap4→Bootstrap5への移行時の課題に直面した感じです。class名が変わっていて再度書き直しになるところがいくつかありました。例えば余白のmarginですが、右側に余白を取りたい場合、
【Bootstrap4】
mr-3
【Bootstrap5】
me-3
のように変わっていたりしたので、そこを書き換えるのが苦労しました。Bloggerの独自タグ周りも難しく、相変わらず手付かずのところもいくつかありますが、主要なページの見た目はなんとかうまくいった感じです
工夫した点
ChatGPTを活用しています。ChatGPTはBootstrapやBloggerのことも学習しているのか、やりたいことを指示すると、それなりのコードを出力してくれました。改修スピードが大幅に上がりました。あとは自分で少し手直しするだけで完成したので、昔かなり苦労してカスタマイズしていたのが、それほど時間をかけることなく作ることができました（といっても仕事や子育てのスキマ時間でやって、1ヶ月くらい使っていますがｗ）
たとえば以下のキャプチャのような感じでやってました
before
変更前はこんな感じでした。今の見た目とそれほど変わらないですけどねｗ
次にやりたいこと
自分が管理しているサイトのカスタマイズをがつっと３サイトくらいやったので、満足しました。自分でhtml書いて形にするのは楽しいですね。苦労して作ったサイトなのでさらに愛着が湧きました。
カスタマイズが落ち着いたのでそろそろ記事も書くように頑張りたいと思います。最近、NISAを始めたのですが現在大損してまして、自虐の記事を書いたら面白いかもですねｗ
このブログは雑記ブログなので特にテーマもなく、気になったことや思いつきで書くことが多いと思いますが、引き続きお付き合いいただけると嬉しいです。
