SNS アイコンを追加した

October 26, 2018 1 min read

ページ上部に SNS アイコンを追加した。(Github を SNS と呼んでいいのか…)

技術的に難しいことはなく、iconmonstr からアイコン画像をダウンロードしてきて、リンクをつければいいだけだが、 Next.js の Link と無駄に格闘していたので一時間もかかった。

結論から言うと、サイト外へのリンクは上述の Link タグでは実装できないみたい。なので下に示すような dirty な実装に…

{props.externalLinks && props.externalLinks.map((link,i) => {
  return (
    <a className="dib ma1" href={link.href} key={i}>
      <img className="pa1 bg-white" src=
      {`/static/assets/images/sns-icons/${link.name}.png`} alt=
      {link.name} style={{height: "20px", borderRadius: "50%"}} />
    </a>
  )
})}

他にも追加する予定なので ogp 用の画像( Twitter とかでカードになったときの画像)はまだ更新していない。


Written by Shun Nishimura.

© Copyright 2020 Shun Nishimura - All Rights Reserved