[Jekyll] Minimal Mistakesテーマで改行プロパティを変更する

概要

Minimal Mistakesテーマでモバイル環境の横スクロール問題を解決するための改行プロパティの変更方法をまとめる。

はじめに

JekyllブログのテーマとしてMinimal Mistakesを使用しているが、記事本文の単語や文章によっては端末の画面をはみ出してレンダリングされる場合がある。これによりモバイル環境では記事本文に横スクロールが発生してしまい、非常に気になるので解決方法を調べた。

手順

1. _base.scssにword-breakプロパティとoverflow-wrapプロパティを指定

h1,
h2,
h3,
h4,
h5,
h6,
nav,
ul {
  word-break: break-all;
  overflow-wrap: break-word;
}

2. 結果の確認

word-breakプロパティおよびoverflow-wrapプロパティ指定前と指定後

参考

• https://wit.nts-corp.com/2017/07/25/4675