MT導入基礎知識

Movable Typeとは?

ドメイン取得とサーバー確保

Movable Typeをインストールしよう

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

どんどんモジュール化しよう

pingを有効に活用しよう

テンプレートの基本的な構成

デザインのカスタマイズ

カスタマイズの前に

タイトルバナーの雰囲気をかえる

タイトルバナーを画像にする

H1~H6タグの見え方

サイトの背景を変更する

文字の色や大きさをかえる

サイドバーの見た目をかえる

表示内容のカスタマイズ

カテゴリーの並び順序を変更する

エントリーの並び順序を変更する

最近のエントリー一覧を表示する

サイドバーを右から左に変更する

サイドバーに表示する要素を変更する

カテゴリー一覧にエントリーも表示する

カテゴリーページにも最新エントリー一覧を表示する

入れておきたいプラグイン

cutfirstchar⇒変数タグの最初の数文字を削除する

CatEntries⇒特定カテゴリーを表示させないようにする

Update-n-Ping⇒記事を更新したときにも更新pingを自動的に送る

MailForm⇒メール問い合わせフォームを表示する

Mapper⇒地図画像を表示する

TinyMCE⇒ワープロ感覚でエントリー記事が作れる

参考になるサイト・情報

WWWの基本を勉強する参考サイト

Movable Typeに関するサイト

ブログアクセスアップにつながるランキングサイト

相互リンク

エラーが起きたときはチェックしてみよう

よもやま話

サイト立ち上げのきっかけ

ブログランキングに登録

メールフォームが機能しない・・・

グーグルマップを表示してみる







« サイトの背景を変更する | メイン | サイドバーを右から左に変更する »

テンプレートの基本的な構成




Movable Typeのそれぞれのテンプレートを開いてみると、タグやクラスがずら~っと並んでいて、一見とても難しいように見えます。これだけで「うへ~」と思う方も多いかもしれません。

でも、基本的な構成を頭に入れてしまうと、もう少し見やすくなります。
各ページを構成するテンプレート(メインページ、アーカイブページ、等)は、すべて基本的な構成は一緒です。

※テンプレートの種類についてはこちらを参照ください。
 ⇒ テンプレートって何?

どのような構成になっているか、図示すると以下のようになります。

head(サイト・ページに関する情報を記述)
body(ブラウザに表示する内容を記述)
container
banner
pagebody
alpha beta
バナーを変えるならbannerに関する部分を、右側のサイドバー(リンクナビ部分)に表示している内容を変えるならbetaの部分を探して、必要な修正をかけます。 やみくもに探すよりは、全体の構成がわかると探しやすいのではないでしょうか。

続いて、スタイルシートについてです。
Movable Type標準テンプレートのスタイルシートはわかりにくいと、よく言われます。その理由は、同じ名称のクラスが分割して記載されているからです。

例えば、『body』タグのデザインを指定する『body』クラスタグが、スタイルシートの中に何度も出てきます。
しかしこれも、Movable Typeのスタイルシートの構成を理解すると、少しわかりやすくなります。
その構成は、次のようになっています。

basic elements 余白(margin、padding等)の基本要素群
page layout(1) ページや枠内での相対的な表示位置を指定する要素群
content コンテンツ(記事部分)のデザインを指定する要素群
modules(1) モジュール部分の表示位置を指定する要素群
basic page elements 基本的な文字のフォント・サイズ・色等を指定する要素群
page layout(2) 大きさ(幅・高さ)や背景色など、様々なレイアウトを指定する要素群
modules(2) モジュール部分の余白や背景色を指定する要素群

ここには基本的なもののみを抜粋しました。
スタイルシートの中には、特定のモジュールのみに使用する要素群もあります。でも滅多に使うことはないので無視していても問題ないでしょう。

デザインの修正をしたいときは、上記の構成を参考に、該当する要素がありそうなところをすべて見るようにしてください。
再度書きますが、Movable Typeの標準スタイルシートでは、同一のクラス要素が複数回出てきます。あれおかしいな?と思ったら、見逃している同一名称のクラスが他にないか、探してみるようにしてください。



最新記事一覧