GatsbyJSブログに自分のSNSへのリンクを追加した

2020-05-15

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

今回はGatsbyJSブログに自分のSNSへのリンクを追加します。
さまざまな人にブログやツイッターを見てもらいたいです!

TwitterとGitHubとQiitaへのリンクアイコンを作りたいと思います。

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

パッケージのインストール

以下コマンドで必要なパッケージをインストールします。

TwitterとGitHubは[fortawesome]のアイコンを使用して、Qiitaに関してはいい感じに画像を拾ってきて作成します。

npm install --save @fortawesome/react-fontawesome
npm install --save @fortawesome/free-brands-svg-icons

Bioコンポーネントにアイコンを設置する

[src/components/bio.js]に追記していきます。

まずインポートする

src/components/bio.js
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub, faTwitter } from "@fortawesome/free-brands-svg-icons";
import image from "../images/qiita.png";

自己紹介文の後ろにアイコンを設置

src/components/bio.js
class Bio extends React.Component {
  render() {
    return (
      //--省略--
      <div style={{ position: "relative", marginTop: "10px", }} >
        <div style={{ position: "absolute", width: "100%", top: "0", left: "0", }} >
          <a style={{ boxShadow: "none", }} href="https://twitter.com/rpf_nob">
            <FontAwesomeIcon
              style={{ height: "1.5em", width: "1.5em", marginRight: "5", }}
              color="#3eaded"
              icon={faTwitter}
            />
          </a>
          <a style={{ boxShadow: "none",}} href="https://github.com/N-Iwata" >
            <FontAwesomeIcon
              style={{ height: "1.5em", width: "1.5em", marginRight: "5", }}
              color="#333"
              icon={faGithub}
            />
          </a>
        </div>
        <div style={{ position: "absolute", width: "32px", top: "-4px", left: "56px", }} >
          <a style={{ boxShadow: "none", }} href="https://qiita.com/rpf-nob" >
            <img
              src={image}
              alt="Qiita"
              style={{ height: "2em", width: "2em", }}
            />
          </a>
        </div>
      </div>
    //--省略--
    );
  }
}

これでSNSリンクアイコンが実装できました!!

img

まとめ

今回はGatsbyJSブログに自分のSNSへのリンクを追加しました。
さまざまな人にブログやツイッターを見てもらいたいので、情報発信できるように頑張っていきます!!

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。



最後まで見ていただきありがとうございます!!


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニアです。 フロントエンドよりのweb開発技術(React,TypeScriptなど)を中心に扱っています。 web開発やデータサイエンス周りの技術に興味があります。 個人開発でwebアプリをリリースすることを目標にしています。

©2020 のふのふ All Rights Reserved.