Nikola のテーマの基本的な設定方法

Nikola のテーマの設定について覚え書き。

テーマの基本的な設定方法

テーマのインストール

Nikola のデフォルトのテーマは bootstrap3 ですが、他にもテーマが用意されており、公式サイト から見ることができます。
インストールできるテーマの一覧は以下のコマンドでも確認できます。

nikola install_theme -l

テーマは以下のようにインストールし、

nikola install_theme blogtxt

conf.py で使用するテーマを設定をします。

# Name of the theme to use.
THEME = "blogtxt"

bootstrap3 を使用する場合は、bootswatch のテーマも選ぶことができます。
例えば cosmo のテーマは以下のコマンドでインストールされます。

nikola bootswatch_theme -n custom_theme -s cosmo -p bootstrap3

インストールされたテーマは /themes ディレクトリに入っています。
また、個人的なスタイルの設定は /themes/(使用するテーマ)/assets/css/custom.css に書いておきます。

custom.css の設定

custom.css のスタイルが最優先で反映されます。
個人的には org-mode から記事を書いており、デフォルトでスタイルが反映されなかったセンタリングと下線のスタイルを custom.css に追加。

/* センタリング */
.center  {
  text-align: center;
  }
/* 下線 */  
.underline  {
  text-decoration: underline;
}

また、テーブルのスタイルもデフォルトでは微妙なので、同様に custom.css に適当に設定してやりました。

/* テーブル */
table {
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}
thead {
    background-color: #F1F1F1;
}
table, th, td {
    border: 0.5px solid #DDDDDD;
}
th, td {
    padding: 0.5em;
}
th {
    font-weight: bold;
}
caption {
    color: #000000;
}

bootstrap の table クラスを適用したい場合は、/plugins/orgmode/init.el に

(custom-set-variables ('org-html-table-default-attributes
		       '(:class "table table-hover table-stripe table-bordered table-condensed")))

のように書いておくと属性が変更でき、bootstrap の table スタイルが適用できます。


Nikola のテーマの基本的な設定について紹介しました。
Nikola はテーマの種類が少ないので、カスタマイズするにはある程度 less や css を勉強する必要があります。
この辺りの勉強は ドットインストール の講座が参考になりました。

コメント

Comments powered by Disqus
書籍更新情報
2016-10-21
Pythonによる科学技術計算 基礎編
PDF版の販売を開始しました。
販売ページはこちら

2016-09-09
Pythonによる科学技術計算 基礎編
1.2版への更新が可能になりました。
サポートページはこちら
電子書籍
Pythonによる科学技術計算 基礎編
Kindle ストア、Leanpubで販売中です
Pythonによる科学技術計算 基礎編
PDF版の販売はこちら
同人誌
技術書典(2016/6/25)
Emacs/org-modeのPDF作成術
電子版をBOOTHで販売中です
Emacs/org-modeのPDF作成術
Share