PC-More

PCの便利化、Windowsのフリーソフトや、カスタマイズ方法の紹介。

Microsoft Edge でユーザースタイルを適用する

Microsoft Edge(以下Edge)でユーザースタイルを適用する方法です。

Tampermonkey」(タンパーモンキー)という拡張機能を使った方法です。

追加(インストール)

デスクトップ左下にあるWindowsロゴのボタンをクリックして表示されるスタートメニューや、デスクトップ下部にあるタスクバーから、「Microsoft Store」をクリックします。
画像

出た画面の右上にある、「検索」をクリックします。
画像

出た検索窓に「TAMP」と入力し、出た候補から、「Tampermonkey」をクリックします。
画像

インストール」をクリックします。
画像

もし、サインインの画面が出た場合は、閉じても構いません。
画像

ダウンロードとインストールが開始されますので、完了を待ちます。
画像

インストールの完了メッセージが出ればOKです。
画像

Microsoft Storeのウィンドウを閉じます
画像

Edgeのウィンドウを表示します

Edgeの画面の右上に、Tampermonkeyが追加された旨のメッセージが出ますので、「有効にする」をクリックします。
画像

右上にTampermonkeyのボタンが追加されていれば、インストール完了です。
画像

Tampermonkeyのボタンが表示されない場合は、右上の「・・・」ボタンをクリックします。
画像

拡張機能」をクリックします。
画像

Tampermonkey」のスイッチをクリックし、オン(色付きのスイッチ)の状態にします。
画像

その後、どこかのタイミングでTampermonkeyのインストール完了ページが表示された場合は、一読してそのタブを閉じます
画像

ユーザースタイルの適用

Edgeの画面の右上にある、Tampermonkeyのボタンをクリックします。
画像

クリックしても、読み込み中の画像が出るだけで、メニューが表示されない場合は、Edgeを一度閉じ、もう一度起動します
画像

メニューが出たら、「新規スクリプトを追加...」をクリックします。
画像

新規スクリプトの編集画面が出ます
画像

入力欄の中の文章を全て消します

削除方法は、入力欄内を一度クリックし、「Ctrl」キーを押しながら「A」キーを押し、文字が反転されたら、「Delete」キーを押します。

画像

そこに、以下のグレーの枠内の文章コピー&ペーストします。

以下は、Yahoo関連のサイトを太字にする例です。ご自身の目的に合わせてカスタマイズして使ってください。

スタイル部分の記述につきましては、「1行での書き方」と「複数行での書き方」があります。どちらでもお好きな方をお使いください。

1行での書き方

// ==UserScript==
// @name Yahoo関連
// @match https://yahoo.co.jp/*
// @match https://*.yahoo.co.jp/*
// @run-at document-start
// ==/UserScript==

function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}

addGlobalStyle('   *{font-weight: bold !important;}   ');

参考元:Greasemonkeyマッシュアップを学ぶ

複数行での書き方

// ==UserScript==
// @name Yahoo関連
// @match https://yahoo.co.jp/*
// @match https://*.yahoo.co.jp/*
// @run-at document-start
// ==/UserScript==

(function() {var css = [

" *{ ",
" font-weight: bold !important; ",
" } ",

].join("\n");
if (typeof GM_addStyle != "undefined") {
  GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
  PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
  addStyle(css);
} else {
  var node = document.createElement("style");
  node.type = "text/css";
  node.appendChild(document.createTextNode(css));
  var heads = document.getElementsByTagName("head");
  if (heads.length > 0) {
    heads[0].appendChild(node);
  } else {
    // no head yet, stick it whereever
    document.documentElement.appendChild(node);
  }
} })();

参考元:Clean and Dark Tweetdeck _ Userstyles.org

※オリジナルのクレジット
スクリプト名:Clean and Dark Tweetdeck
製作者:Sund
ホームページ:https://userstyles.org/styles/166986

編集

文章をコピー&ペーストしたら、以下のようにして、上記の赤文字部分だけを編集します。

まず、「Yahoo関連」を、対象サイト名やスタイル名等に書き換えます。

次に、「https://yahoo.co.jp/*」「https://*.yahoo.co.jp/*」を、対象URLに書き換えます。

この場合の「*」は「」「なんとか」という意味です。
この「// @match ~」は複数記述可能ですし、1つだけでも構いません。

次に、下の方にある赤字部分スタイル(CSS)ですので、そこを目的のスタイルに書き換えます。

「1行での書き方」の場合は、スタイル部分だけは改行は無くし、1行で記述してください。
「複数行での書き方」の場合は、スタイル1行ずつを「"",」という感じで囲みます。半角文字です。
注意点は、例にあるように、なるべく値の最後に「 !important」を付けてください。そのスタイルが適用されやすくなります。

編集が済んだら、入力欄のすぐ上にあるメニューバーで、「ファイル」→「保存」にクリックします。
画像

一覧画面が表示された場合は、先程保存したスクリプト名をクリックすると編集画面に戻れます。
画像

上記でユーザースクリプトが保存されましたので、目的のページを開き、Edgeの画面の上部にある更新ボタンをクリックするか、「F5」キーを押して、ページを更新し、スタイルが適用された事を確認します
画像

以上で、スタイルの適用は完了です。

スタイルが適用されない場合は、スタイルの記述が正しいかを確認してください。

スタイルが正しいにも関わらず反映されない場合は、Tampermonkeyボタンをクリックして出るメニューの「ダッシュボード」か、スクリプト編集画面上部の「インストール済み UserScript」タブをクリックして開き、対象のスクリプトの名前が付いた行の、「有効」の欄のスイッチのマークオンの状態(色付きの状態)である事を確認してください。
画像

スタイルを再編集したい場合

Tampermonkeyの画面を開いている場合は、「インストール済みの UserScript」タブをクリックし、編集したいスクリプト名をクリックします。
画像

Tampermonkeyの画面を開いていない場合は、Edgeの画面の右上にあるTampermonkeyのボタンをクリックします。
画像

ダッシュボード」をクリックします。
画像

名前」の欄にある、編集したいスクリプトの名前をクリックします。
画像

スタイル(スクリプト)を追加したい場合

Tampermonkeyの画面を開いている場合は、「+」タブをクリックします。
画像

Tampermonkeyの画面を開いていない場合は、Edgeの画面の右上にあるTampermonkeyのボタンをクリックします。
画像

出たメニューから、「新規スクリプトを追加...」をクリックします。
画像

スタイル(スクリプト)を削除したい場合

Tampermonkeyの画面を開いている場合は、「インストール済みの UserScript」タブをクリックし、削除したいスクリプトの行の右端にある「操作」の欄のごみ箱マークをクリックし、「OK」をクリックします。
画像

Tampermonkeyの画面を開いていない場合は、Edgeの画面の右上にあるTampermonkeyのボタンをクリックします。
画像

ダッシュボード」をクリックします。
画像

削除したいスクリプトの行の右端にある「操作」の欄のごみ箱マークをクリックします。
画像

OK」をクリックします。
画像

拡張機能をアンインストール(削除)したい場合

Tampermonkeyのアンインストール(削除)方法です。

Edgeの画面の右上にあるTampermonkeyのボタン右クリックします。
画像

管理」をクリックします。
画像

出たメニューの下の方にある「アンインストール」をクリックします。(表示されない場合は下にスクロールしてください)
画像

OK」をクリックします。
画像

Edgeを終了します。

エラーについて

Tampermonkeyの画面の上部に、「Tampermonkey detected inconsistencies that indicate that your browser wiped the extension database!」(Tampermonkeyは、あなたのブラウザが拡張データベースを一掃したことを示す矛盾を検出しました!)というエラーが出た場合は、 一度、Tampermonkeyの画面が何も表示されていない状態でTampermonkeyのアンインストールを行い、再度インストールしてみてください。