目次

⚠ 注意： Gatsby V2の頃の情報です。gatsby-starter-novelaは作者のGithubリポジトリから消えました。

gatsby-starter-novelaを使っていて気付いたのですが、見出しの日本語が改行されず狭い画面では溢れてしまいます。スマホ表示で横スクロールバーが出るのも嫌なので修正します。

🛠 修正方法

Headings.tsxをシャドーイングします。src/@narative/gatsby-theme-novela/components/Headings/Headings.tsxを（無ければ新規作成して）以下のように編集します。

簡単にいうとword-break: keep-allをword-break: normalに変更するだけです。

import styled from "@emotion/styled";
import { css } from "@emotion/core";

import mediaqueries from "@styles/media";

/**
 * Example:
 * <Heading.h1>Lorem Ipsum</Heading.h1>
 */

const commonStyles = p => css`
  font-weight: bold;
  color: ${p.theme.colors.primary};
  font-family: ${p.theme.fonts.serif};
`;

const h1 = styled.h1`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 52px;
  line-height: 1.15;
  ${commonStyles};
  ${mediaqueries.desktop`
    font-size: 38px;
    line-height: 1.2;
  `};
  ${mediaqueries.phablet`
    font-size: 32px;
    line-height: 1.3;
  `};
`;

const h2 = styled.h2`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 32px;
  line-height: 1.333;
  ${commonStyles};
  ${mediaqueries.desktop`
    font-size: 21px;
  `};
  ${mediaqueries.tablet`
    font-size: 24px;
    line-height: 1.45;
  `};
  ${mediaqueries.phablet`
    font-size: 22px;
  `};
`;

const h3 = styled.h3`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 24px;
  line-height: 1.45;
  ${commonStyles};
  ${mediaqueries.tablet`
    font-size: 22px;
  `};
  ${mediaqueries.phablet`
    font-size: 20px;
  `};
`;

const h4 = styled.h4`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 18px;
  line-height: 1.45;
  ${commonStyles};
  ${mediaqueries.phablet`
    font-size: 16px;
  `};
`;

const h5 = styled.h5`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 18px;
  line-height: 1.45;
  ${commonStyles};
  ${mediaqueries.phablet`
    font-size: 16px;
  `};
`;

const h6 = styled.h6`
-  word-break: keep-all;
+  word-break: normal;
  font-size: 16px;
  line-height: 1.45;
  ${commonStyles};
  ${mediaqueries.phablet`
    font-size: 14px;
  `};
`;

export default {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
};

😩 愚痴

「英語にあらずんば言語にあらず」の精神がここにも現れてますね。日本語環境のことは一切考慮されてません。

Novelaは素晴らしいテーマですが、日本語でブログを書くならば色々と修正や変更が必要になることを覚悟しなければなりません。