それを、このように変更します。<$MTEntryDate format="%m/%d"$> <$MTEntryTitle$>
これで、カテゴリーページでも、全エントリーの一覧が表示されると思います。試してみてください。 ]]><$MTArchiveDate format="%m/%d"$> <$MTArchiveTitle$>
カテゴリーAこのように表示するには、サイドバーを表示する各テンプレート(メインページ、各アーカイブ、検索ページ、等)の、サイドバーの「カテゴリー一覧」部分を変更します。 それではやってみましょう。 メインページ等の、サイドバーに表示する「カテゴリー一覧」部分を探してください。下記の部分です。 ※サイドバー部分がわからない方はこちらを先に確認ください。 ⇒ サイドバーに表示する要素を変更する
└記事A-1
└記事A-2
カテゴリーB
└記事B-1
└記事B-2
└記事B-3
カテゴリーC
└記事C-1
:
:
これを、以下のように書き替えてください。カテゴリー
(~省略~)
<MTCategories>タグを加えることで、すべてのカテゴリー名が表示されるようになります。記事のないカテゴリー名を表示したくない場合は、<MTCategories> と </MTCategories> を削除してしまってかまいません。 カテゴリー名を表示している <$MTCategoryLabel$> の部分は、cutfirstcharプラグインを使ってカテゴリーの順序を変更している場合は、<$MTCategoryLabel cutfirstchar="3"$> のように修正してください。 ※カテゴリー順序変更の詳細はこちらを参照ください。 ⇒ カテゴリーの並び順序を変更する また、エントリーの順序についても変更可能です。上記例では、<MTEntries sort_order="ascend"> というように更新日の昇順(ascend)を指定していますが、他の並び順がよければ修正してください。 ※エントリー順序変更の詳細はこちらを参照ください。 ⇒ エントリーの並び順序を変更する なお、ここではエントリータイトル行を「<p>└ ~ </p>」で表示していますが、「└」を別の記号に変えたり、箇条書き風(<ul>や<li>を使ったリスト表示)にしてもOKです。 必要な修正を加えたら、保存&再構築してください。他のテンプレートも同様に修正します。これで、新しい記事をエントリーするたびに、メニューにエントリータイトルのリンクが追加されるようになります。 なお、エントリー時に自動で更新されるのはそのエントリーが関係しているページだけですので、他の記事ページや他のカテゴリーページのメニューにもリンクが追加されるようにしたい場合は、管理メニューの<サイトを再構築>で<すべてを再構築>してください。 ]]>
サイドバーに表示する各コンテンツ(Movable Typeではwidgetと呼びます)は、基本的には、『class="module-○○ module"』というようなスタイル指定がなされているdivタグで囲まれています。例えば、検索widgetなら、下記の部分です。 : :
表示したくないwidgetは、テンプレートの中の <div class="module-○○ module">~該当する<div> までをごっそり削除してしまえばOKです。 widgetの表示順序を変更するには、<div class="module-○○ module">~該当する<div> を記載する順序を入れ替えるだけです。 なお、中には『class="module-○○ module"』の外側(前と後)に別のタグがついているwidgetもあります。そのときは、その外側のタグまでがそのwidgetに含まれますので注意してください。例えば、カテゴリー一覧を表示するwidgetは、<MTIfArchiveTypeEnabled archive_type="Category">~</MTIfArchiveTypeEnabled> で囲まれた部分が該当します。削除や順序変更のときは、これらのMTIfArchiveTypeEnabledタグもあわせて削除・移動します。 ちなみに、いわゆるホームページっぽく見せるのであれば、カテゴリー一覧widgetと検索widgetのみにしてしまうと、すっきりしてそれっぽくなります。試してみてください。 なお、サイドバーなど、複数のテンプレートで共通に使うコンテンツは、モジュール化してしまうととても便利です。<div id="beta">から該当する</div>までを、ごっそりモジュール化してしまうことをおすすめします。 ※参考 ⇒ どんどんモジュール化しよう ]]>検索
ここが「id=beta」のデザインを指定する部分です。 横幅を変更する場合は「width: 200px;」の右側の数値(ピクセル)を変更、背景色を変更する場合は「background: #e6ecf2;」の右側の色数値を変更すれば、サイドバー全体の幅と色が変わります。 オリジナルでは幅200ピクセル、薄いグレーになっています。 ※色見本の参考 ⇒とほほの色入門・色見本 続いて、サイドバーに表示されている要素(検索小窓、最近のエントリー小窓、カテゴリー小窓、等)のデザインも変更してみましょう。 この要素のことを、Movable Typeでは「Widget=ウィジェット」または「module=モジュール」と呼びますが、テンプレートモジュールと混同しやすいので、ここではWidgetと呼びます。 Widgetは、タイトルバーとコンテンツボックスの組み合わせでできていますので、それぞれ変更していくことになります。#beta { width: 200px; background: #e6ecf2; }
タイトルバー |
コンテンツボックス |
詳細を見てみると、<div class="module-○○ module">~</div> でWidget全体のくくり、<h2 class="module-header">~</h2> でタイトル部分、<div class="module-content">~</div> でコンテンツ部分のデザイン(クラス)を指定しています。 まず、Widget全体の背景色を変更するには、スタイルシートの中から、「module」に関する指定をしている下記の部分を探します。(タイトル)
(コンテンツ)
背景色は、「background: #dae0e6;」の右側の色数字を変更すればOKです。薄いグレーのままだと地味なので、明るめの色に変更してしまいましょう。 続いて、Widgetのタイトル部分を変更するには、スタイルシートの中から、「class="module-header"」に関する指定をしている下記の部分を探します。.module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #dae0e6; }
こうして見てみると、module-headerだけでなく、trackbacks-header、comments-header、comments-open-header、archive-headerも一緒に指定されています。従って、ここを変更すると、トラックバックやコメントを表示する部分のヘッダーデザインも変わりますので、注意してください。 主な変更内容は、文字色「color: #fff;」、背景色「background: #a3b8cc;」、文字のサイズ「font-size: 11px;」あたりでしょうか。 「border-left: 5px solid #36414d;」は、タイトル部分の左枠に表示されている濃い部分です。ここの色を変えるだけでも随分イメージが変わります。ここの太さを変えるなら「5px」を別の数字に、ここの色を変更するには「#36414d」を別の色数字に変更してください。 最後に、コンテンツ部分の詳細変更です。スタイルシートの中から、「class="module-content"」に関する指定をしている下記の部分を探します。.module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 5px solid #36414d; padding: 5px; color: #fff; background: #a3b8cc; font-size: 11px; font-weight: bold; line-height: 1; text-transform: uppercase; }
ここでは、文字サイズ「font-size: 10px;」や、行間「line-height: 1.2;」の変更ができます。 余白(margin、padding)の変更も可能ですが、あまり変更することはないので、詳細説明はここでは省略します。 必要な修正を終えたら、保存&再構築(S&R)してみてください。お好みのサイドバーになりましたか? ]]>.module-content { margin: 0 0 10px 0; border-top: 1px solid #cfd4d9; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; }
2.エントリー記事内の、地図を表示させたい場所に以下のmapタグを記述~省略~ ~省略~
このとき、自動改行にしている場合は、行の前後に改行を1行入れてください。 自動改行にしていない場合は、<div>[map:東京都○○区○○1-1-1]</div> のようにdivタグで挟んでください。 B.ヘッダーやナビ部分など、エントリー記事以外の場所に地図を表示させる場合 各テンプレートの表示させたい場所に、以下のタグを入力します。[map:東京都○○区○○1-1-1]
※参考:six apart社のホームページでも紹介されています。ここにも詳しい設定方法の記載がありますので参考にしてください。 ⇒ Mapperプラグインの紹介 (six apart社のサイトへリンクしています) ]]> [map:東京都○○区○○1-1-1]
Movable Type標準テンプレートでは、小見出しの文字色は濃グレー(color: #666;)、文字の大きさは18ピクセル(font-size: 18px;)になっています。 文字色を赤くするなら「color: #FF0000;」に、文字の大きさをやや控えめにするなら「font-size: 16px;」、というように変更して、保存&再構築(S&R)してください。 ※色見本の参考 ⇒ とほほの色入門・色見本 上記の他に、ページタイトルバナー部分の文字の大きさ・色も変更することができます。 「#banner-header」や「#banner-description」が該当する部分となりますが、詳細についてはこちらで説明していますので参照ください。 ⇒ タイトルバナーの雰囲気を変える]]>.entry-header { margin-top: 0; border-left: 5px solid #dae0e6; padding: 0 0 0 10px; color: #666; font-size: 18px; }
これで、サイドバー部分が先(左側)に、記事部分が後(右側)に表示されるようになりました。 メインページ以外のページテンプレートも同様の構成になっていますので、同じように順序を入れ替えておきましょう。]]> : :: :
バナーを変えるならbannerに関する部分を、右側のサイドバー(リンクナビ部分)に表示している内容を変えるならbetaの部分を探して、必要な修正をかけます。 やみくもに探すよりは、全体の構成がわかると探しやすいのではないでしょうか。 続いて、スタイルシートについてです。 Movable Type標準テンプレートのスタイルシートはわかりにくいと、よく言われます。その理由は、同じ名称のクラスが分割して記載されているからです。 例えば、『body』タグのデザインを指定する『body』クラスタグが、スタイルシートの中に何度も出てきます。 しかしこれも、Movable Typeのスタイルシートの構成を理解すると、少しわかりやすくなります。 その構成は、次のようになっています。
head(サイト・ページに関する情報を記述) body(ブラウザに表示する内容を記述)
container
banner pagebody
alpha beta
ここには基本的なもののみを抜粋しました。 スタイルシートの中には、特定のモジュールのみに使用する要素群もあります。でも滅多に使うことはないので無視していても問題ないでしょう。 デザインの修正をしたいときは、上記の構成を参考に、該当する要素がありそうなところをすべて見るようにしてください。 再度書きますが、Movable Typeの標準スタイルシートでは、同一のクラス要素が複数回出てきます。あれおかしいな?と思ったら、見逃している同一名称のクラスが他にないか、探してみるようにしてください。]]>
basic elements : 余白(margin、padding等)の基本要素群 page layout(1) : ページや枠内での相対的な表示位置を指定する要素群 content : コンテンツ(記事部分)のデザインを指定する要素群 modules(1) : モジュール部分の表示位置を指定する要素群 basic page elements : 基本的な文字のフォント・サイズ・色等を指定する要素群 page layout(2) : 大きさ(幅・高さ)や背景色など、様々なレイアウトを指定する要素群 modules(2) : モジュール部分の余白や背景色を指定する要素群
繰り返し画像を表示する場合は、上記のように書き替えて、画像(上記例ではbg.gif)を「img」フォルダにアップロードします。 ストライプや水玉、花柄などを表示しても、にぎやかで楽しいサイトになりますよ。ぜひ自分好みに仕上げてみてください。]]>BODY { min-width: 720px; color: #333; background : url(img/bg.gif) repeat; }