MT導入基礎知識

Movable Typeとは?

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

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

HTMLとCSSを理解する

テンプレートって何?

プラグインって何?

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

pingを有効に活用しよう

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

デザインのカスタマイズ

カスタマイズの前に

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

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

H1~H6タグの見え方

サイトの背景を変更する

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

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

表示内容のカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

Mapper⇒地図画像を表示する

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

参考になるサイト・情報

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

Movable Typeに関するサイト

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

相互リンク

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

よもやま話

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

ブログランキングに登録

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

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







« サイドバーの見た目をかえる | メイン | カテゴリー一覧にエントリーも表示する »

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




Movable Typeのサイドバーは、オリジナルのままだといかにもブログっぽいのですが、うまくカスタマイズすれば、ホームページのメニューバー(リンクナビ)っぽくなります。

サイドバーに表示する内容は、もとからインストールされている『Widget Manager』プラグインで簡単にカスタマイズすることができます。

でも、Widget Managerに標準で登録されているWidget(サイドバーに表示するコンテンツ・要素のこと)は、標準テンプレートを独自にカスタマイズしない使い方を前提としています。そのため、自分でカスタマイズしていくうちに、不便さを感じるようになります。

そこで、最初からWidget Managerを使わずに、サイドバーに表示する内容をカスタマイズできるようになってしまいましょう。

サイドバーの内容を変更するには、サイドバーの表示に関するすべてのテンプレート(メインページ、各アーカイブ、検索ページ、等)を変更します。サイドバーの部分は、テンプレートの下記タグで囲まれている部分です。

※テンプレートの全体構成については、こちらを参考にしてください。
 ⇒ テンプレートの基本的な構成

<div id="beta"> <div id="beta-inner" class="pkg"> : : </div> </div>

サイドバーに表示する各コンテンツ(Movable Typeではwidgetと呼びます)は、基本的には、『class="module-○○ module"』というようなスタイル指定がなされているdivタグで囲まれています。例えば、検索widgetなら、下記の部分です。

<div class="module-search module"> <h2 class="module-header">検索</h2> <div class="module-content"> <form method="get" action="<$MTCGIPath$><$MTSearchScript$>"> <input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" /> <label for="search" accesskey="4">ブログを検索: </label> <br /> <input id="search" name="search" size="20" /> <input type="submit" value="検索" /> </form> </div> </div>

表示したくない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>までを、ごっそりモジュール化してしまうことをおすすめします。
※参考 ⇒ どんどんモジュール化しよう



最新記事一覧