bootstrap 3 on XOOPS X(スタイルシート編)

XOOPSのテーマについて。リニューアル当初はXoops123.comさんのコーポレートサイト向けテーマ tw_corpを使わせていただいていました。HTML5 & Twitter Bootstrap 2採用で柔軟性の高い素晴らしいテーマです。このテーマでBootstrapを知りました。

*ListFreakのほうは手作りテーマだったので、出たばかりのBootstrap 3で作りました。スマートフォン対応も簡単で、そこそこ見栄えのよいサイトが作れます。すっかりBootstrapのファンになりました。ただ複数バージョンのBootstrapをメンテできるほどの体力は無いので、起-動線のほうもBootstrap 3に載せ替えることにしました。

BootstrapはLESSというCSSのフレームワークを使っています。ちょっと特殊な(しかし合理的な)記法で.lessファイルを作成し、.cssにコンパイルします。この仕組みに乗っかると、サイトの見栄えのメンテナンスが爆発的に楽になります。たとえば、docs(pico)モジュールの見出しの見栄えを変えたいときは、こんな感じ。テンプレートファイルをいじる必要がありません。

#docs_container { // picoモジュールが標準で割り当ててくれるID
    h2 { // このIDの子孫となるセレクタを、こんな感じで書けます
        .well // Bootstrap 標準のクラス
    }
}

また、Bootstrapが定義している変数を借りてくることもできます。以下は、引用文の字の大きさを本文と揃えている例。

blockquote {
    p {
        font-size: @font-size-base; // bootstrapが定義している変数
        line-height: @line-height-base;
    }
}

LESSファイルの編集

Bootstrap本体に手を加えずに済ませるため、bootstrap-kd.less という新しいファイルを作ります。1行目でBootstrapをインポートし、2行目以降に書き換える変数やサイト独自のスタイルを書いていきます。変数の名前や役割については”Customize and download · Bootstrap”を見れば見当が付きます。作成したLESSファイルはこんな感じです。

@import "bootstrap/less/bootstrap.less"; ← Bootstrapをインポートする。当ファイルの置き場は後述

@font-size-base: 16px; ← 変数を書き換える

blockquote { ← スタイルを修正・追加する
    p {
        font-size: @font-size-base;
        line-height: @line-height-base;
    }
}

これをコンパイルすると、オリジナルのBootstrapを含むすべてのスタイルシートが作成されます。今回はWindowsでも簡単に使えそうなCrunchというツールを使いました。

ファイル配置

LESSファイルはテーマディレクトリに置きました。作成したスタイルシートは、 bootstrap.css と同じディレクトリに置くのがよさそうです。というのは、Glyphiconなどいくつかの資源へのアクセスが相対パスで行われているからです。一方でXOOPS側は、CSSファイルの位置と名前がテーマディレクトリ/style.css であることを前提としています(具体的にはxoops_getcss()という関数の中でハードコードされています)。そこで苦肉の策として、style.cssには @import "bootstrap/css/bootstrap-kd.css"; だけを書くことにしました。

ということで、XOOPS_THEME_DIR/<theme>/下はこんな感じになりました。

theme.html
style.css ← XOOPSが読み込むテーマファイル。bootstrap/dis/css/bootstrap-kd.css を読み込むだけ
bootstrap-kd.less ← サイト独自のスタイルを記述したLESSファイル。サーバにアップする必要はない
bootstrap/ ← ダウンロードしてきた Bootstrap 3 のファイル群をそのまま置く
         less/ ← このディレクトリだけはソースコードから取ってくる。サーバにアップする必要はない
         dist/
              css/
                  bootstrap-kd.css ← .lessからコンパイルされたCSSファイル。bootstrap.cssを含んでいる
              fonts/
              js/

 


友達に伝える
タグ: XOOPS Bootstrap LESS
作成: 2013/11/5 by:koji
更新: 2013/11/6 by:koji


Bootstrap 3 on XOOPS X(テンプレート編)

Tech

xpWikiの'Backlinks for: 'を日本語化する

新規ユーザー登録(無料)

  • メールニュース[週刊起-動線]の購読
  • コメントなどの投稿
  • ココロミの利用
  • 一部コンテンツの購読

ログイン

コメント

タグ(キーワード)