typememo.jp

gatsby-theme-blog でフォントをシャドーイングする方法

2020.07.08

#gatsby#shadowing#font

Contents


まとめ

  • シャドーイング対象の ${mysite}/node_modules/gatsby-theme-blog/src/gatsby-plugin-theme-ui/index.js を見つける
  • シャドーイングするために ${mysite}/src/gatsby-plugin-theme-ui/index.js を新規作成する
  • 実際にシャドーイングしてみる

イントロ

gatsby-theme-blog でフォントをシャドーイングする方法についての紹介です.

gatsby でのシャドーイングに関する基本的な知識は Shadowing in Gatsby Themes で得られます.

その中で本記事に最も関連のある内容は Shadowing other files です.

これには gatsby-theme-blog が依存しているプラグインの一つである gatsby-plugin-theme-ui のプリセットである gatsby-theme-ui-preset をシャドーイングする方法が書かれています.

このシャドーイング方法を参考にした,フォントファミリーをシャドーイングする方法を具体的に説明します.

手順

シャドーイング対象を見つける

シャドーイングするにはシャドーイング対象を見つける必要があります.

シャドーイング対象は ${mysite}/node_modules 以下のどこかにあります.

ローカルに保存されている ${mysite}/node_modules 以下のファイルを grep などして目当てのシャドーイング対象を探しても良いですが,それだと少し面倒だと感じる方は gatsby packages @GitHub にアクセスしてブラウザ上で探すと良いと思います.

てなこんなで探していくと,フォントファミリーを定義しているのは ${mysite}/node_modules/gatsby-theme-blog/src/gatsby-plugin-theme-ui/index.js だと判明しました.

${mysite}/node_modules/gatsby-theme-blog/src/gatsby-plugin-theme-ui/index.js の中身を次のコードブロックに示します.

import merge from "deepmerge"
import typography from "./typography"
import colors from "./colors"
import styles from "./styles"
import prism from "./prism"
export default merge(typography, {
initialColorMode: `light`,
colors,
fonts: {
heading: `Montserrat, sans-serif`,
monospace: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,
},
sizes: {
container: 672,
},
styles,
prism,
})

fonts: {...}heading monospace のフォントファミリーを定義しています.

シャドーイング対象が分かったので,あとは Shadowing other files の方法を参考にして実際にシャドーイングしてみましょう.

シャドーイングする

Shadowing other files に,

For example, to shadow index.js from gatsby-plugin-theme-ui, create a file named user-site/src/gatsby-plugin-theme-ui/index.js.

gatsby-plugin-theme-uiindex.js をシャドーイングするには,${mysite}/src/gatsby-plugin-theme-ui/index.js というファイルを作成してシャドーイングせよと書いてあります.

“へぇ,そうなんだ.やってみるか.”

実際に ${mysite}/src/gatsby-plugin-theme-ui/index.js を作成して,以下のコードを書いてみました.

import baseTheme from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/index"
export default {
...baseTheme,
fontSizes: [12, 14, 16, 24, 32, 48, 64, 96, 128],
space: [0, 4, 8, 16, 32, 64, 128, 256],
colors: {
...baseTheme.colors,
primary: '#232129',
},
fonts: {
heading: 'Source Sans Pro, Helvetica Neue, sans-selif',
body: 'Note Sans, Note Sans JP, Open Sans, Roboto sans-selif',
monospace: 'Source Code Pro, monospace',
},
styles: {
...baseTheme.styles,
inlineCode: {
bg: "#f0f0f0",
},
},
}

fonts: {...}heading body monospace のフォントファミリーを好みのフォントファミリーにシャドーイングしています.

Helvetica Neue 以外は Google Web Fonts を使っています.

おわりに

gatsby-theme-blog でフォントをシャドーイングする方法についての紹介でした.

gatsby ブログに移行して,初めて React に触りました.

React の勉強をしつつ,ブログも更新できるので,gatsby は良いなと思いました.

ブログを更新するのが楽しくなりそうです:)

最後までお読みいただきまして,ありがとうございました!

References


山田 武尊 / 立教大学(理学) / ACCESS CO LTD