【Gatsby】gatsby-casper テンプレートを使った静的ページのカスタマイズ（手っ取り早く公開したい人向け）

週末に家の近くの公園（たまに遠くまで行くけど）で子供と遊ぶんで、そのついでに公園の様子でもアップしていくかー！
とサイトを開設して１ヶ月。

かき ぷれいぐらうんど

先日、サイトをリニューアルしました。
Gatsby という、静的ページを爆速で表示してくれるフレームワークを使っているのですが、テンプレートがいくつかあるので、１からデザインしなくても、テンプレートをカスタマイズするだけでいい感じに見せる事ができたりします。
（上記のサイトでは、gatsby-casperというテンプレートをベースにしています。）

ただ、カスタマイズには React や GraphQL といった、「Gatsbyを構成している技術」の知識は必要です。
また、このテンプレートでは TypeScriptも使用しています。

が、

ここでは
「React と GraphQLの理解は後回しにして、まずは公開する事にしよう。（gatsby-casperのテンプレートを使って）」
というのを書いていこうかと思います。

なので、この記事の対象者は

• エンジニアである
• Gatsby を使った静的サイトの作成に興味がある
• テンプレートに gatsby-casper を使おうとしている
• Reactよくわかんない
• GraphQLよくわかんない
• でも Gatsby 使いたい。というか静的爆速サイト作りたい。

という、超ニッチな層をターゲットとした記事です。
該当しない方は、「戻る」ボタンをどうぞ。

また、システムにおける最適解を書いているわけではなく、
「裏側は雑でも適当でもいいから、まずは見せるものを作る。」
という方向性で書いてますので、ご留意ください。

なお、gatsby-casper 本家のデモページはこちらです。

準備

yarnをインストール。

まずはそこから。

起動

リポジトリをクローンした後、以下を実行。

yarn install  
yarn dev  

最低限変えておく設定

gatsby-config.js

• title
• description
• siteUrl

を自分のサイト用に編集。

website-config.ts

const config: WebsiteConfig = {  

以下の部分を、自分のサイト用に編集。

コンテンツのトップに出てくる画像がでかい

コンテンツをクリックすると、サムネ画像の超拡大版がデカデカと出てきます。

以下でサイズ調整可能です。

src/templates/post.tsx

const PostFullImage = styled.figure`  
  margin: 0 -10vw -165px;  
  height: 800px;  
  background: ${colors.lightgrey} center center;  
  background-size: cover;  
  border-radius: 5px;  

デフォルトが「height: 800px;」ですが、200～250 くらいがいい感じです。

フォントを変えたい

日本語を書くと、結構硬めの印象です。
変えたい場合は、以下を編集。

src/components/PostContent.tsx

export const PostFullContent = styled.section`  
  position: relative;  
  margin: 0 auto;  
  padding: 70px 100px 0;  
  min-height: 230px;  
  font-family: Georgia, serif;  
  font-size: 2.2rem;  
  line-height: 1.6em;  
  background: #fff;  

font-family を適当に変えてください。
特に思いつかなければコメントアウトとかでもOKです。とりあえずは。

変わってない部分があれば、「font-family」で検索して見つけた記述を変えていってください。

メニューを編集

src/components/header/SiteNav.tsx
これを編集。
140行目あたりでしょうか。

<SiteNavLeft>  
          {/* {!isHome && <SiteNavLogo />}  */}  
          <ul css={NavStyles} role="menu">  
            {/* TODO: mark current nav item - add class nav-current */}  
            <li role="menuitem">  
              <Link to="/about">このサイトについて</Link>  
            </li>  
            <li role="menuitem">  
              <Link to="/">全エリア</Link>  
            </li>  
            <li role="menuitem">  
              <Link to="/tags/福岡市/">福岡市</Link>  
            </li>  
            <li role="menuitem">  
              <Link to="/tags/糟屋郡/">糟屋郡</Link>  
            </li>  
            <li role="menuitem">  
              <Link to="/tags/新宮町/">新宮町</Link>  
            </li>  
          </ul>  
        </SiteNavLeft>  

こんな感じで。

トップページのヘッダにもメニューを表示したい

トップページだけヘッダメニューが変な位置にあって、どうにも操作感が微妙に感じてしまう。
ここも他のページと同じレイアウトにした方がよくないか？　
あと、ロゴはここに要らね。と思った人向け。

src/pages/index.tsx の内容を編集。
130行目あたりでしょうか。

          <div css={inner}>  
            <SiteNav isHome={false} />  {/* Add from kaki */}  

<SiteHeaderContent>  

<SiteTitle>  
                {/* {props.data.logo ? (  
                  <img  
                    style={{ maxHeight: '45px' }}  
                    src={props.data.logo.childImageSharp.fixed.src}  
                    alt={config.title}  
                  />  
                ) : (  
                  config.title  
                )} */}  
                {config.title}  {/* Add from kaki */}  
              </SiteTitle>  

<SiteDescription>{config.description}</SiteDescription>  
            </SiteHeaderContent>  
            {/* <SiteNav isHome /> */}  
          </div>  

{/* Add from kaki */} の左のコードが追加した分。
{/* */} で囲まれた部分が削除（コメントアウト）した分。

原理は自分で調べてください。
私もまだふんわりとしか分かってません。

フッター情報が色々邪魔。

こんな感じでどうでしょう？

Footer.tsx
`
const Footer: React.FunctionComponent = () => {
return (