2 年 ago
韵, 科
1 minute

Qiitaへの初めての投稿です．
Jupyter Notebookの背景や文字色，アイコンなどのテーマをWindowsで変更する方法の記事です．
Mac bookあたり欲しい

目的

便利な Jupyter Notebook を自分仕様のカラーリング，背景にします．

キャプチャ3.PNG
環境
    • Windows 10 (7でも)

 

    • Google Chrome

 

    • Anaconda3 version 1.4.0? 多分

Jupyter Notebook version 4.1.0? 多分

Jupyter Notebook，素敵ですよね

この2016年春から機械学習を本格的に(?)勉強し始めたのですが，新しくPythonを触ることになり，更には便利なIPython，からのJupyter Notebookを触ることになりました．素敵です．Jupyter Notebook．ただ，やっぱり画面の色が白っぽいと疲れませんか…

キャプチャ2.PNG

Jupyter Notebookがブラウザソフト(?)で動くってことは，htmlだかcssだかでいじれるんちゃう? ってことで検索すると，やっぱりありましたね．あります．
ただ僕のWindows君だと上手くいかなかったです．特にプログラム実行させるノートのとこで．
検索してもWindows使ってる場合は解決できていない様で，困ってる方も多いかなと思ったので，メモで置いとかずに世話になってるQittaに書くことにしました．

CSSファイルが何処か分からん

F12を押して確認するも
っぽいのは見つかる…
どこや
まあ情弱なんで何処か分からない…Windowsメニューで検索すると何個か出てくる…
どれや
で結局見つけました．
どのCSSがどんな意味があるのか分かれば教えてください

具体的な方法

残念ながらWindows7，10での方法です．Linux系とかは大体ネットで調べたら出てくるので…

    1. まず，エクスプローラを開いてアドレスバーかコマンドラインとかなんでもいいので

 

    1. C:\Users\(あなたの名前とか)\.jupyter\custom

 

    1. に行きます．多分最初はcustomが無いと思うので無ければcustomフォルダを作ってください．

 

    1. 作ったcustomフォルダの中に，cssファイル custom.css を作ります．custom.cssを開いて，中身に適用させたいCSSを記述します．Jupyter Notebookで使われてる属性は，Chrome だと Jupyter Notebook を起動してキーボードの F12 を押すと見れると思います．

 

    1. でもまぁぶっちゃけめんどくさいので，素敵なものを作ってくれている方がいます．https://github.com/nsonnad 勝手にリンク張って大丈夫かな… ここから気に入ったCSSをダウンロードなりして，さっき作ったCSSファイルにコピペするなりすれば，Jupyter Notebook のメニューページは変えることができます．

C:\Users\(あなたの名前とか)\Anaconda3\Lib\site-packages\notebook\static\notebook\css にある override.css にまたまた変更を加えれば，Jupyter Notebook のコードを書いたり実行したりするページの見た目を上書きすることができます．

それでも変更されない場合

ブラウザがおそらく勝手にCSSファイルとかを記憶してるらしく，それを消さないといけないみたいです．Chromeなら，

    1. 右上の・が縦に3つ並んだようなの(それか横棒みたいなの-)をクリックして，履歴を開きます．

閲覧履歴データの消去…みたいなところをクリックすると，キャッシュされた画像とファイルというのがあるので，それだけにチェックを入れて消去．

こうしてJupyter Notebookを新しく起動すれば治るかもです．

ぼくのわたしの Jupyter Notebook

キャプチャ3.PNG

僕はこんな感じに変えました．背景画像をbodyタグのCSSに追加しました．Continuum Analytics のロゴがウロボロスみたく自分の尻尾を加えてる (?) っぽくてクールで気に入っていて，自分色に変えちゃいました (個人用だからいいかな…線引いてごまかしてますが…)．ハンドルネームも込めて．
こんな風に画像も差し替えられます．
C:\Users\(あなたの名前とか)\Anaconda3\Lib\site-packages\notebook\static\base\images
にあると思います．favicon.ico を新しく読ませるのもまた上でやったキャッシュを消去しないと変更してくれないです．
背景はやっぱ暗めじゃないと疲れます…

背景画像の細かいCSSは適当に．htmlを修飾するときと変わらないです．
PyCharm使えよ ! は無しで…gif動かなかったり\r使えなかったりするので…

bannerAds