cssの全要素指定は * アスタリスク
まず前提知識としてcssで*アスタリスクをつかうことで全要素のスタイルを変更することができます。
*{ font-size: 13px; }cssでウェブページの見た目を変更するブックマークレット
javascript:(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{font-family: monospace !important;}';
head[0].appendChild(style);
})();このコードをブックマークレットに登録して実行すると head 要素の末にstyleタグが挿入されます。
Wikipediaを自分がみやすいようにする
このブックマークレットをつかってwikipediaを自分が読みやすいようにしてみます。
この部分を書き換えました
style.innerHTML='*{font-size:13px:line-height:1;}';
行間が狭くなったのであまりスクロールしなくてよくなりました。
要素の検証で変更したほうがはやい？
ぶっちゃけるとこのブックマークレットをつかわなくてもブラウザの要素の検証でスタイルを書いて変更しても手間としてはそんなに変わりません。今回のブックマークレットはちょっとネタ的な要素があったと思います。しかしこれを応用すればおもしろいものができるかもしれません。
ウェブページの見た目を変更するなら他の方法もある
特定のウェブページの見た目を変更する方法はさきほどのブックマークレットを使う方法以外にもchromeの拡張機能を自作する方法もあります。この方法は特定のページにアクセスした際にあらかじめ用意しておいたスタイルシートを読み込んでウェブページの見た目を変更します。
ここでは詳しくは解説しませんが、拡張機能を使う方法もあるということを知っておいてもいいかなと思います。
コメント