【使えなくなりました💧】stylishでcssを弄るとき、background-imageをどこから拾うか

6066 ワード
Stylish Chrome Chrome テキストリンク

追記

キモの拡張機能が使えなくなったので、この記事の内容はおそらく再現しないです

【注意】素人が書いた記事です。玄人はブラウザバックしてください()。

ブラウザはchrome

問題提起

background-imageにローカルファイルを使おうとするとエラーがでる

background-img
#hoge{background-image:url("file:///C:/Users/Name/miku.png");}

で
Not allowed to load local resource

なにやら、ローカルのファイルにアクセスできるとやばいそうなので仕方ない
でも、しょうがないからって

background-img
/* twitter@nounoknown様の素敵なミク */
#hoge{background-image:url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");}

毎回こんな感じで外から拾ってくる（←☆）のは、ページの表示速度的にも、データ通信量的にも頭悪い、と思っていた

誤解

☆は、別に問題なかった
教えて!goo 同じ画像　複数回使用

つまり、何度も同じurlから同じ画像を拾ってくるというアホをしないよう、ブラウザが勝手に一度拾った画像をローカルに保存していて
css中に見覚えのあるurlが出てきたら、ローカルの画像を参照するのだそう

検証

  1. stylishで、任意のQiitaページに背景画像を挿入するスタイルを作る。
    このとき、背景画像をあとでアクセスできなくするため自分のブログなり（githubがよいかと）にアップロードしたものを指定する

  2. 適当なQiitaページにアクセスして、背景が変わったことを確認し、自分のブログから背景に指定した画像を完全に消去する

  3. PCを再起動して、閲覧したことのないQiitaページを見に行く

  4. （画像は削除したはずなのに）ちゃんと背景が変わる（変わった）

それでも

それでも最初の一回も自分のローカルに保存している、ちょー大事な画像を使いたい、ていう人は、ローカルサーバーを立てるといける
開発用ローカルサーバを立ち上げる方法

python3使うなら

http
$ cd ~
$ python -m http.server

とした後、~/Desktop/に背景としたい画像があるなら

background-img
#hoge{background-image:url("http://127.0.0.1:8000/Desktop/miku.png");}

蛇足

Qiitaの背景を変える

qiita
body{background-image: url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");background-size:auto;background-repeat:no-repeat;background-attachment:fixed;background-position:bottom;}
.container{background-color:rgba(255,255,255,0.6);}

このミクさん（東京アクアリウム）の画像のおすすめソース

リンク

ヒトリゴト

読んでくださってありがとうございますっっ

\def\textlarge#1{%
  {\rm\Large #1}
}
\def\textsmall#1{%
  {\rm\scriptsize #1}
}

（精一杯小声で）
　　$\textsmall{い　い　ね　く　だ　さ　い　！}$