Bulmaで作成したマイクラブログをリニューアルした



こんにちは!もなかです。最近、仕事ばかりでWebの勉強がおろそかになっている気がしていました。なので、microCMSを使って新しくブログを立ち上げてみたりする中で少しWeb制作の理解が深まったのか、以前作成したブログのいまいちなところが気になってきてしまいました。(このブログも初めて作ったのでいつか変えたいけど)今回の記事ではリニューアルしたポイントなどを紹介させてください

リニューアルしたブログ


ブログの環境

  • Blogger
  • Bulma(CSSフレームワーク)
  • font awesome(アイコン)
を利用して作っています。極力、Bulmaのみで作成することを意識しています。Bloggerの仕様とかでどうにもうまくいかないところだけ、少しCSSを追加したり、JS追加したりしています。

主な変更点

  • ヘッダーをnavbarに変更
  • ロゴを作成(Canvaで適当に)
  • ブログタイトル変更(もなかのマインクラフト開拓記 → もなクラ)
  • 最新版のfont awesomeに差し替え
  • Twitterアイコン→Xアイコンに差し替え
  • 「本ページはプロモーションが含まれています」バッジを追加(記事内)
  • ラベル(tag)が目立ってたので「is-light」に変更
  • 関連記事を画像付に変更
  • Blogger側の機能で、画像の遅延読み込みとwebp変換をONにした
いい感じにそれっぽい見た目になったので一旦は満足しました。

次にやりたいこと

このブログがBootstrap4のままなので、Bootstrap5に変えたいなーと思いつつ、重い腰が上がらない状態が続いていたので、どこかで時間を見つけてリニューアルしたいなと思います。あと、マイクラブログもそろそろ更新をしたいので、久しぶりにゲームをやろうかなとも考えてます。仕事と両立がなかなか難しいけど、Web作るのもゲームも好きなので頑張るぞ