はじめに
Webサイトや社内ツールを使っていると、「文字が小さい」「不要なパネルが多い」「必要な情報が見づらい」と感じることがあります。
そんなときに便利なのが、Tampermonkey を使った画面表示のカスタマイズです。CSSを追加したり、不要な要素を非表示にしたり、自分用の見やすい表示に整えられます。
この記事では、Tampermonkeyで画面表示を見やすくする基本の考え方と、初心者向けのサンプルを紹介します。
- 背景色や文字サイズを変える基本
- 不要な要素を非表示にする例
- よくある改善パターン
- 重要な情報を目立たせる例
- 切り替えボタンを追加する例
Tampermonkey全体の導入や基本を先に確認したい場合は、Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説 から読むと流れをつかみやすいです。
この記事の前提
- Tampermonkeyを導入済みである
- まずは自分用の見た目調整から試す
- サイト全体の動作を壊さないよう、小さな変更から始める
画面表示のカスタマイズは、操作の自動化より安全に始めやすいテーマです。最初の1本としても扱いやすいです。
Tampermonkeyで画面表示を変えると何が便利か
Tampermonkeyで見た目を調整すると、次のような改善がしやすくなります。
- 文字が小さい画面を読みやすくする
- 使わないサイドバーや広告を隠す
- よく見る情報だけ目立たせる
- 毎日触る管理画面を自分向けに整える
派手な変更よりも、「毎回少し気になる」を減らす用途で特に効果が出やすいです。
よくある改善パターン
初心者が最初に試しやすく、効果も出やすいのは次のような調整です。
- サイドバーや広告バナーを隠す
- 本文エリアの横幅を広げる
- 文字サイズと行間を読みやすくする
- 更新日時やステータス表示を目立たせる
- 背景色を落ち着いた色に変える
いきなり大きく変えるより、1項目ずつ追加して確認していくほうが失敗しにくいです。
画面表示をカスタマイズする基本
Tampermonkeyで見た目を変える方法は、大きく分けて次の2つです。
- JavaScriptで要素のスタイルを直接変更する
- style タグを追加してCSSをまとめて当てる
まずは、最小構成のサンプルを見てみます。
// ==UserScript==
// @name Simple Style Change
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Change page styles
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
document.body.style.backgroundColor = '#fffbe6';
document.body.style.fontSize = '16px';
})();このように、まずは document.body.style を変えるだけでも、見た目の差を確認できます。
スタイルを何度も追加するなら、CSSをまとめて入れる補助関数を作っておくと管理しやすいです。
function appendStyle(cssText) {
const style = document.createElement('style');
style.textContent = cssText;
document.head.appendChild(style);
}以降のサンプルでも、この形に寄せると追記や修正がしやすくなります。
不要な要素を非表示にする例
見づらさの原因が不要なパネルや固定メニューなら、非表示にするだけでかなり快適になります。
// ==UserScript==
// @name Hide Unused Panel
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const panel = document.querySelector('.side-panel');
if (panel) {
panel.style.display = 'none';
}
})();要素を削除するのではなく、まずは display: none で隠す程度から試すと安全です。
CSSをまとめて追加する例
調整したい箇所が複数ある場合は、style タグを追加してまとめて管理すると見通しがよくなります。
// ==UserScript==
// @name Add Custom CSS
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const style = document.createElement('style');
style.textContent = `
body {
background: #f7f8fb;
font-size: 15px;
line-height: 1.7;
}
.header,
.ad-banner,
.help-widget {
display: none !important;
}
.main-content {
max-width: 960px;
margin: 0 auto;
}
`;
document.head.appendChild(style);
})();この方法なら、背景色、余白、非表示にしたい要素などを一箇所で管理できます。
特に管理画面では、「どの要素を隠すか」と「どの余白を広げるか」を一箇所にまとめておくと、あとで調整しやすいです。
重要な情報を目立たせる例
見落としたくない情報だけを強調したいときは、対象要素に色や枠線を付ける方法が便利です。
// ==UserScript==
// @name Highlight Important Area
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const target = document.querySelector('.important-message');
if (target) {
target.style.backgroundColor = '#fff4cc';
target.style.border = '2px solid #f0b400';
target.style.padding = '12px';
}
})();単純な色変更でも、毎回探していた情報がかなり見つけやすくなります。
切り替えボタンを追加する例
常に表示を変えるのではなく、自分のタイミングで切り替えたいこともあります。
その場合は、ページ上にボタンを置いて表示モードを切り替える方法が使いやすいです。
// ==UserScript==
// @name Toggle Focus Mode
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const button = document.createElement('button');
button.textContent = '集中表示';
Object.assign(button.style, {
position: 'fixed',
right: '16px',
bottom: '16px',
zIndex: '9999',
padding: '8px 12px'
});
button.addEventListener('click', () => {
document.body.classList.toggle('focus-mode');
});
const style = document.createElement('style');
style.textContent = `
.focus-mode .side-panel,
.focus-mode .ad-banner {
display: none !important;
}
.focus-mode .main-content {
max-width: 960px;
margin: 0 auto;
}
`;
document.head.appendChild(style);
document.body.appendChild(button);
})();固定で隠すより、このような切り替え式のほうが使いやすい場面も多いです。
表示モードを保持する例
毎回ボタンを押し直したくない場合は、localStorage を使って表示モードを保持できます。
// ==UserScript==
// @name Toggle Focus Mode Persist
// @match https://example.com/*
// @grant none
// ==/UserScript==
(() => {
'use strict';
const STORAGE_KEY = 'tm-focus-mode';
const button = document.createElement('button');
button.textContent = '集中表示';
Object.assign(button.style, {
position: 'fixed',
right: '16px',
bottom: '16px',
zIndex: '9999',
padding: '8px 12px'
});
const style = document.createElement('style');
style.textContent = `
.focus-mode .side-panel,
.focus-mode .ad-banner {
display: none !important;
}
.focus-mode .main-content {
max-width: 960px;
margin: 0 auto;
}
`;
const enabled = localStorage.getItem(STORAGE_KEY) === '1';
if (enabled) {
document.body.classList.add('focus-mode');
}
button.addEventListener('click', () => {
const active = document.body.classList.toggle('focus-mode');
localStorage.setItem(STORAGE_KEY, active ? '1' : '0');
});
document.head.appendChild(style);
document.body.appendChild(button);
})();頻繁に使う画面なら、このように前回の表示状態を残すだけでもかなり快適になります。
画面表示のカスタマイズがうまく動かないとき
見た目の変更が反映されないときは、次の点を確認すると原因を見つけやすいです。
@matchが合っていない
対象URLが一致していないと、そもそもスクリプトが実行されません。
セレクタが違う
.side-panel や .important-message が実際のHTMLと一致していないと対象要素を取得できません。
まずは開発者ツールでクラス名や構造を確認するのがおすすめです。
後から要素が表示される
SPA や動的に描画される画面では、ページ読み込み直後に対象要素がまだ存在しないことがあります。
その場合は setTimeout や MutationObserver を使って、要素が出てきてからスタイルを当てます。
特に社内ツールやReact系の画面では、このパターンがかなり多いです。
CSSが上書きされる
サイト側のCSSが強い場合は、!important を使わないと反映されないことがあります。
ただし多用しすぎると調整が難しくなるので、必要な箇所だけに使うほうが安全です。
注意点
画面表示のカスタマイズは比較的安全ですが、次の点には注意が必要です。
- 重要なボタンやエラーメッセージまで隠さない
- 業務画面では変更後に操作できるか確認する
- サイトの画面変更で急に効かなくなることがある
- 利用規約や社内ルールに反する改変は避ける
まずは背景色、余白、不要パネルの非表示など、影響が小さい変更から始めると安心です。
「見やすくする」目的なら、まずは次の順で試すと失敗しにくいです。
- 文字サイズと行間を調整する
- 不要なパネルを1つだけ隠す
- 重要な情報を色で目立たせる
- 問題がなければ切り替えボタンや保存機能を足す
関連記事
- Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説
- Tampermonkeyで自動クリックする方法｜初心者向けサンプル付き
- Tampermonkeyでフォーム入力を効率化する方法｜初心者向けサンプル付き
まとめ
Tampermonkeyを使えば、Webページの見た目を自分向けに整えやすくなります。
- 小さなCSS調整だけでも使いやすさは大きく変わる
- 不要な要素を隠すだけで画面がすっきりする
- 固定変更より切り替えボタン式のほうが安全な場面も多い
- 毎日使う画面では localStorageで表示状態を保持すると便利
Tampermonkeyとは？初心者向け使い方と簡単スクリプト解説で基本を押さえたうえで、自動クリック、フォーム入力、画面表示カスタマイズと広げていくと、Tampermonkeyでできることの全体像がつかみやすくなります。
コメント