カレントアウェアネスを読みやすくするためのブックマークレット

過去に何回かウェブサイトを読みやすくするためにブラウザのデベロッパーツールでCSSを書き換えるという方法をご紹介したのですが、毎回書き換えるのめんどいと思ってChat GPTに聞いたところ、ブックマークレットにすれば、ワンクリックでCSSを書き換えられるということでしたので主に自分のためにカレントアウェアネスのCSSを変更するブックマークレットを作ってみました。

適用するとどうなるか

これが

こうなります

動画にするとこんな感じです
*効果音は鳴りません https://t.co/ZtNhoAa3v4 pic.twitter.com/zINba2rqmp
— やわらか図書館学 (@yawatosho) 2025年7月1日

私は、どうも最近こういう密集した真面目な文章を読んでいると目が泳いでしまうので変更後のほうが読みやすいですが、もちろん変更前のほうが読みやすいという方もいるかと思います。

使い方

CSSリライト for CA

ブラウザの「ブックマークバー」を表示（Ctrl + Shift +B または ⌘ + Shift +B）
上の青いボタンをブックマークバーへドラッグ
カレントアウェアネスで、そのブックマークをクリック
もとに戻したいときはページを再読み込み

補足

どんなコードが実行されているか、気になるかと思いますので、上記ブックマークレットで実行されるスクリプトを公開します。

javascript:(() => {
const l = document.createElement('link');
l.rel = 'stylesheet';
l.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap';
document.head.appendChild(l);

const s = document.createElement('style');
s.textContent = `
body, html, #main, .entry-content {
font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif !important;
}
#main {
margin: 0 auto !important;
width: 800px !important;
}
.entry-content > *,
.entry-content p {
line-height: 2.5 !important;
letter-spacing: .3px !important;
text-align: justify !important;
}
.sidebar {
display: none !important;
}
`;
document.head.appendChild(s);
})();

簡単に実行内容を説明すると以下のようなことをしています。CSSは自分で作成し、ブックマークレット化はChatGPTにお願いしました。

日本語フォント「Noto Sans JP」を読み込み
本文部分（#main）を画面の中央に幅800pxで配置
段落や見出しの行間・字間を広げて両端揃え
本文に集中するためにサイドバー（.sidebar）は非表示
実行はすべてブラウザ上で完結し、ページを再読み込みすれば元に戻る一時的なスタイル調整です。Google Fonts のフォント取得以外のネットワーク通信は行いません。

イワズモガナーですが、読みやすさは見る人や環境によって違うと思いますので、気になるところがあれば、追加したブックマークレットの編集で、適宜読みやすいように値を変更していただければと思います。

お相手は、やわらか図書館学でした。