このブログのデザインを変更した

bootstrapを使ったテーマに変更した。

bootstrap-sassをちょこっとカスタマイズして作成した。手順は以下。

まずはbootstrap-sassをダウンロード。

https://github.com/twbs/bootstrap-sass/archive/v3.3.6.tar.gz

解凍したファイルの /assets/stylesheets/_variables.scss の下記行を書き換え。

$font-size-base:          16px !default;
$line-height-base:        1.8 !default; // 20/14
$font-family-base:        Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, $font-family-sans-serif !default;
$font-size-h1:            floor(($font-size-base * 1.4)) !default;
$font-size-h2:            floor(($font-size-base * 1.4)) !default;
$font-size-h3:            ceil(($font-size-base * 1.2)) !default;
$font-size-h4:            ceil(($font-size-base * 1.1)) !default;

/my.scss を新規ファイルとして作成してtDiary用に書き換える。

@import "_bootstrap.scss";

div.lm {
  text-align: right;
}

span.lm {
  @extend .label;
  @extend .label-default;
}

.comment{
  @extend .panel;
  @extend .panel-info;
}

.caption {
  @extend .panel-heading;
}

.commentshort {
  @extend .panel-body;
}

body {
  padding-top: 70px;
}

h1, h2, h3, h4 {
  font-weight: bold;
}

p {
  word-break: break-all;
}

.footer
{
  @extend .text-right;
}

body.update {
  padding-top: 1em;
}

body.update div.whole-content
{
  @extend .container-fluid;
}

body.update div.title
{
  @extend .form-group;
}

body.update div.title input
{
  @extend .form-control;
}

body.update div.textarea textarea
{
  @extend .form-control;
}

body.update button,
body.update span.button input
{
  @extend .btn;
  @extend .btn-primary;
}

body.update h1,
body.update h2,
body.update h3
{
  @extend .hidden;
}

sassをインストールしてmy.scssをコンパイルする。

$ sudo gem install sass
$ sass my.scss:my.css

出来上がったmy.cssをtDiaryの/theme/my/my.cssとして設置して完了。