化物語の予告風デザインのホームページを作った

はじめに

タイトルの通りです。
なんとなく思いついたのでそれっぽいデザインで作ってみました。
モバイル用の実装はしていないのでPCのみです。
コードの書き方とかディレクトリ構成とか色々適当なので分かりにくかったらすみません。
それぞれのページにダミーデータみたいなのを入れてあります。

GitHubにありますので良かったら。
ソースコード

こんな感じ

参考

今回作ったものの中身などは特に解説はしませんので、GitHubを見てください。
ですが、制作過程で参考にしたサイトなどを紹介します。

ブログページ関連

• マークダウンファイルをブログ記事として表示する
  • https://code-log.hatenablog.com/entry/2020/02/28/113323
• ページネーション
  • 公式ドキュメント
  • https://code-log.hatenablog.com/entry/2020/02/28/113323
  • https://rpf-noblog.com/2021-01-11/gatsby-awesome-pagination/
  • https://ryokatsu.dev/blog/2020/0524/
• 記事内のコードブロック
  • https://littlebylittle.work/2020/01/gatsby-syntax-highlighting/
  • https://nekoniki.com/blog/gatsby-syntax-highlight/

CSS

• アニメーション
  • https://qiita.com/junya/items/1347238456c88f9dc43a
• 画像の色を変える際filterでの色指定でめちゃ便利だったやつ
  • https://codepen.io/sosuke/pen/Pjoqqp
• CSS Color Code
  • https://www.colordic.org/

その他

• 画像透過
  • https://www.peko-step.com/tool/alphachannel.html
• 使用させていただいた無料画像サイト
  • https://www.silhouette-illust.com/