SNSリンクをまとめたページを作った

投稿日:2024/11/14

作った理由とコードについて

著者: nhennoejo

リンクをまとめたページのスクショ。

こんな感じでSNSリンクをまとめたページを作った（■）。リンクを増やしたくなっても簡単に増やせるし、プロパティを増やしたくなっても問題ないように設計するにリソースを割いたのでまだCSSは最低限だけど完成度としては恥ずかしくないレベルだと思う。

動機

今まではbioに乗せるのにちょうど良いリンクがなかったのでサイトを作ったURLで自分でリンク集を作りたいと思ってたからだ。これがあれば迷うことがなくなった。それと、大学で新しいサークルの立ち上げに招待された。そこでブログを作ることになり（このブログのシステムをCSSだけ変えてそのまんま使う予定）、そこであると便利だと思ったから。カスタマイズしやすく作ったのもこれに関係する。

コード

---
//components/LinkCard.astro
import Image from "astro/components/Image.astro";

const {
  logo,
  platformName,
  link,
  description,
  backgroundColor,
} = Astro.props;
---

<a href={link} class="link-card" style={`--background-color: ${backgroundColor};`} target="_blank" rel="noopener noreferrer">
  <Image src={logo} alt={`${platformName} logo`} class="logo" />
  <div class="content">
    <h3 class="platform-name">{platformName}</h3>
    <p class="description">{description}</p>
  </div>
</a>

---
import bluesky_logo from "../images/links/bluesky-logo.png"
---
<LinkCard
    logo={bluesky_logo}
    platformName="Bluesky"
    link="https://bsky.app/profile/nhennoejo.bsky.social"
    description="フォローしてね"
    backgroundColor="#e3f2fd"
/>

これが私のベストでした。

デザイン

CSSのコードはすぐに変わると思うので載せない。

背景の色をカードごとに変えられるようにした。これはけっこうすごいことをしたと思ってる。全部同じ色よりも見栄えがいい。単調さがなくて、全体的に豪華な感じがする。

ホバー時のアニメーションをつけようと思ってホバー時の背景色をプロパティに持たせて変更していたんだけどしっくりこなかった。もっとうまくやりたかった。

デザインに関して欲を言えばlit.linkやlinktreeよりもっとリッチなかっこいい、おしゃれだけど目立ちすぎないようなデザインにしたかった。これからも少しずづいじっていこうと思ってる。

これを作ってるとデザインの引き出しの少なさにがっかりした。デザインを勉強したことなんてないし、将来必要になることもないと思うけど、Webプログラミングしてたらかっこいいデザインしたくても仕方ないでしょ。

なんか文体がぐちゃぐちゃになってるね。ごめんだぜ。