Whisper | Webの忘備録 > MovableType > MovableType vol.4 デザインをカスタマイズ
MovableType vol.4 デザインをカスタマイズ
MovableType2010.01.15
■ FirefoxのアドオンFirebugを入れる
インストールや、
基本のページを作った後に困るのがデザインの変更。
MovableTypeにおいても、静的Webサイトのデザイン同様、
デザインはCSSによってデザインされています。
ソースコードを見ると、IDやClassが割り振られていますが、
毎度ソースコードを見るのも非効率的ですし、視覚的にも分かりづらいです。
そこで視覚的にも機能的にも便利に果たしてくれるのが、
Web用の開発ツールです。
代表的なもので挙げられるのが、ブラウザFirefoxのアドオンFirebugで、
Firebugを使うと、対象のページの(X)HTML、CSS、スクリプト、DOMが容易にわかります。
今回のメインはCSSなので、CSSに着眼すると、
対象を選択するだけで、割り振られているIDやClassがすぐにわかります。
例えばYahoo!JapanをFirebugで見てみます。
するとID、#Wrapeerでは「min-width:950px;」等の情報を容易に知ることができます。
Windows環境、MAC環境どちらでも同じ環境で使えるというメリットもあります。
もし手元にFirefoxがない場合には、ダウンロードしておきます。
http://mozilla.jp/firefox/ (Firefox公式サイト)
Firefoxで以下のサイトを表示します。
https://addons.mozilla.jp/firefox/details/1843 (Firebugアドオンページ)
ページに表示されるインストールボタンを押し、インストールを行います。
MovableTypeにおいても、静的Webサイトのデザイン同様、
デザインはCSSによってデザインされています。
ソースコードを見ると、IDやClassが割り振られていますが、
毎度ソースコードを見るのも非効率的ですし、視覚的にも分かりづらいです。
そこで視覚的にも機能的にも便利に果たしてくれるのが、
Web用の開発ツールです。
代表的なもので挙げられるのが、ブラウザFirefoxのアドオンFirebugで、
Firebugを使うと、対象のページの(X)HTML、CSS、スクリプト、DOMが容易にわかります。
今回のメインはCSSなので、CSSに着眼すると、
対象を選択するだけで、割り振られているIDやClassがすぐにわかります。
例えばYahoo!JapanをFirebugで見てみます。
するとID、#Wrapeerでは「min-width:950px;」等の情報を容易に知ることができます。
Windows環境、MAC環境どちらでも同じ環境で使えるというメリットもあります。
もし手元にFirefoxがない場合には、ダウンロードしておきます。
http://mozilla.jp/firefox/ (Firefox公式サイト)
Firefoxで以下のサイトを表示します。
https://addons.mozilla.jp/firefox/details/1843 (Firebugアドオンページ)
ページに表示されるインストールボタンを押し、インストールを行います。
■ MovableTypeの構造を把握する１
Firefox×Firebugの環境が整ったら、早速MovableTypeの画面を開きます。
前の記事の流れどおり、
「First Website」の「テストブログ」ブログを開いた状態にします。
この状態で、Firefoxでサイトを表示します。
サイトを表示アイコンをクリックします。
サイトが表示されたら、ブラウザ右下を見ます。
虫のアイコンが、Firebugです。虫のアイコンをクリックします。
すると以下のようなページが表示されます。
この状態で「テストブログ」の中身のコードを見ることが出来ます。
左下半分では「テストブログ」のHTMLコードが表示され、
図でいくと、
<body class="mt-main-index layout-wtt" id="classic-blog">
が選択されていますので、bodyタグに関する全てのCSSが右下半分に表示されています。
bodyにはclassのmt-main-indexとlayout-wtt
IDのclassic-blog
が割り振られていることがわかります。
(※CSSでClassを複数書く場合には、半角スペースを入れると複数指定できます)
HTMLコードにある「＋」をクリックすると、更に中の階層を見ることが出来ます。
またFirebugメニューにある上のアイコンをクリックしてサイトの一部を選択すると
ピンポイントにソースコードを調べることもできます。
ソースコードの一部に着目してみます。
<div id="gamma">にマウスを乗せると、対象のCSSが表示され、
またサイトに水色で四角枠ができます。
つまり、検索と最近のブログ記事がid「gamma」に囲まれてることがわかります。
CSSを見ると、横幅がwidth:190px;で、190pxなどの情報もわかります。
これにより、例えば検索と最近のブログ記事に枠をつけたいと思えば、
MovableTypeで設定されてるCSSにgammaでborderを設定すればいいわけです。
CSSの設定方法は後ほどに。
前の記事の流れどおり、
「First Website」の「テストブログ」ブログを開いた状態にします。
この状態で、Firefoxでサイトを表示します。
サイトを表示アイコンをクリックします。
サイトが表示されたら、ブラウザ右下を見ます。
虫のアイコンが、Firebugです。虫のアイコンをクリックします。
すると以下のようなページが表示されます。
この状態で「テストブログ」の中身のコードを見ることが出来ます。
左下半分では「テストブログ」のHTMLコードが表示され、
図でいくと、
<body class="mt-main-index layout-wtt" id="classic-blog">
が選択されていますので、bodyタグに関する全てのCSSが右下半分に表示されています。
bodyにはclassのmt-main-indexとlayout-wtt
IDのclassic-blog
が割り振られていることがわかります。
(※CSSでClassを複数書く場合には、半角スペースを入れると複数指定できます)
HTMLコードにある「＋」をクリックすると、更に中の階層を見ることが出来ます。
またFirebugメニューにある上のアイコンをクリックしてサイトの一部を選択すると
ピンポイントにソースコードを調べることもできます。
ソースコードの一部に着目してみます。
<div id="gamma">にマウスを乗せると、対象のCSSが表示され、
またサイトに水色で四角枠ができます。
つまり、検索と最近のブログ記事がid「gamma」に囲まれてることがわかります。
CSSを見ると、横幅がwidth:190px;で、190pxなどの情報もわかります。
これにより、例えば検索と最近のブログ記事に枠をつけたいと思えば、
MovableTypeで設定されてるCSSにgammaでborderを設定すればいいわけです。
CSSの設定方法は後ほどに。
■ MovableTypeの構造を把握する２
上ではページに割り振られてるCSSを知る方法を書きました。
次にMobableTypeでデザインを変更するのに、構造をざっと説明します。
「テストブログ」の管理画面を見ます。
サイドメニューにデザインの項目があります。
名前のとおり、MobableTypeで作成するページのデザインは
こちらで作成を行います。
噛み砕いて静的HTMLサイトを例にすると、
テーマ － HTMLのサイト構造の切り替えを行います。
スタイル － CSSに切り替えを行います。
ウィジェット － 一つの機能をもった塊で、テンプレートで使うためのものです。
テンプレート － テーマで決めたHTMLサイト構造の内部を編集します。
テーマページを開いてみます。
デフォルトでは５種類用意されており、目的に沿ってテーマを決めます。
この中ではブログや企業CMSには「クラッシックブログ 1.0」が一番扱い易いです。
今回も「クラッシックブログ 1.0」で進めます。
スタイルページを開きます。
既定のスタイルを選択し、一覧を表示します。
現在適応されているのが、Minimalist Redのスタイルです。
今現在ではサイトを表示すると以下の状態です。
これは３カラムレイアウトになってます。
管理画面でMinimalist Redをクリックすると以下の画面が現れます。
現在はレイアウトが3カラムになっているので、「2カラム、大・小」とします。
「デザインを適応」を押します。
上記画面文字が表示されるので、再構築をし、テーマを更新します。
改めてサイトを表示してみます。
ページレイアウトが２カラムになりました。
次にMobableTypeでデザインを変更するのに、構造をざっと説明します。
「テストブログ」の管理画面を見ます。
サイドメニューにデザインの項目があります。
名前のとおり、MobableTypeで作成するページのデザインは
こちらで作成を行います。
噛み砕いて静的HTMLサイトを例にすると、
テーマ － HTMLのサイト構造の切り替えを行います。
スタイル － CSSに切り替えを行います。
ウィジェット － 一つの機能をもった塊で、テンプレートで使うためのものです。
テンプレート － テーマで決めたHTMLサイト構造の内部を編集します。
テーマページを開いてみます。
デフォルトでは５種類用意されており、目的に沿ってテーマを決めます。
この中ではブログや企業CMSには「クラッシックブログ 1.0」が一番扱い易いです。
今回も「クラッシックブログ 1.0」で進めます。
スタイルページを開きます。
既定のスタイルを選択し、一覧を表示します。
現在適応されているのが、Minimalist Redのスタイルです。
今現在ではサイトを表示すると以下の状態です。
これは３カラムレイアウトになってます。
管理画面でMinimalist Redをクリックすると以下の画面が現れます。
現在はレイアウトが3カラムになっているので、「2カラム、大・小」とします。
「デザインを適応」を押します。
上記画面文字が表示されるので、再構築をし、テーマを更新します。
改めてサイトを表示してみます。
ページレイアウトが２カラムになりました。
■ MovableTypeの構造を把握する３
サイドメニュー＞デザイン＞テンプレートページに移動します。
MovableTypeではテンプレートや、ウィジェットという名のもと、
パーツがバラバラで管理され、最終的に一つのHTMLなどが生成されます。
基本的なものとして、最終的に以下のものが生成されます。
(※自分で追加、削除、リネームなどもできます)
メインページ(index.html)
「サイトを表示」で、一番最初に表示される親ページです。
デフォルトでは、投稿したブログが１０件表示されます。
(※サイドメニュー＞設定＞投稿 で表示の投稿記事数を変更できます)
アーカイブインデックス(archives.html)
投稿したブログが１０件を超えると、古い記事として、
アーカイブに格納されます。
ウェブページ(folder-path/page-basename.html)
MovableTypeで作成できる静的ページのテンプレートです。
カテゴリ別ブログ記事リスト(category/sub-category/index.html)
通常ブログを書く際に作成する項目として、カテゴリ名がありますが、
MovableTypeでも同様にカテゴリが作成できます。
そのカテゴリ別の一覧ページです。
ブログ記事(yyyy/mm/entry-basename.html)
個別のブログ記事ページです。
コメント、トラックバックも扱います。
月別ブログ記事リスト(yyyy/mm/index.html)
こちらもそのままですが、月別でブログの一覧を表示します。
これらのページは先ほど記述したように
テンプレートやウィジェットの構成で出力されるページです。
例えばメインページ(index.html)を開いてみます。
開いたら右側のメニューに着目します。
インクルードテンプレートを見ると、メインページに含まれている
テンプレートの一欄を見ることが出来ます。
HTMLヘッダー
バナーヘッダー
ブログ記事の概要
サイドバー
バナーフッター
の５つのテンプレートが入っていることがわかります。
これらのテンプレートはインクルードテンプレート(内包しているテンプレート)
として、他のページでも使われたり、個別に何らかのまとまりになっています。
例えば「HTMLヘッダー」を開くと、linkやmetaなど
静的HTMLの<head>～</head>に書いてあるものがまとまっています。
その他、
バナーヘッダー
ページタイトルとサブタイトル
ブログ記事の概要
ブログ記事を作成した時に生成されるブログ記事の概要の
タイトルや本文、日付などのMT機能
サイドバー
検索、最近のブログ記事、カテゴリ、月別 アーカイブなど、ウィジェットのまとまり
バナーフッター
通常の静的HTMLで作成するフッターのように、コピーライトなど
それらの構成からメインページなどが成り立っています。
MovableTypeではテンプレートや、ウィジェットという名のもと、
パーツがバラバラで管理され、最終的に一つのHTMLなどが生成されます。
基本的なものとして、最終的に以下のものが生成されます。
(※自分で追加、削除、リネームなどもできます)
メインページ(index.html)
「サイトを表示」で、一番最初に表示される親ページです。
デフォルトでは、投稿したブログが１０件表示されます。
(※サイドメニュー＞設定＞投稿 で表示の投稿記事数を変更できます)
アーカイブインデックス(archives.html)
投稿したブログが１０件を超えると、古い記事として、
アーカイブに格納されます。
ウェブページ(folder-path/page-basename.html)
MovableTypeで作成できる静的ページのテンプレートです。
カテゴリ別ブログ記事リスト(category/sub-category/index.html)
通常ブログを書く際に作成する項目として、カテゴリ名がありますが、
MovableTypeでも同様にカテゴリが作成できます。
そのカテゴリ別の一覧ページです。
ブログ記事(yyyy/mm/entry-basename.html)
個別のブログ記事ページです。
コメント、トラックバックも扱います。
月別ブログ記事リスト(yyyy/mm/index.html)
こちらもそのままですが、月別でブログの一覧を表示します。
これらのページは先ほど記述したように
テンプレートやウィジェットの構成で出力されるページです。
例えばメインページ(index.html)を開いてみます。
開いたら右側のメニューに着目します。
インクルードテンプレートを見ると、メインページに含まれている
テンプレートの一欄を見ることが出来ます。
HTMLヘッダー
バナーヘッダー
ブログ記事の概要
サイドバー
バナーフッター
の５つのテンプレートが入っていることがわかります。
これらのテンプレートはインクルードテンプレート(内包しているテンプレート)
として、他のページでも使われたり、個別に何らかのまとまりになっています。
例えば「HTMLヘッダー」を開くと、linkやmetaなど
静的HTMLの<head>～</head>に書いてあるものがまとまっています。
その他、
バナーヘッダー
ページタイトルとサブタイトル
ブログ記事の概要
ブログ記事を作成した時に生成されるブログ記事の概要の
タイトルや本文、日付などのMT機能
サイドバー
検索、最近のブログ記事、カテゴリ、月別 アーカイブなど、ウィジェットのまとまり
バナーフッター
通常の静的HTMLで作成するフッターのように、コピーライトなど
それらの構成からメインページなどが成り立っています。
■ デザインの変更をする
前置きも長くなってきたので、ここでは実際にデザインの変更をします。
ブログテンプレートの管理ページを開きます。
スタイルシート(styles.css)を開きます。
開くときのコツとして、
マウスホイールを押すと、タブ形式で今のページを残しつつ別ページも開き、
並列作業をすることができ、効率がいいです。
スタイルシート(styles.css)
「@import url」となっており、２つのCSSを相対パスで読み込んでいます。
/mt/mt-static/themes-base/blog.css
/mt/mt-static/themes/minimalist-red/screen.css
カスタマイズの方法としては様々な方法があると思います。
1．上記CSSを直接開いて編集、修正をする
2．新たにCSSを定義して、CSSを上書きする
3．全て削除し、新たにCSS、ID,Classを定義する
個人的には３をよく使うのですが、
ここでは説明が大幅に増えそうなので２を試します。
ページから以下のボタンをクリックし、
新たにインデックステンプレートの作成→CSSページの作成を行います。
「テンプレートの作成」ページが開きました。
すぐ下にはタイトルを入力します。
タイトル名は全角日本語を使えますし、半角英数字でも大丈夫です。
その下にはソースコードを入力します。
場合によってはHTMLだし、JavaScriptだし、CSSだしということですが、
中身の判断をこちらが指定をしてあげます。
テンプレートの設定に注目します。
出力ファイル名： 今回はCSSなので、拡張子を「.css」にし名前をつけます。
テンプレートの種類： Stylesheet(ｓｔｙles)を選択します。
ファイルへのリンク、公開はそのままにしておきます。
今回は以下のように設定しました。
タイトル：スタイルシート(テストブログ)
出力ファイル名： styles2.css
テンプレートの種類： Stylesheet (styles)
「保存」をすると、「保存と再構築」ボタンができますので、もう一度押します。
ブログテンプレートの管理に戻り、ページを更新をすると以下のように追加されます。
インデックステンプレートとして作成し、認識をしましたが、
まだどこにも関連付けされてません。
そこで「スタイルシート」を開きます。
スタイルシート(styles.css)
これの下に一行追加をします。
@import url(/first_website/test/styles2.css);
CSSのパスが不安な場合には
絶対パスをブラウザに入力して表示されればOKです。
もしくは絶対パスを直接@import url(～);書いても大丈夫です。
これでCSSをスタイルシート(テストブログ)に追加すると
ページに反映され、上書きされるようになりました。
準備完了です。
先ほどのFirebugを駆使して、変更したい箇所を
スタイルシート(テストブログ)に追加していきます。
今回は、横幅を800pxにし、カラムの左右を入れ替えてみます。
全体を内包しているのが#containerになりますので、
#container {
width:800px;
}
を追加して、再構築をしてみます。
サイトを表示します。
ヘッダー、フッターは小さくなりましたが、中身がはみ出てます。
Firebugで中身を調査してみます。
#header-inner, #content-inner, #footer-inner {
width:940px;
}
で940pxとなっているので、800pxに上書きをします。
同じようにサイズの調節を行っていきます。
#container {
width:800px;
}
#header-inner, #content-inner, #footer-inner {
width:800px;
}
.layout-wt #alpha {
width:600px;
}
これで綺麗になりました。
続いて、コンテンツとメニューの位置を入替します。
Firebugを見ると、<div id="alpha">にフロートでleftになっています。
同じように<div id="beta">ではフロートでleftになっています。
#alpha, #beta, #gamma {
float:left;
}
CSSを見るとどちらも一つで定義されてるので、
フロートをrightにし反転させます。
#alpha, #beta, #gamma {
float:right;
}
この状態で、再構築を行います。
サイトを表示してみます。
無事サイトを更新できました。
同様にCSSを変更することで、
背景やボーダーや、色、サイズなど細かく調節ができます。
例えばCSSを少し変更すると
こんな感じになり、イメージも変わります。
ここまでの状態は、全くMovableTypeのタグを考えずに作業できます。
ブログテンプレートの管理ページを開きます。
スタイルシート(styles.css)を開きます。
開くときのコツとして、
マウスホイールを押すと、タブ形式で今のページを残しつつ別ページも開き、
並列作業をすることができ、効率がいいです。
スタイルシート(styles.css)
「@import url」となっており、２つのCSSを相対パスで読み込んでいます。
/mt/mt-static/themes-base/blog.css
/mt/mt-static/themes/minimalist-red/screen.css
カスタマイズの方法としては様々な方法があると思います。
1．上記CSSを直接開いて編集、修正をする
2．新たにCSSを定義して、CSSを上書きする
3．全て削除し、新たにCSS、ID,Classを定義する
個人的には３をよく使うのですが、
ここでは説明が大幅に増えそうなので２を試します。
ページから以下のボタンをクリックし、
新たにインデックステンプレートの作成→CSSページの作成を行います。
「テンプレートの作成」ページが開きました。
すぐ下にはタイトルを入力します。
タイトル名は全角日本語を使えますし、半角英数字でも大丈夫です。
その下にはソースコードを入力します。
場合によってはHTMLだし、JavaScriptだし、CSSだしということですが、
中身の判断をこちらが指定をしてあげます。
テンプレートの設定に注目します。
出力ファイル名： 今回はCSSなので、拡張子を「.css」にし名前をつけます。
テンプレートの種類： Stylesheet(ｓｔｙles)を選択します。
ファイルへのリンク、公開はそのままにしておきます。
今回は以下のように設定しました。
タイトル：スタイルシート(テストブログ)
出力ファイル名： styles2.css
テンプレートの種類： Stylesheet (styles)
「保存」をすると、「保存と再構築」ボタンができますので、もう一度押します。
ブログテンプレートの管理に戻り、ページを更新をすると以下のように追加されます。
インデックステンプレートとして作成し、認識をしましたが、
まだどこにも関連付けされてません。
そこで「スタイルシート」を開きます。
スタイルシート(styles.css)
これの下に一行追加をします。
@import url(/first_website/test/styles2.css);
CSSのパスが不安な場合には
絶対パスをブラウザに入力して表示されればOKです。
もしくは絶対パスを直接@import url(～);書いても大丈夫です。
これでCSSをスタイルシート(テストブログ)に追加すると
ページに反映され、上書きされるようになりました。
準備完了です。
先ほどのFirebugを駆使して、変更したい箇所を
スタイルシート(テストブログ)に追加していきます。
今回は、横幅を800pxにし、カラムの左右を入れ替えてみます。
全体を内包しているのが#containerになりますので、
#container {
width:800px;
}
を追加して、再構築をしてみます。
サイトを表示します。
ヘッダー、フッターは小さくなりましたが、中身がはみ出てます。
Firebugで中身を調査してみます。
#header-inner, #content-inner, #footer-inner {
width:940px;
}
で940pxとなっているので、800pxに上書きをします。
同じようにサイズの調節を行っていきます。
#container {
width:800px;
}
#header-inner, #content-inner, #footer-inner {
width:800px;
}
.layout-wt #alpha {
width:600px;
}
これで綺麗になりました。
続いて、コンテンツとメニューの位置を入替します。
Firebugを見ると、<div id="alpha">にフロートでleftになっています。
同じように<div id="beta">ではフロートでleftになっています。
#alpha, #beta, #gamma {
float:left;
}
CSSを見るとどちらも一つで定義されてるので、
フロートをrightにし反転させます。
#alpha, #beta, #gamma {
float:right;
}
この状態で、再構築を行います。
サイトを表示してみます。
無事サイトを更新できました。
同様にCSSを変更することで、
背景やボーダーや、色、サイズなど細かく調節ができます。
例えばCSSを少し変更すると
こんな感じになり、イメージも変わります。
ここまでの状態は、全くMovableTypeのタグを考えずに作業できます。
同じカテゴリの記事に以下のものがあります。
