Bootstrapを利用して MovableType のレスポンシブタイプテーマを無料で作成してみます。Part-1

このブログで利用している MovableType ですが、 Wordpress の様に多くのデザインテーマがある訳ではないのでBootstrapを使用してオリジナルのテーマを作成してみようと思います。但し、いつ完成するか どんなデザインになるかも判りませんけど挑戦です。先ずは、Bootstrapサイトに行ってダウンロードします。(画面中央の Download )から。
http://getbootstrap.com/
Bootstarap web site

画面中央の Download Bootstrap をクリックすると下のページが開きます。

種類の Download ボタンが表示されますので一番左の Bootstrap をクリック。

ダウンロードすると下記の ZIP ファイルがダウンロードされます。

bts-336d.jpg 12.9KB

解凍すると下記のようなフォルダが作成されます。



解凍して出来た それぞれのフォルダの中に入っているのが下記の内容となります。

 holder_icon_b.jpg CSSフォルダの中身( Ver 3.3.6 ) は、

Bootstrap 3.3.6 CSSフォルダの内容

 holder_icon_b.jpg JSフォルダの中身( Ver 3.3.6 ) は、

bootstrap 3.3.6 jsフォルダの内容

今後、デザインのカスタマイズに必要となる Source code もダウンロードしておきます。

 holder_icon_b.jpg 解凍して出来たフォルダの中の less フォルダにカスタマイズ対象となる variables.less があります。世間では、このファイルを直接いじらないで行う方法を行っている方も多数おられますが、私はそこまで知識は無いのでこの方法で作成してみます。

lessフォルダの内容

さぁ、これで必要なファイルは揃いましたので 次は作成を行っていきたいと思います。まず最初に把握しておきたいのが グリッド の認識方法です。レスポンシブテーマを作る上で必要となる重要な部分です。下の画像を見ると判りますが、上から12分割、8:4分割、4:4:4分割、6:6分割のサンプルが表示されています。この中で12分割と言うのはあまり利用する機会が無いかも知れませんが基本的な考え方ですので覚えておきましょう。

グリッドの考え方と表現

下の画像は同じくグリッドの表現内容ですが、実際にスマホ等にも関係する部分です。

現在の当サイトのデザインは下記のようになっています。

toppage

修正途中のサイトのサンプル画面が下の画像になります。まだまだ始まったばかりですが主なカスタマイズ箇所を紹介しておきますと、
①Bootstrapのナビゲーション設定の場合には標準で下記の2種類があるのですが、どちらも単色なのでグラデーション化してみました。

標準のナビゲーション2種類
bootstrap-navbar-sample2.jpg
bootstrap-navbar-sample1.jpg

Navbarのバリエーションの一部をご紹介します。今回は最下部のグラデーション化したもの(今回はブルー系で行いましたが、色合いは自由に設定できます)を利用しました。

Navbar Sample list

bootstrap-navbar-sample3.jpg

その他、バッチ系等を少しカスタマイズして作成中なのが下の画面のような内容です。(ローカルPCにてMovableType環境を作成しています。)
下記の画像の中でロゴが表示されている部分には今後スライドショーを入れる予定です。現行サイトのトップページにもスライドショーは入れてありますが、もう少しシンプルなものにしようかと検討中です。

カスタマイズ中イメージ

下記の画像は制作中のランディングページのサンプルです。(画像はクリックで拡大できます。)
○ NAVBAR は default を利用しています。
○ 画像の中の林の写真部分は枚の画像のスライドショーに成っています。
○ サンプルテンプレートデザインは、グリッド:グリッドで構成しています。
○ 画像一覧部分は、グリッド:グリッド:グリッドで構成しています。

制作中のサンプルテーマ