palm84.com

革命的愛熊主義者同盟!

ブックマークレットでページのフォントを変更します...

2021.01.16 Chrome 向けに等幅設定を変更、など修正

ここのサイドバーにも置いてるやつです。めっちゃ私的であります。

いまでも「MS Pゴシック」指定のサイトがあったり、最近では「源ノ角ゴシック」とか「游ゴシック」指定のページもあったりということで、それ以外の自分の好きなフォント設定で読みたい時に使っとります。

リンクをブックマークへドラッグ&ドロップするか、右クリックメニューから登録できます。

※ AAとか pre 要素も変わっちゃったりとかまだまだ完璧ではありませんけど...。

Index
  1. 標準設定フォントに変更
  2. フォントサイズを変更
  3. pre, code などを等幅指定
  4. JavaScript について
  5. いろいろ

標準設定フォントに変更

一旦全称セレクタ(*)指定で見出しなども含めすべてのフォントをブラウザの基本設定フォントを指定、pre, code などは monospace に再指定。

* {
font-family: inherit !important;
}
pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace, monospace !important;
}
  • inherit (* {font-family: inherit !important;})
  • 戻す - ※ 追加した style 要素を削除(1つずつ)

※ 但し、AA(アスキーアート)も変更されるので本文以外はちょっとおかしくなるかも。

下記はAA表示可能なフォントを列挙(※ pre も変更)

フォントサイズを変更

見出し以外の主な要素のフォントサイズを指定します。

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span {
font-size:15px!important;
}

目的は「本文を読みやすく」なのですが pre 要素も変わっちゃうのでいまいちかも、すみません。

pre, code など等幅指定

pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace, monospace !important;
}

JavaScript について

JavaScript の内容...

  • inherit 指定の例
function() {
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='* {font-family: inherit !important;} pre,code,kbd,var,samp,pre.code,pre span.synComment {font-family: monospace,monospace !important;}';
head[0].appendChild(style);
}

上記のCSS指定がこんなかんじ...

* {
font-family: inherit !important;
}
pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace,monospace !important;
}
  • JavaScript 文の注意点 :
    • var の後のスペースは必須、それ以外はあってもなくても(※ Firefox では %20 に置換される)
    • 日本語、及びスペース含むフォント名を指定する場合、CSSでは = 'メイリオ','Meiryo UI' の様に引用符で囲むが上記の JavaScript 文では引用符内(重複)なので \ でエスケープする = \'メイリオ\',\'Meiryo UI\'

いろいろ

参考リンク、関連リンクとか

おまけ : 右クリック禁止を禁止!(笑)


ほなほな