Hikiプラグインの作り方 番外編 テーマ

こう言ってはなんですが、Hikiって見た目は地味、です。シンプルで見易い、使い易い、というのはそうなんですが、もっと別の外見にしたい人もたくさんいるでしょう。


Hikiの外見(テーマ)は管理画面の「表示設定」から変更します。
「テーマの指定」の所の選択ボックスから……デフォルトでは「Hiki」一つしかありませんね。
自分でテーマを作れということでしょうか?
それも楽しそうです。でもまずは、誰かの作った物を見て、真似をしたりカスタマイズして、テーマの作り方を憶える方がいいでしょう。


Hiki用のテーマを公開している人は少ないんですが、それはtDiaryという日記ソフトのテーマが、(ほぼ)そのまま使えるからでしょう。
早速我々も、tDiaryテーマをインストールしてみます。


まず、tDiaryのテーマ集をダウンロードしてきます。tDiaryのサイトのサイドバーの「ダウンロード」に「テーマ集」があるので適当な所にダウンロードして解凍してください。
解凍したら、中身をHikiのthemeフォルダーに移動します。
今日現在で337個のテーマがあるようです。すげえな。


これで、管理画面のテーマの所にずらりと(Hikiのテーマを含めて)338個のテーマが並んだ筈です。が、これは逆に、多すぎて選べませんね。
ネタ元のtDiaryにはテーマギャラリーもあるので、これを見ながら気になったものを試していくといいでしょう。


ただ、基本的にはテーマを流用できるのですが、微妙に見た目が変わってしまいます。僕の好きなKitchen-classicも、サイドバーが上に飛び出ていて変な感じです。
レンタルサーバーを使っている場合は広告との兼ね合いもあるでしょう。


そんな時には

  • テーマに手を加える
  • 追加CSSを書く

の二つの方法が使えます。


前者を選びたい場合、各テーマのフォルダーの中に一つだけCSSファイルがあるので、それをいじってください。HTMLの方のclassやidは、実際のHikiの画面か、templateフォルダーのview.htmlを見ると分かります。
ツインテイルズもこの方法でテーマを作っています)


後者の「追加のCSSを書く」には、プラグインが使えます。
このappend-cssプラグインをご紹介しましょう。