追記
キモの拡張機能が使えなくなったので、この記事の内容はおそらく再現しないです
【注意】素人が書いた記事です。玄人はブラウザバックしてください()。
ブラウザはchrome
問題提起
background-imageにローカルファイルを使おうとするとエラーがでる
# hoge{background-image:url("file:///C:/Users/Name/miku.png");}
で
Not allowed to load local resource
なにやら、ローカルのファイルにアクセスできるとやばいそうなので仕方ない
でも、しょうがないからって
/* twitter@nounoknown様の素敵なミク */
# hoge{background-image:url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");}
毎回こんな感じで外から拾ってくる（←☆）のは、ページの表示速度的にも、データ通信量的にも頭悪い、と思っていた
誤解
☆は、別に問題なかった
教えて!goo 同じ画像 複数回使用
つまり、何度も同じurlから同じ画像を拾ってくるというアホをしないよう、ブラウザが勝手に一度拾った画像をローカルに保存していて
css中に見覚えのあるurlが出てきたら、ローカルの画像を参照するのだそう
検証
-
stylishで、任意のQiitaページに背景画像を挿入するスタイルを作る。
このとき、背景画像をあとでアクセスできなくするため自分のブログなり（githubがよいかと）にアップロードしたものを指定する -
適当なQiitaページにアクセスして、背景が変わったことを確認し、自分のブログから背景に指定した画像を完全に消去する
-
PCを再起動して、閲覧したことのないQiitaページを見に行く
-
（画像は削除したはずなのに）ちゃんと背景が変わる（変わった）
それでも
それでも最初の一回も自分のローカルに保存している、ちょー大事な画像を使いたい、ていう人は、ローカルサーバーを立てるといける
開発用ローカルサーバを立ち上げる方法
python3使うなら
$ cd ~
$ python -m http.server
とした後、~/Desktop/に背景としたい画像があるなら
# hoge{background-image:url("http://127.0.0.1:8000/Desktop/miku.png");}
蛇足
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);}
このミクさん（東京アクアリウム）の画像のおすすめソース
- 絵師ご本人様のツイッター
https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large - youtubeのサムネ
http://img.youtube.com/vi/WQSex83Lpbo/maxresdefault.jpg - ChromeのテーマHatsune miku tokyo aquariumをダウンロードし、その中身を漁る（こんな感じのところ）
C:\Users\Name\AppData\Local\Google\Chrome\User Data\Profile 2\Extensions\gmifaoeifkcepokhkammgkcpehlkfpnd\1_0\images
リンク
- 素敵なミクさん
https://twitter.com/nounoknown - 開発用ローカルサーバを立ち上げる方法
http://qiita.com/higuma/items/b23ca9d96dac49999ab9
ヒトリゴト
読んでくださってありがとうございますっっ
\def\textlarge#1{%
{\rm\Large #1}
}
\def\textsmall#1{%
{\rm\scriptsize #1}
}
（精一杯小声で）
$\textsmall{い い ね く だ さ い ！}$