tdiary/bootstrapを導入してみた

GitHubにてtwitter-bootstrapをベースとしたテーマがリリースされたので導入してみた。

まずは、tdiary/tdiary-themeと、tdiary/tdiary-contribを取得し、tdiary-theme/bootstrap/と、tdiary-contrib/plugin/bootstrap*.rbをそれぞれ適切な場所にコピー、テーマ選択とプラグインの有効化を行う。

次に、tdiary-theme/bootstrap/bootstrap.cssのコメントを参考にヘッダとフッタを編集。 最終的にこんな感じになった。

ヘッダ

<%= bootstrap_navi %>
<div class="container-fluid">
<% unless @conf.smartphone? %>
<div class="hero-unit">
<h2>タキオン式自動日記</h2>
</div>
<% end %>

<div class="row-fluid">
<div class="span9">

フッタ

</div>
<% unless @conf.smartphone? %>
<div class="span3">
<!-- ここにサイドバーに表示したい内容を記述 -->
</div>
<% end %>
</div>
</div>
<% if @conf.smartphone? %>
<%= bootstrap_navi options={:site_name? => false, :search_form? => false}%>
<% end %>

span*を9と3にして日記本体とサイドバーの割合を3:1にして、スマートフォンの場合はフッタにナビを表示するようにしてある。 また、スマートフォンの場合にナビの表示が長くて改行されてしまっていたので、ここの最後に書かれている部分を、適当に保存してpluginとして有効にすることにより、ナビの表示を短縮するようにした。

あとは、カレンダー表示やらを調整したいところだけど、これは直接プラグインを編集するしかないかなあ。