Gatsby.jsでウェブサイトを作る！【フッターの追加】

import React from 'react'
/* SNSのロゴをインポート　*/
import  { FaFacebook, FaInstagram, FaLinkedin, FaYoutube  } from "react-icons/fa"
/* FooterElementsからインポート　*/
import {
  FooterContainer,
  SocialIcon,
  SocialIcons,
  SocialIconLink,
  SocialLogo,
  SocialMedia,
  SocialMediaWrap,
  WebsiteRights,
}
from "./FooterElements"

const Footer = () => {
  return (
  <FooterContainer>
    <SocialMedia>
      <SocialMediaWrap>
       /* 左のロゴの部分 */
        <SocialLogo to='/'>
          <SocialIcon />
          EXPLOR
        </SocialLogo>
         /* 真ん中の権利の部分  */  /* 年度を表示する  */
        <WebsiteRights>EXPLOR @ {new Date().getFullYear()}</WebsiteRights>
         /* SNSのアイコンの部分 */
        <SocialIcons>
          <SocialIconLink href='/' target="_blank"
          aria-label="Facebook">
            <FaFacebook />
          </SocialIconLink>
          <SocialIconLink href='/' target="_blank"
          aria-label="Instagram">
            <FaInstagram />
          </SocialIconLink>
          <SocialIconLink href='/' target="_blank"
      /* noopener: 別スレッドでリンクを開く　norefferer: 参照先に参照もとのリンクを渡さないようにできる */
          aria-label="Youtube" rel="noopener
          norefferer">
            <FaYoutube />
          </SocialIconLink>
          <SocialIconLink href='/' target="_blank"
          aria-label="Linkedin">
            <FaLinkedin />
          </SocialIconLink>
        </SocialIcons>
      </SocialMediaWrap>
    </SocialMedia>
  </FooterContainer>
  )
}

export default Footer;

<SocialLogo to='/'>
  <SocialIcon />
　　EXPLOR
</SocialLogo>

<WebsiteRights>EXPLOR @ {new Date().getFullYear()}</WebsiteRights>

 /* noopener: 別スレッドでリンクを開く　norefferer: 参照先に参照もとのリンクを渡さないようにできる */
aria-label="Youtube" rel="noopener norefferer">
  <FaYoutube />
</SocialIconLink>

import styled from "styled-components"
import { DiScala } from "react-icons/di"
import { Link } from "gatsby"

export const FooterContainer= styled.div`
  background-color: #101522;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

export const SocialMedia = styled.section`
  max-width: 1000px;
  width: 100%;
`

export const SocialMediaWrap = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1000px;
margin: 20px auto;

@media screen and (max-width: 820px){
  flex-direction: column;
}
`

export const SocialLogo = styled(Link)`
color: #fff;
justify-self: start;
cursor: pointer;
text-decoration: none;
font-size: 2rem;
display: flex;
align-items: center;
margin-bottom: 16px;
`
export const SocialIcon = styled(DiScala)`
margin-right: 10px;
`

export const WebsiteRights = styled.small`
color: #fff;
margin-bottom: 16px;
font-family: "Ubuntu", sans-serif;
`

export const SocialIcons = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 240px;
`
export const SocialIconLink = styled.a`
color: #fff;
font-size: 24px;
`

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Permanent+Marker&family=Ubuntu&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Permanent Marker", cursive;
}