ほわむんなブログを作った

ブログを作った

今まではてなブログであったけど、なんとなく自分で作りたいな~と思って作ってみた。

ぴくろぐ
ぴくろぐ favicon pixyslp.hatenablog.com
ぴくろぐ

はてぶでもよかったんだけど、見た目をいじるのが面倒だったり、画像の管理が面倒だったりしたのでどうせなら自分で作ってみるか~って感じで作った。

だいたい1週間掛かったか掛かってないくらい?で作れた。


書きやすいようにしたい

ブログ記事ははてぶのときもmarkdownで書いてたけど、今回もmarkdownで書けるようにしたい。

また、画像の管理も楽にしたい。

なので、記事はmarkdownで、画像はimgurにアップロードしてという形にした。

imgurはアカウント作れば管理出来るし、無限にアップロード出来るし、urlの最後の拡張子変えるだけでpngとかwebpとかに変換してくれるし、無料だし神かも。

@pixy_slpのアカウントが消えて分からなくなったぴくガもimgurに画像入れておけばよかった。

見た目

ほわむんな感じ(?)にしたかったのでフォントを変えた。大体フォント変えればなんとかなりますからね(暴論)

使ったのはZen Kaku Gothic Newってやつ。

Zen Kaku Gothic New is a contemporary Japanese gothic (san serif) typeface family. With this font, you can express fine typesetting without any professional det
Zen Kaku Gothic New - Google Fonts favicon fonts.google.com
Zen Kaku Gothic New - Google Fonts

追記(2023/09/01)

M PLUS 2にしました

M+ FONTS is a little nifty font family for everyday usage. Mplus 2 is a Sans Serif font with nine weights from Thin to Black, supporting 5,700+ Kanjis for Japan
M PLUS 2 - Google Fonts favicon fonts.google.com
M PLUS 2 - Google Fonts

あとページを移動するときにぬるっと動くようにした。

ぬるぺた。

なんか代償としてページ移動したときにテーマの変更が効かなくなるのでダークモードが消し去りました。バグ(?)が治ったら復活させるかも。

使ったもの

技術的なこと書いても興味ない人多そうだけどちょろっと書いとく。

  • Astro

大元。ブログとかに向いてるよ~んみたいな枠組み(フレームワーク)のやつ。 ぬるっと動くのもこれのView Transitonsという機能のおかげ。

Enable seamless navigation between pages in Astro with view transitions.
View Transitions favicon docs.astro.build
View Transitions
  • Tailwind CSS

見た目をいじるのが楽になるCSSフレームワーク。あとプラグインでdaisyUIを使ってる。というか見た目全部daisyUIですありがとう。

Best Tailwind Components Library - Free UI components for Tailwind CSS
daisyUI — Tailwind CSS Components ( version 4 update is here ) favicon daisyui.com
daisyUI — Tailwind CSS Components ( version 4 update is here )

そのうち追加する機能

ページネーション

現状全記事を表示してるけど、記事数増えたらとんでもないことなるのでページを追加したい。

最後に

せっかく作ったので週1くらいで更新したいね。