BloggerにJupyter Notebookを貼り付ける方法

Jupyter Notebookはﾃﾞｰﾀ解析を行う環境においてｺｰﾄﾞ、結果、ｽﾄｰﾘ-を同じ場所に残すことができる非常に便利なﾂｰﾙです。　　
そのJupyter Notebookで作成したﾄﾞｷｭﾒﾝﾄをBloggerで表示させる方法について説明いたします。　　
参考にするｻｲﾄは、"Jupyter NotebookのドキュメントをWordpressに貼り込む"と"WordPress Blogging with Jupyter Notebook in Five Simple Steps"です。
説明もこれらのｻｲﾄに沿って説明いたします。　　
*Jupyter NotebookをGistを用いる方法もありますが、限られた画面でしか表示されないみたいなのでここでは紹介いたしません。興味のある方はこちらをどうぞ"GitHub Gistを使ってブログにJupyter(IPython) Notebookを表示する方法"。

具体的な手順

手順はほとんど上で挙げた参考ｻｲﾄと同じです。　　
要約すると、Jupyter Notebookで作成したﾄﾞｷｭﾒﾝﾄをhtmlﾌｧｲﾙに変換し、Blogger側でcssをいじります。

(1). Jupyter Notebookでﾄﾞｷｭﾒﾝﾄを作成し、.ipynbﾌｧｲﾙとして保存する。
(2). nbconvertでhtmlファイルに変換する

$ jupyter nbconvert --to html --template basic hoge.ipynb hoge.html

(3). 出力されたhtmlﾌｧｲﾙの中身をｺﾋﾟｰし、bloggerのPost画面に貼り付けます。
(4). Bloggerのﾎｰﾑ画面にある「Theme」->「customize」->画面左上にある「Advanced」->「Add CSS」をｸﾘｯｸしていくとCSSｺﾏﾝﾄﾞを入れるための画面が出てくる。ここの作業は"BloggerでMarkdown書けるようにした。"にある"CSSの追加編集"の項を参考にしてください。
(5). そのCSSを追加する画面に以下のｺﾏﾝﾄﾞを追加する。追加することで、Jupyter Notebookの色合いを再現することができる。

/************** Jupyter Notebook CSS ************************/
.input_prompt {
    color: #0066cc;
}
.output_prompt{
    color:#cc0000;
}
.prompt{
    font-family: monospace;
    font-size: 14px;
}
.c, c1 {
    color: #408080;
    font-style: italic;
}
.k {
    color: #338822;
    font-weight: bold;
}
.kn {
    color: #338822;
    font-weight: bold;
}
.mi {
    color: #008800;
}
.mf {
    color: #008800;
}
.o {
    color: #9966ff;
}
.ow {
    color: #BA22FF;
    font-weight: bold;
}
.nb {
    color: #338822;
}
.n {
    color: #000000;
}
.s, .s1 {
    color: #cc2222;
}
.se {
    color: #cc2222;
    font-weight: bold;
}
.si {
    color: #C06688;
    font-weight: bold;
}
.nn {
    color: #4D00FF;
    font-weight: bold;
}

.code_cell pre{
    font-family: "ubuntu mono"; font-size: 120%;
    background-color: #eeeeee;
    padding-left: 1%;
}
.output_area  pre{
    background-color: #FFFFFF;
    padding-left: 5%;
}
.cell pre {
    margin-top: 10px;
    margin-bottom: 10px;
}
br {
    line-height: 2;
}
.cell h1, h2, h3, h4 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.text_cell_render {
    font-family: "Times"; font-size: 120%;
    color: #000000;
}
/************** Jupyter Notebook CSS ************************/

作業を終えて

(4)と(5)の作業は一度設定してしまえば、その後も設定する必要はありません。　　
これでBloggerにおいてJupyter Notebookを貼るり付けることができます。　　
もしなにか不備があれば、コメントしていただけるとありがたいです。