gatsbyのブログテンプレートにMaterial-UI入れて見栄えを良くする -色の統一-

今回の目的

githubにあるgatsbyのブログテンプレートにMaterial-UIを入れて見栄えを良くしていきたいと思います。
まずは基本の色を決めていきましょう。

前提条件

nodeやgatsbyなどはインストールしておいてください。
Windows10の環境準備は以下で参照できます。

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする

ブログテンプレートをダウンロード

好きなディレクトリにて以下コマンドを実行します。

gatsby new my-blog※任意 https://github.com/gatsbyjs/gatsby-starter-blog

ダウンロード後に一度ブログを起動してみましょう
以下コマンドを実行します。

cd my-blog（ダウンロードすると上記で入力した任意の名前のディレクトリが出来ています。）
gatsby develop

http://localhost:8000

スーパーシンブル！
これをカスタマイズしていきます。

Material-UIを導入

コマンドを使用して、カレントディレクトリ(ここでいうmy-blog)にて以下コマンドを実行します。

npm install -D @material-ui/core 
npm install -D gatsby-plugin-material-ui

gatsby-plugin-material-uiはMaterial-UIをGatsbyでいい感じに利用することが出来るプラグインと考えてください。
※build時にプラグインがないとエラーになるような事をどこかにありましたが、私は再現しませんでした。

インストール完了後、gatsby-config.jsに以下を追記します。
gatsby-config.jsはカレントディレクトリ直下にあります。

gatsby-config.js

    (中略)
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-material-ui`,←これを追記

これでMaterial-UIの導入は完了です。

色の設定を統一する

現時点はシンプルですが、今後機能が増えるにつれ色の設定がばらばらになる可能性があるのでサイトで使用する色を制限するためthemeを作成します。

色決め

下記サイトでいい感じに色が決めれます。
https://material.io/resources/color/#!/
私はこんな感じにしました。

src/styles/theme.jsを作成

src/styles/theme.jsを作成し以下を追記します。

src/styles/theme.js

import { createMuiTheme } from '@material-ui/core/styles';

export const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#b6ffff',
      main: '#81d4fa',
      dark: '#4ba3c7',
      contrastText: '#FFFFFF',
    },
    secondary: {
      light: '#ff93c1',
      main: '#ef6091',
      dark: '#b92a64',
      contrastText: '#000000',
    },
  },
});

これでこのサイトで使用する色が決まりました。
上記はまだまだカスタマイズ可能なようですがとりあえず簡単にいきましょう。
当然ですが、個別のスタイルで色を設定することをルール決めしないといけません。
複数人で作成している場合は、話し合いましょう。

色の設定を修正

それでは画面に反映していきます。

src/components/layout.jsを編集します。

src/components/layout.js

import React from "react"
import { Link } from "gatsby"

import { rhythm, scale } from "../utils/typography"

import {theme} from "../styles/theme";

const Layout = ({ location, title, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  if (location.pathname === rootPath) {
    header = (
      <h1
        style={{
          ...scale(1.5),
          marginBottom: rhythm(1.5),
          marginTop: 0,
          backgroundColor: theme.palette.primary.main,←追記
        }}
      >
        <Link
          style={{
            boxShadow: `none`,
            color: theme.palette.primary.contrastText,←修正
          }}
          to={`/`}
        >
(中略)

画面に色が付きました。
これで、色を付けたい場合はthemeから選ぶ(または背景色白の場合は何も指定しない。)

次回は

今回は以上です。
次回はMaterial-UIを使用してヘッダを追加しようと思います。

ありがとうございました。