【ブログのデザイン変更】PCの表示幅を小さくしました。
2023/1/21
2023/1/21
ブログのデザインを少し変更しました。今回はその変更点や変更理由・背景などをメモとしてまとめてみました。
今回の変更点
PCでサイトを表示する時の、記事や一覧カードなどを表示しているページの横幅の最大値を小さくしました。
（※「max-w-5xl：1024px」→「max-w-4xl：最大896px」に変更）
変更の背景
PCで記事を読む場合、横幅が大きいことで一行あたりの文字数が多くなって読みにくくなっている印象がありました。
表示の横幅を小さくすることで、読みやすさが向上すると思い変更しました。
変更による影響
記事の最大横幅が小さくなったことで、両端部分の余白が大きくなりました。
今後このスペースにSNSシェアボタンを追加したり目次を追加したりして、より記事の読みやすさを上げる方法がないかを考えます。
まとめ
今回初めてブログデザインの変更点をまとめてみました。小さな変更でも改めて変更意図などを振り返ると反省点が見つかったり今後の改善点が見えたりしてよかったです。
ページのデザインは記事の読みやすさに大きく影響すると思うので、今後も気づいたところから少しずつ改善していきます！
最近の記事
音楽生成AI「Suno」の使い方まとめ！作詞作曲が簡単にできる？
簡単に曲が作れるAIということでよく聞く「Suno（Chirp）」についてまとめました。
目次「Suno」とはテキストからさまざまな音声を生成する「Bark」歌詞から曲を生成する「Chirp」...
2023/11/24
2023/11/24
【Open AI】APIの料金まとめ｜GPT・DALL·E・Whisperなど
Open AIのAPI（一部）の料金をまとめました。
参考のために日本円は「1ドル150円」で換算をしています。
目次Text generation: テキスト生成Assistants ...
2023/11/22
2023/11/22
【Next.js】Assistants APIの基本的なコードまとめ。
Open AIの「Assistants API」をNext.jsで使用する時の基本的なコードをまとめました。
目次Open AIのAPIセットアップ基本の使い方Threads: スレッドを作る...
2023/11/21
2023/11/21
【Next.js】Open AIのAPIでファイルをアップロードする方法。
今回は、Next.jsサイトからOpen AIのAPI（Upload file）で、ファイルをアップロードする方法を実装するのに時間がかかったのでその過程と最終コードをまとめます。（Vercelにデ...
2023/11/21
2023/11/22
「生成系AIのWEBプロダクトTOP50」をまとめてみる。
Andreessen Horowitzが出している記事で紹介されている「AIプロダクトの月間訪問者数ランキングTOP50」のサービスをまとめました。
目次ChatGPTcharacter.ai...
2023/10/3
2023/10/3
【Next.js 13】NextAuth+FireStoreにユーザー情報を保存する。
今回は、以下の3つをNext.js 13で実装するためのメモです。
Googleアカウントでログインできる
アカウント、セッション情報をFirestoreに保存する
サーバーサイ...
2023/7/12
2023/7/12