💾

【第2回】GatsbyJS+Netlifyでブログを始める方法

今回は前回作ったブログのカスタマイズをしていきます。


テーマのカスタマイズ

今回も前回同様gatsby-starter-blogというテーマを例に説明していきます。行うカスタマイズは大きく分けて下のような感じです。

・ブログ名の修正

・Twitterアカウントの設定

・コピーライト(©)の表示

ブログ情報の修正

gatsby-config.jsを開いて任意の部分を変えてください。ブログのURLは公開後で大丈夫です。

module.exports = {
  siteMetadata: {
    title: 'ブログの名前',
    author: '名前',
    description: 'ブログの説明',
    siteUrl: 'ブログのURL',
    social: {
      twitter: `Twitterアカウント`,
    },
  },
  ・・・
  `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `ブログの名前`,
        short_name: `名前`,
        start_url: `ブログのURL`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/gatsby-icon.png`,
      },
    },
};

プロフィールの修正

src/components/Bio.jsを開いてプロフィールを修正してください。注意点としては、エラーがでるのでTwitterへのリンクは消さないようにしてください。

import React from "react"

function Bio() {
  return (
    <StaticQuery
      query={bioQuery}
      render={data => {
        const { author, social } = data.site.siteMetadata
        return (
	・・・
            <p>
              <strong>{author}</strong>プロフィール
              {` `}
              <a href={`https://twitter.com/${social.twitter}`}>
                Twitter
              </a>
            </p>
          </div>
	・・・
export default Bio

次にプロフィールの横に表示される画像の変更です。content/assetsの中にあるprofile-picの画像を任意の画像に置き換えてください。サイズは400pxぐらいの正方形です。

コピーライトの修正

最後にコピーライトの修正です。自分のブログ名に変えてください。

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

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

class Layout extends React.Component {
				
	・・・
			
		<header>{header}</header>
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, ブログ名
        </footer>
      </div>
    )
  }
}

export default Layout

次にGatsbyJSで作ったブログにCSSを反映させる方法を紹介します。方法はいくつかありますが、最も簡単な方法を紹介するので、先程のカスタマイズが難しかったという人はぜひチャレンジしてみてください。

GatsbyJS製ブログにCSSを反映させる方法【簡単】

先程書いたとおり最も簡単な方法を紹介します。本当はインライン化をしたほうがSEO・表示速度的に良いのですが難易度が高くなってしまうので、やってみたい人は公式ブログを参考にしてみてください。


まずはファイル・フォルダーが下のようになっていることを確認します。

├── package.json
├── src
│   └── pages
│       └── index.js

確認ができたらつぎに下のようにsrc/styles/global.cssを作ります。

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css

最後にCSSを反映させるためにgatsby-browser.jsで読み込みます。gatsby-browser.jsは一番上の階層にあるので確認してみてください。

├── package.json
├── src
│   └── pages
│       └── index.js
│   └── styles
│       └── global.css
├── gatsby-browser.js

確認ができたらgatsby-browser.jsを開いて下のコードを追加します。注意点として、requireよりも上に書いてください。

import "./src/styles/global.css"

gatsby-browser.jsがない場合はテキストエディタなどで新しく作り、一番上の階層に置きます。

これで設定は完了です。あとはglobal.cssにCSSを書くだけで反映されます。

CSSの書き方やデザインに関してはメインブログで書いているので良かったら見ていってください。

📌メインブログ:https://koblog.hatenablog.jp/


次回はカスタマイズしたブログをGithubにアップロードする方法を紹介します。








WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation