PROGRAMMING

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

今回はウェブサイトのフッターを作っていきたいと思います。

フッターにはSNSなどのリンクをつけるようにしていきます。

この記事でわかること
・フッターの作り方
・SNSのリンクの付け方

今回もこんな感じでやっていきたいと思います。

参考文献

今回もこちらを参考にさせて頂いております。

Footerの作り方

Footerフォルダを作る

Footerというフォルダを作り、その下にindex.jsとFooterElements.jsのファイルを作ります。

index.jsではFooterのJavaScriptの部分を受け持ち、FooterElementsではstyled-componentsを使ってCSSの役割を担います。

先にindex.jsを先に作っていきます。

先に完成図をイメージしやすいように載せておきます。

この下の部分を作っていきます。

index.jsを作る

まずはindex.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>

大したことは書いてません。

SocialLogoでリンクをつけます。リンク先はトップページなので、 to='/'これだけで大丈夫です。

SocialIconではアイコンを貼り付けます。

次に真ん中の権利の部分です。

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

{new Date().getFullYear()}これで現在の年度を表示することができます。

日付のオブジェクトに関しては下記のページが詳しく載っています。

最後にSNSのアイコンの部分です。

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

target="_blank"ではリンクを開く際に新規ウィンドウで開くものです。

これだけにしてしまうとセキュリティ上に問題があるため、rel="noopener norefferer"を追加します。

rel属性にnoopenerを付けることで、新しいタブを別スレッドで開くことができます。

rel属性にnoreferrerを付けることで、参照先に対して参照元のリンクを渡さないようにすることができます。

詳しくは下記のページに載っています。

これでYoutubeのページを開く際には、新規ウィンドウで開くようになります。

以上でindex.jsの部分は大丈夫ですね。

骨組みの部分が終わったので、肉付けをしていきます。

styled-componentsでデザイン

 FooterElementsというファイルをFooterフォルダの中で作成します。

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;
`

これで完成と言いたいところなのですが、font-family: "Ubuntu", sans-serif;この部分がこのままだと反映されません。

それではどうすればいいのか。

layout.cssでgoogleフォントをインポートする必要があります。

@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;
}

これで無事にフォントは反映されました。

Googleフォントの詳しい使い方に関しては、次回やっていきたいと思います。

わからない方はぜひ読んでみてください。

とりあえず、これで完成ですね。下記のような状態になっていれば大丈夫です。

まとめ

今日はFooterが完成したので、一旦このウェブサイトは完成です。

Googleフォントの追加の仕方が意外とわからなかったので、次回はGoogleフォントについてやっていきたいと思います。

そのあとは本格的にウェブサイトの作成に移りたいと思います。

最後まで読んで頂きありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.