フォントを切替えるBookmarklet

Scrapboxのカスタマイズじゃないけど・・・

ブラウザの表示フォントを切り替えます。（インストールしてあるフォント）

設定の変更として持続されるものではありません。

一時的な変更です。印刷とかスクショとかプレゼンとか、そのときだけのための機能です。

ブックマークレットを複数作るよりも、ラジオボタンにする方がスマートかなぁ・・・と。

このスクリプト文字列をブックマークアドレスに登録して Bookmarklet にして下さい。

$ javascript:(function()%7Bvar%20currentUrl%20%3D%20decodeURIComponent(window.location.href)%3Bvar%20scriptUrl%20%3D%20currentUrl.split('https%3A%2F%2Fscrapbox.io%2F')%5B1%5D%3BscriptUrl%20%3D%20'https%3A%2F%2Fscrapbox.io%2Fapi%2Fcode%2F'%20%2B%20scriptUrl%20%2B%20'%2FRUN-script.js'%3Bfetch(scriptUrl).then(response%20%3D%3E%20%7Bif%20(!response.ok)%20%7Bthrow%20new%20Error('Network%20response%20was%20not%20ok')%3B%7Dvar%20existingScript%20%3D%20document.querySelector(%60script%5Bsrc%3D%22%24%7BscriptUrl%7D%22%5D%60)%3Bif%20(!existingScript)%20%7Bvar%20elm%20%3D%20document.createElement('script')%3Belm.setAttribute('src'%2C%20scriptUrl)%3Belm.onload%20%3D%20function()%20%7Bthis.remove()%3B%7D%3Bdocument.body.appendChild(elm)%3B%7D%7D).catch(error%20%3D%3E%20%7Balert(%60RUN-script.js%20%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%60)%3B%7D)%7D)()

もとのフォントに戻すときは、ブラウザのページをリロード（再読み込み）して下さい。

code:RUN-script.js

// 選択肢の配列を作成します。

var options = [

'Takao Pゴシック',

'Takaoゴシック',

'Takao P明朝',

'Takao明朝',

'Noto Sans Mono CJK JP Regular',

'VL ゴシック',

'みかちゃん'

]; // フォントの名称を正しく書かないと認識できない　各自のインストール環境に合わせて下さい

// ラジオボタンを格納するためのdiv要素を作成します。

var div = document.createElement('div');

div.style.position = 'absolute';

div.style.left = '200px'; // X座標を指定します。

div.style.top = '250px'; // Y座標を指定します。

div.style.backgroundColor = 'white'; // 背景色を白に設定します。

div.style.border = '1px solid black'; // 枠線を設定します。

div.style.padding = '10px'; // パディングを設定します。

// 選択肢の数だけループを回します。

for (var i = 0; i < options.length; i++) {

// 新しいラジオボタン要素を作成します。

var radioButton = document.createElement('input');

radioButton.type = 'radio';

radioButton.name = 'option';

radioButton.value = i + 1; // 数値を設定します。

radioButton.id = 'option' + i;

// ラジオボタンをdivに追加します。

div.appendChild(radioButton);

// ラベル要素を作成します。

var label = document.createElement('label');

label.htmlFor = radioButton.id;

label.style.marginLeft = '5px'; // ラベルの左側にマージンを追加します。

// ラベルをdivに追加します。

div.appendChild(label);

// 改行要素を作成します。

var br = document.createElement('br');

// 改行をdivに追加します。

div.appendChild(br);

}

// ボタン要素を作成します。

var button = document.createElement('button');

button.onclick = getSelectedOption;

button.textContent = '表示フォントを選択します'; 　　　// ボタンのテキストを変更します。

button.style.marginTop = '20px'; // ボタンの上部にマージンを追加します。

// 選択したオプションに対応した処理に分岐します。

function getSelectedOption() {

var options = document.getElementsByName('option');

for (var i = 0; i < options.length; i++) {

case 1:

document.head.innerHTML+="<style>*{font-family: 'Takao Pゴシック' !important;}</style>";

break;

case 2:

document.head.innerHTML+="<style>*{font-family: 'Takaoゴシック' !important;}</style>";

break;

case 3:

document.head.innerHTML+="<style>*{font-family: 'Takao P明朝' !important;}</style>";

break;

case 4:

document.head.innerHTML+="<style>*{font-family: 'Takao明朝' !important;}</style>";

break;

case 5:

document.head.innerHTML+="<style>*{font-family: 'Noto Sans Mono CJK JP Regular' !important;}</style>";

break;

case 6:

document.head.innerHTML+="<style>*{font-family: 'VL ゴシック' !important;}</style>";

break;

case 7:

document.head.innerHTML+="<style>*{font-family: 'みかちゃん' !important;}</style>";

break;

}

div.style.display = 'none'; // ラジオボタンを非表示にします。

break;

}

}

}

// このページの先頭へスクロールを戻す

window.scrollTo(0, 0);

// ボタンをdivに追加します。

div.appendChild(button);

// divをドキュメントに追加します。

document.body.appendChild(div);

https://gyazo.com/4f01451f8ef8ef024e08ad4fae199c82