全要素取得なんてアホなことせんでええんやで【ブックマークレット】

html要素のすべてのスタイルを変えたいとおもったときになぜか要素を全取得しないといけないんじゃないかと思ったため執筆

cssの全要素指定は * アスタリスク

スタイルシートで*アスタリスクをつかうことで全要素のスタイルを変更することができます。

*{
font-size: 13px;
}

なにがしたかったのかというWikipediaのスタイルを変えたかった。Wikipediaのページをただみてるだけだと、なにも感じないが検索頻度があがってなんどもページにおとずれるようになると、文字がおおきすぎてなんだか野暮。そもそもマウスの縦スクロールって疲れるんですよ。

cssをいじるブックマークレット

cssをいじるブックマークレットはネットで公開されている人がいるのでそのコードをコピペしましょう。ありがたいです。

JavaScript の内容を見やすくするとこんなかんじで…

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);
})();
CSSわかる方なら説明不要ですが、 head 要素の末にエンベッドでスタイルシート ( = style タグ) を挿入するわけです。
引用元: 私がよく使うブックマークレット – palm84.com

べつになんのことはないコードですがjavascriptってすげえよなあって毎回おもいます。

Wikipediaを自分がみやすいようにする

cssの全要素指定が*アスタリスクなので、こうする。

*{font-size:13px:line-height:1;}

まあまあ読みやすくなったのではないかと。

paddingとかmarginを設定してもいいけど、そこまで削るとさすがに表示がおかしくなるのでそのあたりは好みで調整するのがよいのではないかと思います。。

雑感

ブックマークレットとはいえ、もしcssを変更するんだったらクリックする作業が発生するので、そのコストも考慮する必要があります。

自分で書いてて思いますけどちょうしょうもないことやってます。しかし塵もつもればなんとやらな精神でやりたかったらやる方向で。