RABZOMBIE

gatsby-starter-novelaの見出しがはみ出るので修正しました

2020年11月26日

タグ:gatsby-starter-novela

gatsby-starter-novelaの見出しがはみ出るので修正しました
目次(クリックして開閉)

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

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

🛠 修正方法

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

簡単にいうとword-break: keep-allword-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は素晴らしいテーマですが、日本語でブログを書くならば色々と修正や変更が必要になることを覚悟しなければなりません。


Profile picture

著者: ラブゾンビ フリーとオープンソースを愛するゾンビ。泥沼の住人。