⚒️
Next.jsでグリッド背景のスタイル設定＋α【個人開発記】
はじめ
個人開発は継続が大切らしい...
なので今回は少し改良を加えてみました。
改良するもの
やっていく!!
⇧改良前
⇧改良後
寂しい白背景にちょっと何か加えたいと思った時におすすめです。
ちょっと、クリエイティブ感が出てきます(気がするだけ?)
コード(グリッド背景のスタイル設定)
@layer utilities {
.grid-bg {
background-color: white; /* 背景色を白に設定 */
background-image:
/* 横方向の線を作成 (1pxの間隔で薄い灰色) */
linear-gradient(to right, rgba(128, 128, 128, 0.07) 1px, transparent 1px),
/* 縦方向の線を作成 (1pxの間隔で薄い灰色) */
linear-gradient(to bottom, rgba(128, 128, 128, 0.07) 1px, transparent 1px);
/* 1つのグリッドのサイズを24px x 24pxに設定 */
background-size: 24px 24px;
/* 背景画像の位置を左上に設定 */
background-position: 0 0;
}
}
こんな感じにしています。globals.cssに書いてそこから使う形です。
今までこんな形の装飾はしなかったのでlinear-gradientとかあるんだと思いました。
詳細についてもこんな感じです。グリッドのサイズは、24pxにしました。
その他の改良点&おまけ
このメインページに関しては技術的な面白い変更はありませんがサッと紹介します
ヘッダーのタイトル横のヤツ
私が書いた力作をもっとアピールしていこうと思い横に付け加えてみました。
<Image
src=""
alt=""
width={42}
height={42}
className="relative top-[-2px] select-none pointer-events-none"
draggable="false"
/>
こんな感じです。
draggable="false" で画像の取得を防いでいる感じですね。
top-[-2px] でIndieAppsの文字と高さを合わせてみました
個人開発者プロフィールページを新たに作成!!
記事を今書いていて、このページにもグリット背景がいる気がしてます。どうでしょうか。
ここは、ユーザーのプロフィールとか作品を見ることができます。
ゆくゆくは、フォロー機能とか? 追加してみたいところです。
ここは、v0に作成してもらったのを自分でちょっといじっただけなので発展の余地はありますね。
その他の改良
- スマホでメインページを見やすくしました
- フッダーをちと改善しました
次の目標
- SEOとかちときちんとする
- リンク共有の強化
- フォロー機能とか
- ナビゲーションの追加
- アップデート履歴機能の追加
- スマホ版のUIの向上
小さい感じのやつをコツコツとしていきたいですね。
IndieAppsの紹介
以上のようにコツコツと改良を加えて行ってますのでぜひ使ってみてください!!
個人のプロジェクトの紹介を楽しみに待っております。
ぜひ、IndieAppsで紹介していただけると嬉しいです。
おわり
グリッド背景のスタイル設定＋αでした。
個人開発に関するアドバイスやIndieAppsの改善点、記事について何かあれば共有していただけると嬉しいです。
Discussion