Chapter 10

ヘッダーの作成

ここでは、サイトの一番上部に表示されるロゴをヘッダーとして作成していきます。
また、Linkタグを用いてページトップへ戻ることが出来るようにします。

コーディング

コンポーネント作成

ロゴ画像(static/logo.png)はご自身でご用意いただくか、こちらをご利用ください。

// src/components/header.js
import React from "react"
import { Link } from "gatsby"
import LOGO_IMG from "../../static/logo.png"
import "../styles/header.css"

export default function Header() {
    return (
        <header>
            <Link to="/">
                <img src={LOGO_IMG} className="logo-image" alt="logo"></img>
            </Link>
        </header>
    )
}

スタイリング

/* src/styles/header.css */
.logo-image{
    width: 120px;
}

コンポーネントの追加

作成したHeaderコンポーネントを追加します。
Layoutコンポーネント内に追加することによって、各ページでHeaderを見れるようにします。

// src/components/layout.js
import React from "react"
import "../styles/layout.css"
import Header from "./header"

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Header />
            <main>{children}</main>
        </div>
    )
}

export default Layout

表示結果

header.png