palm84.com

革命的愛熊主義者同盟!

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

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

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

INDEX

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個ずつ削除します。

フォントを変更

  • 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 = MS Pゴシック に変更 - AA(アスキーアート)表示用とか(AAは pre タグを使う場合もあるのでちょっと変更
* {
font-family:\'MS Pゴシック\',\'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;
}

記事幅縮小

ちょっと昔の個人のホームページとか文章が横幅いっぱいに広がって読みにくい場合とかに使ってます。

f:id:palm84:20160829231152p:plain

f:id:palm84:20160829231153p:plain

body {
width: 60%;
margin: 5% 15%;
}

どんなもんかなぁ?


ほなね