読者です 読者をやめる 読者になる 読者になる

palm84.com

革命的愛熊主義者同盟!

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

JavaScript CSS 小ネタ

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

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

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 追記

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 タグ) を挿入するわけです。

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

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

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

フォントを変更

  • inherit = ユーザー側指定のフォントに強制変更(※ pre,code,kbd は monospace を再指定)
* {
font-family: inherit !important;
}

pre,code,kbd {
font-family: monospace !important;
}
  • MSPg = MS Pゴシック に変更 - AA(アスキーアート)表示用とか(AAは pre タグを使う場合もあるのでちょっと変更
* {
font-family:\'MS Pゴシック\',\'MS PGothic\',Monapo,\'IPA モナー Pゴシック\',IPAMonaPGothic,Mona,\'梅Pゴシック\',Textar !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;
}

記事幅縮小

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

f:id:palm84:20160829231152p:plain

f:id:palm84:20160829231153p:plain

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

どんなもんかなぁ?


ほなね


確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

裏切りのプログラム ハッカー探偵 鹿敷堂桂馬 (文春e-book)

裏切りのプログラム ハッカー探偵 鹿敷堂桂馬 (文春e-book)

まんがでわかるLinux シス管系女子 2(日経BP Next ICT選書)

まんがでわかるLinux シス管系女子 2(日経BP Next ICT選書)