はてなブログからAstroに移行して、ひとまず記事が見られる状態にはなりました。
ただ、実際に触ってみると「記事一覧が微妙」「目次がサイドバーにかぶる」「共有ボタンが変なところに出る」みたいな細かい問題が結構ありました。
今回はそのあたりを、運用しながら直した内容のメモです。
移行してよかったところ
はてなブログは書くだけならかなり楽ですが、細かく調整しようとすると限界がありました。
Astroに移行してよかったのは以下です。
- 記事一覧の見た目を自由に変えられる
- タグ別ページや月別ページを自分の好きな形で作れる
- OGPやfaviconなどのサイト情報を管理しやすい
- 余計なスクリプトを減らしやすい
- 画像や目次まわりを記事に合わせて調整できる
特に、記事一覧をメインページにできたのはかなりよかったです。
はてなブログ時代の雰囲気は残しつつ、https://necco.tech/smartphone/ みたいにカテゴリーごとの一覧ページとして自然に見られるようにしました。
まず記事一覧をメインにした
最初はアーカイブページっぽい扱いになっていて、トップページなのに少し遠回りな感じがありました。
そこで、トップページ自体を記事一覧として使うようにしました。
やったことは以下です。
- トップページを記事一覧に変更
- アーカイブ専用ページは削除
- タグをクリックしたときだけ絞り込みページを表示
- 月別アーカイブも単独ページとして表示
- 「検索結果: 〇〇」のような不要な文言を削除
ブログは結局、最初に記事が見えたほうがわかりやすいです。
変に説明ページを挟むより、記事タイルを並べてすぐ読める形にしました。
目次まわりを直した
移行後に一番気になったのが目次です。
記事本文の目次とサイドバーの目次で見た目が違ったり、右側のプロフィール欄にかぶったりしていました。
調整した内容は以下です。
- 記事ページでは右側にサイドバー目次を表示
- ある程度スクロールしても目次が残るように固定
- 画面幅が狭いときは無理に固定しない
- 見出しがないページでは目次を非表示
- 記事内の目次デザインは前の見た目に近い形へ戻した
目次は便利ですが、邪魔になった瞬間にかなり読みにくくなります。
なのでPCでは追従、スマホでは通常表示という感じにしています。
画像レイアウトの修正
移行した記事の中には、はてなブログ時代のHTMLがそのまま残っているものがあります。
画像が縦に積まれたり、余白が大きすぎたりすることがあったので、2枚並びの画像はそれっぽく戻しました。
その分、自分で見るところも増えたので、記事を書く流れとサイト調整の流れをちゃんと決めていきたいです。
まとめ
Astro移行は、ただ記事を持ってくるだけならそこまで難しくないです。
ただ、読みやすいブログとして運用するなら、記事一覧・目次・共有ボタン・favicon・画像レイアウトあたりはちゃんと見たほうがいいです。
移行後に気になった部分を少しずつ直していくと、はてなブログ時代のよさを残しつつ、自分のサイトとしてかなり扱いやすくなります。