ジャーナル問題検討部会の議事録を読みやすくするブラウザ設定

概要
設定方法
応用
参考

概要

デフォルトだと下図のBeforeのように表示されるジャーナル問題検討部会等審議会の議事録を、ブラウザの設定変更で、右のAfterのように読みやすくしましょうというお話です。

f:id:Katharine_15:20201216202136p:plain — 出典:https://www.mext.go.jp/b_menu/shingi/gijyutu/gijyutu29/001/gijiroku/1418998_00006.htm

設定方法

ここではGoogle Chromeを例に説明します。他のブラウザでも名称や機能に若干の違いはありますが、同様の機能はあると思います。

議事録部分の上で、右クリックをして「検証」を選びます。
表示されたデベロッパーツールで、「<h2>5．議事録</h2>」の下の「<p>...</p> 」がハイライトされていることを確認します。
element.style{ }に以下をコピペします。

line-height: 2;
letter-spacing: .5px;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
height: 500px;
text-align: justify;
writing-mode: vertical-rl;

以上で完成です。以下のように読みやすくなりました。

f:id:Katharine_15:20201217200158p:plain — 出典:https://www.mext.go.jp/b_menu/shingi/gijyutu/gijyutu29/001/gijiroku/1418998_00006.htm

応用

縦書きよりも横書きがいいわ、明朝よりもゴシックがいいわ、という声もあるかと思いますので、その場合は、貼り付けるコードを以下に変更してください。
好みや環境によって、読みやすい幅や文字間なども違いがあるかと思いますので、適宜変更してください。

ゴシックのほうが読みやすい人

line-height: 2.2;
letter-spacing: .2px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
height: 600px;
text-align: justify;
writing-mode: vertical-rl;

横書きのほうが読みやすい人

    line-height: 2;
    letter-spacing: .5px;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    width: 650px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;

横書きでゴシックのほうが読みやすい人

    line-height: 2.2;
    letter-spacing: .2px;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
    width: 650px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;