はじめに
ブラウザである程度の量の文章を読む必要があるときに、ウェブページ側の(CSSの)設定で、フォントがぎざぎざしていたり、行間が狭かったり、フォントサイズが小さかったりすると、読む気が少々萎えてしまうことがあります。(CSSはウェブページのデザインを指定するものです)
ウェブページがCSSでフォント指定してあると、ブラウザで表示するように設定したフォントでは表示されません。
そこで、そのようなときに、フォント・行間・フォントサイズ等を簡単に設定する方法を調べましたので紹介します。
表示の大きさの変更だけならブラウザ上でctrl+wheelで調節するのが楽ですね。
部分強制メイリオちゃんやStylus等のchromeの拡張機能でフォントを置き替える方法もありましたが、ブラウザの拡張機能は原因が究明しづらい異常の原因になったり、セキュリティ的に安全かどうか確認するのが大変ですので、今回は違う方法を採用しました。拡張機能に「すべてのウェブサイト上にある自分の全データの読み取りと変更」の権限を与えるのはちょっとためらいますよね。
この権限がなければできることは限られますし、読み取られたデータが外部に送信されなければ問題を起こす可能性は小さいと思われますが。
自分の選択した対応方法
ブックマークレットを使って、フォント・行間・フォントサイズを置き替えるようにしました。
この方法では、ブラウザをリロード(ctrl+r)すればオリジナル状態のウェブページが表示され、ブックマークレットでの表示変更結果が望ましくない状態になったとしても容易にオリジナルの状態が表示できるのも評価ポイントです。ブラウザのフォントや行間隔が見づらいなぁというときだけウェブページの表示を変えることができます。
ブックマークレットとは、ブラウザ側で実行される(javascript)プログラムです。このプログラムをブラウザのブックマークバーに登録します。ブックマークバーに登録したプログラムのブックマークをクリックすることで、プログラムが動作し、フォント・行間・フォントサイズ等が変更されます。お好みで、フォント・行間・フォントサイズをそれぞれ個別に設定するようにもできますし、一度に設定することもできます。
以下はPC版のchromeで動作確認しています。ブックマークレットはjavascriptの実行できるブラウザで使用でき、javascriptの実行が許可されたブラウザで実行されます。現在のブラウザならほぼjavascriptは実行できると思います。
ただしスマホのブラウザには一般にブックマークバーがないので、PCに比べてブックマークレットの起動にはやや手間がかかります。
また、iOSのsafariでは動きましたが、iOSのchromeではフォント・行間等の変更はできませんでした。しかし、androidやiOSでは、試した範囲ではぎざぎざしたフォントでは表示されず、フォントを置き替える要望があるのはwindowsだけなのかもしれません。
設定方法要約
設定方法詳細は下部に示しますが、最初に要約だけを示します。
ブックマークバーを右クリックして「追加」を選び、「名前」には機能をあらわす名称を入れて、「URL」に以下のコード(ブックマークレット)を貼ります。
表示フォントを’メイリオ’にするブックマークレット
javascript:void((function(){document.head.innerHTML+="<style>*{font-family: 'メイリオ' !important;}</style>";})())行間を180%にするブックマークレット
javascript:void((function(){document.head.innerHTML+="<style>*{line-height:180% !important;}</style>";})())フォントサイズを12ptにするブックマークレット
javascript:void((function(){document.head.innerHTML+="<style>*{font-size: 12pt !important;}</style>";})())
上の３つを同時に設定するブックマークレット
javascript:void((function(){document.head.innerHTML+="<style>*{font-family: 'メイリオ' !important;line-height: 180% !important;font-size: 12pt !important;}</style>";})())表示を変更したいウェブページを表示した状態で、ブックマークバーの該当のブックマークアイコンを押すとフォント・行間・フォントサイズが所定のものに設定されます。
必要に応じて、フォント名、行間%、フォントサイズを変更して使ってください。
windows以外では、ご使用の機種にインストールされているフォント名を指定ください。
ぎざぎざフォントでの表示テストページ
今回設定するブックマークレットの効果を確認するためのテストページを作ってみました。ただし文字がぎざぎざに表示されるのはwindowsの一部のブラウザではないかと思います。自分の環境ではchromeとedgeではぎざぎざに表示されました。ブラウザの設定でもぎざぎざに表示されるかどうかは変わってきます。
リロード(ctrl+r)することでオリジナルの表示に戻りますので、最初の状態に対して効果を確認したいときは一旦リロードしてからブックマークレットのアイコンをクリックしてください。
リロードするまではブックマークレットによる変更の効果が保たれますので、「フォント変更」のブックマークレットのアイコンをクリックしてから「行間変更」のブックマークレットのアイコンをクリックすると、変更したフォント名は保たれたまま、さらに行間が変更されます。
テストページはwindowsでは、’ＭＳ Ｐゴシック’で表示するように指定してあり、’ＭＳ Ｐゴシック’は小さなポイント数で表示されると以下のようにぎざぎざした文字で表示されます。またこのテストページは行高さを指定していないので行間が狭く読みづらいです。
大きな文字ではぎざぎざに表示されないので、chromeでは「設定」>「デザイン」>「フォントサイズ」が「極大」に設定されているとなめらかな文字で表示されました。ctrl+wheelによる拡大も、映像としての拡大ではなく、表示される文字のポイントサイズが大きくなる拡大なので、拡大していくとある時点でなめらかな文字による表示になります。
設定方法詳細
ブックマークバーが表示されていなければ表示します。ctrl+shift+bで、ブックマークバー表示がトグル(ON/OFF)します。
表示フォントを’メイリオ’にするブックマークレットの設定
その名のとおり明瞭なフォントのメイリオで表示するための設定方法を以下に示します。
表示されたブックマークバーの地の部分を右クリックして、「ページを追加(G)…」を選択します。
表示されたウィンドウの「名前」の欄にメイリオでの表示を意味する名前を記入します。ブックマークバーへの登録項目が増えてきてもブックマークがたくさん表示できるように短めの名前が良いと思います。スマホでの使用も考えているならアルファベットの短めの名前をおすすめします。理由は後で説明します。ここでは「メイリオ」という名前にしました。
「URL」の欄には以下のコードを貼って、「保存」ボタンを押します。
javascript:void((function(){document.head.innerHTML+="<style>*{font-family: 'メイリオ' !important;}</style>";})())ブックマークレットはだいたいの場合には改行があっても動くようですが、改行が含まれているとエラーを起こす可能性があるとのことで、１行で記述するのが安全なようです。CSS部分の視認性を良くした改行ありのコードでは以下のようになります。
<!-- このコード↓は改行が入っているのでブックマークレットには非推奨 -->
javascript:void((function(){document.head.innerHTML+="
<style>
* {font-family: 'メイリオ' !important;}
</style>
";})())「document.head.innerHTML」が表示されたhtmlの<head></head>ではさまれた部分で、この最後の行に、<style>…</style>の行を追記(+=)するプログラムになっており、全ての要素(セレクタ)について’メイリオ’で表示してねという指示になっています。
win10, win11に標準で入っているなめらかに表示される日本語フォントには、他に’Meiryo UI’, ‘BIZ UDゴシック’, ‘BIZ UDPゴシック’などもありますのでお好みで該当部分を変更してください。游xxや明朝系は字体が細く、自分には視認性がいまひとつに感じられました。
例えば、’Meiryo UI’で表示する場合には、以下のようにフォント名を’Meiryo UI‘に置き替えて、登録するブックマークバーのページの「URL」に貼ります。
javascript:void((function(){document.head.innerHTML+="<style>*{font-family: 'Meiryo UI' !important;}</style>";})())行間を180%にするブックマークレットの設定
同様に、ブックマークバーの地の部分を右クリックして、「ページを追加(G)…」を選択し、「名前」と「URL」を設定します。「名前は」ここでは「LH180%」とします。URLには以下のコードを貼ります。
javascript:void((function(){document.head.innerHTML+="<style>*{line-height:180% !important;}</style>";})())フォントサイズを12ptにするブックマークレットの設定
同様に、「名前」と「URL」を設定します。「名前は」ここでは「fs12pt」とします。URLに以下のコードを貼ります。
javascript:void((function(){document.head.innerHTML+="<style>*{font-size: 12pt !important;}</style>";})())PCでの動作確認
テストページを表示し、そこで以下を確認します。
ブックマークバーの「メイリオ」をクリックすると表示フォントが’メイリオ’になることを確認します。
ブックマークバーの「LH180%」をクリックすると行間が180%になることを確認します。
ブックマークバーの「fs12pt」をクリックするとフォントサイズが12ptになることを確認します。
リロード(ctrl-r)すると元の表示に戻りますので、変更したい要素だけを変更することができます。
スマホでのブックマークレットの実行方法
androidスマホのchromeでは、アドレスバーに、ブックマークバーに登録したブックマークレットの名前を記入すると、☆javascript:…という表示が記載された項目が選択肢に表示されるのでそれを選択することでそのブックマークレットが実行されます。そのため、ブックマークの名前は英数字の短いものにすると楽に実行できます。
ブックマークバーのブックマークの表示位置の移動
ちなみにブックマークバーにブックマークが表示しきれなくなるとブックマークバーに登録したブックマークアイコンの右端に”>>”が表示され、これをクリックすると下にプルダウンリストが伸びてそこから選択する形になります。
ブックマークバーに横に並んでいるブックマークをクリックする方が、下にプルダウンリストを伸ばしてそこからブックマークを選択するよりも楽なので、使用頻度の高いブックマークはブックマークバーの横に並んでいる部分に動かすのが良いと思います。ブックマークバーに横に並んだブックマークでも、プルダウンリストを下に伸ばしてからブックマークを選ぶ場合でも、ブックマークを左クリックでドラッグして移動したい場所に移動することができます。プルダウンリストから横並びへの移動も、その逆の移動もできます。
画面横の表示スペースに余裕があるのなら、ブックマークバーの項目を縦に並べることも良いと思います。図の赤枠で囲まれた「サイドパネルで表示」ボタンを押して、サイドパネルを表示させて、「リーディングリスト」が選択されていたら、図のようにプルダウンリストから「ブックマーク」を選択します。サイドパネルにブックマークを表示させた場合でもドラッグでブックマークの場所を入れ替えることができます。
問題点
CSSで全称(ユニバーサル)セレクタの「*」を使用しているのでページ内の全ての要素が、指定した、フォント・行間・フォントサイズになります。そのときにレイアウトが崩れて読みづらい場合があります。
読みたい部分だけを置き替えるには、当該部分のCSSのセレクタ名を確認して、それをブックマークレットの該当部分に記載する必要がありますが結構手間です。デフォルトは全称セレクタでやってしまうのが良いと思います。あんまり手間ならば、ワープロソフト等に貼ってフォントを変更した方が楽ということになりますし。
ブックマークレットの動作確認
ブックマークバーに登録する前に、ブックマークレットの動作確認をしておきたいと思うこともあると思います。そのときは表示を変更したいウェブページを開いた状態で、ctrl+shift+iでブラウザのデペロッパーツールを開いて、「コンソール」にブックマークレットに登録するスクリプトを貼り付け、Enterキーを押します。表示が思ったとおりに変更され、エラーメッセージが表示されなければ問題ないと思われます。
デベロッパーツールのElementsで<head>を確認して、設定したい<style>が<head>の最後、</head>の前の行に挿入されたことを確認します。
所望のセレクタ部が設定したいfont-familyになっていることを確認します。下の図ではもともと設定されているfont-familyが横線で消され無効になっており、設定したfont-familyの’メイリオ’が有効になっていることがわかります。
さいごに
htmlからCSSが分離して、見た目はCSSで設定されるようになったのだと思いますが、作り手側がデザインを決めるためのCSSよりも、ユーザー側が表示したいように表示するCSSの優先度の方が高くあるべきだと思います。視覚が弱くなってきた人は、大きく、鮮明な字で、行間を空けて読みたいでしょうから。ブラウザの標準の設定である程度の設定はできるのですが、大雑把にしか設定できません。ブラウザの設定にユーザーCSSを記入する欄があって、そのCSSを最優先に働かせるON/OFF機能がウェブブラウザにあるのが良いのではないかと思いました。
おまけ1: windowsも気にかけて欲しい
ちなみに、自分が遭遇した日本語がぎざぎざ表示のウェブページでは、以下のようなスタイルが設定されていました。
body {font-family:Arial,Helvetica,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif !important;}CSSでのfont-familyの解釈は前からインストールされているフォントがあるかどうかを確認し、該当するものが見つかるとそれが適用されます。日本語表示は、macならば、”ヒラギノ角ゴ Pro W3″ がデフォルトでOSに含まれており、最初に該当しますので、ヒラギノのきれいな文字で表示されることになりますが、windowsでは”ＭＳ Ｐゴシック”がはじめて該当する日本語表示用フォントなので、ポイントサイズが小さいと、”ＭＳ Ｐゴシック”でぎざぎざに表示されることになります。ヒラギノフォントは購入すると数万円かかるので、ヒラギノでの表示は断念しました。windowsのためには、ウェブページの制作者がfont-familyにぎざぎざしていないwindows搭載のフォントを指定するか、”ＭＳ Ｐゴシック”をfont-familyの指定に含めないで欲しいなぁと思いました。”ＭＳ Ｐゴシック”が指定されていなければデフォルトのなめらかなフォントで表示されることになると思います。
ちなみに、メイリオフォントの日本語部分はロンドンの地下鉄の駅名表示・地下鉄地図の文字等に使われている「New Johnston」というフォントを作成した河野英一氏が中心になってmicrosoft向けに作成した労作です。メイリオは横書きで扱いやすく画数が多くてもつぶれずに視認性が高まるように工夫された日本語フォントです。
日本語フォントですが、和文・欧文の混交も考慮されています。2007年にVistaに搭載されて登場しましたが、win7でも改良を加えられ今に至っているようです。
更に、ちなみに、自分がエディターで使っているフォントはMigu1Mというフォントです。このフォントは、0(ゼロ)とO(大文字のオー)、1(いち)とl(小文字のエル)の区別がはっきりしていて、プログラムで文字を間違いづらいです。そういえば昔使っていたタイプライターはl(小文字のエル)が数字の1を兼ねていましたね。
おまけ2: ChatGPTに聞いてみた
ブラウザのフォントをメイリオにするブックマークレットのスクリプトを教えてください。
以下のスクリプトをブックマークレットとして保存して、任意のWebページで実行すると、そのページのフォントをメイリオに変更することができます。
javascript:(function(){var newSS, styles='* { font-family: "Meiryo", sans-serif !important; }'; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); } })();これを実行すると、表示されるhtmlの<head>の最終行に以下の行が追加され、表示フォントは’メイリオ’に変更されました。
<link rel=”stylesheet” href=”data:text/css,*%20%7B%20font-family%3A%20%22Meiryo%22%2C%20sans-serif%20%21important%3B%20%7D”>
上の行の%XXの文字は、URLで使える文字列にするためにjavascript中でescape(styles)でエスケープしているためで、これを外してもう一度実行してみると、追加された行は以下のようになりました。
<link rel=”stylesheet” href=”data:text/css,* { font-family: "Meiryo", sans-serif !important; }”>
「"」は「”」の別のエスケープ表現です。
以下のコードをchromeのデペロッパーツールのコンソールに貼り付けてもほぼ同じ結果が得られます。
var str = unescape('<link rel="stylesheet" href="data:text/css,*%20%7B%20font-family%3A%20%22Meiryo%22%2C%20sans-serif%20%21important%3B%20%7D">')
console.log(str)結果は以下のようになり、"まで含めてunescapeされました。
<link rel=”stylesheet” href=”data:text/css,* { font-family: “Meiryo”, sans-serif !important; }”>
自分が上で紹介したブックマークレットは以下のものですが、効果はほぼ同じで、ChatGPTのブックマークレットは’メイリオ’が見つからなかったらゴシック系のデフォルトフォント(sans-serif)で表示しておいてねという部分が追加されています。
javascript:void((function(){document.head.innerHTML+="<style>*{font-family: 'メイリオ' !important;}</style>";})())人が書く分には、スクリプトはシンプルで短い方が良いかなと思いましたが、一瞬で所望のコードを細かいところまで気を配って返答するChatGPTはなかなかすごいです。
PR
コメント