私がよく使うブックマークレット

私的、めっちゃ私的です (;'∀')。まぁ以前に比べたら少しは成長してるのではないかと思ってたりします...

自分好みに修正して使ってくれたらうれしいかも。

INDEX

JavaScript の内容について
フォントを変更
行間 / 文字間
背景色 / 文字色
記事幅縮小

JavaScript の内容について

修正（更新）めも

2016.08.30 - 【MSPg】AAは pre タグの場合もあるので pre 指定を外す
2016.08.30 - 【16px】pre は指定しない、シンタックス・ハイライトの class を指定
2016.08.31 - 【MSPg】モナーフォントなど追記
2016.08.31 - 【黒背景】a:visited の記述ミス訂正, a:hover,a:active 追記
2016.08.31 - 【白背景】a:hover,a:active 追記
2021.01.16 - Chrome 向けに等幅設定を変更、など修正

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,var,samp,pre.code,pre span.synComment{font-family: monospace,monospace !important;}';
head[0].appendChild(style);
})();

CSSわかる方なら説明不要ですが、 head 要素の末にエンベッドでスタイルシート ( = style タグ) を挿入するわけです。

修正する際の注意点

style.innerHTML='ここにCSS' 行の引用符内にCSSを記述
var の後のスペースは必須（※ Firefox では %20 に置換される）
var の後以外のスペースは必須ではない（あった方が見やすいけど）
ブックマークの手動作成＆修正時は改行をすべてなしにする

尚、リンクをドラッグ＆ドロップしてブックマークに登録する場合は、一度上か下へドラッグしないとだめかもしれません。すみません...

下記ブックマークレットは元に戻す用、style タグを1個ずつ削除します。

style削除(x1)

フォントを変更

inherit = ユーザー側指定のフォントに強制変更（※ pre,code,kbd は monospace を再指定）

* {
font-family: inherit !important;
}

pre,code,kbd,var,samp,pre.code,pre span.synComment {
font-family: monospace,monospace !important;
}

MSPg = ＭＳＰゴシック に変更 - AA（アスキーアート）表示用とか（AAは pre タグを使う場合もあるのでちょっと変更）

* {
font-family:\'ＭＳ Ｐゴシック\',\'MS PGothic\',Monapo,\'IPA モナー Pゴシック\',IPAMonaPGothic,Mona,\'梅Pゴシック\',Textar,RobotoJAA,aahub_light !important;
}

16px = フォントサイズを 16px に

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span {
font-size: 16px !important;
}

.synConstant,
.synIdentifier,
.synSpecial,
.synStatement,
.synType {
font-size: inherit !important;
}

行間 / 文字間

1.5 1px = 行間 1.5, 文字間 1px

f:id:palm84:20160829231237p:plain

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span {
line-height: 1.5 !important;
letter-spacing: 1px !important;
}

2 2px = 行間 2, 文字間 2px

f:id:palm84:20160829231151p:plain

body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span {
line-height: 2 !important;
letter-spacing: 2px !important;
}

背景色 / 文字色

記事文章以外の部分がいまいちなのでベータ版ということで... orz

元ページ

f:id:palm84:20160829231149p:plain

リンクも少し修正してます。

白背景 = 白背景, 黒文字

f:id:palm84:20160829231150p:plain

body,div,h1,h2,h3,h4,h5,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,em,span {
color: #000! important;
background-color: #fff !important;
text-shadow: none !important;
}

a:link {
color: blue !important;
text-shadow: none !important;
text-decoration: underline !important;
}

a:visited{
color: sienna !important;
text-shadow: none !important;
text-decoration: underline !important;
}

a:hover,a:active {
color: white !important;
background-color: #009 !important;
text-decoration: none !important;
}

黒背景 = 反転 [黒背景, 白抜き文字]

f:id:palm84:20160829231148p:plain

body,div,h1,h2,h3,h4,h5,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,em,span {
color: #fff !important;
background-color: #000 !important;
text-shadow: none !important;
}

a:link{
color: orange !important;
text-decoration: underline !important;
text-shadow: none !important;
}

a:visited{
color: sienna !important;
text-decoration: underline !important;
text-shadow: none !important;
}

a:hover{
color: brown !important;
background-color: white !important;
text-decoration: none !important;
}

下記2点はここのサイドバーに置いてるものと同じです。Wikipediaアプリのダークモード風味にしてみました...

(薄)黒背景 = 反転 [黒背景, 白抜き文字] (2021.1.16 追記)

body,div,h1,h2,h3,h4,h5,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span,pre,#blog-title,.index,.white,.palmst,.kuma,.kuma2,.kumakuma,.test_kuma,.kuma_test,#test_kuma,#kuma_test{
color:#eee!important;
background-color:#333!important;
text-shadow:none!important;
}
code{
color:#333!important;
background-color:#ccc!important;
text-shadow:none!important;
}
.font_change{
background-color:#333!important;
}
a:link{
color:orange!important;
text-shadow:none!important;
text-decoration:underline!important;
}
a:visited{
color:sienna!important;
text-shadow:none!important;
text-decoration:underline!important;
}
a:hover{
color:brown!important;
background-color:silver!important;
text-decoration:none!important;
}

(薄)黒背景2 = 反転 [黒背景, 白抜き文字] なんちゃってダークモード風味(笑) (2021.1.16 追記)

body,div,h1,h2,h3,h4,h5,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span,pre,#blog-title,.index,.white,.palmst,.kuma,.kuma2,.kumakuma,.test_kuma,.kuma_test,#test_kuma,#kuma_test {
color:#eee!important;
background-color:#333!important;
text-shadow:none!important;
}
code {
color:#333!important;background-color:#ccc!important;
text-shadow:none!important;
}
.font_change {
background-color:#333!important;
}
a:link {
color:#6495ed!important;
text-shadow:none!important;
text-decoration:underline!important;
}
a:visited {color:#008080!important;
text-shadow:none!important;
text-decoration:underline!important;
}
a:hover {color:brown!important;
background-color:#ccc!important;
text-decoration:none!important;
}