小粋空間  -  a cheap joke and a play on words site

テンプレート・モジュールの利用

ここではタイトル下にメニューを与える方法についてのメモです。参考サイトは下記です。ありがとうございました。デザインが合うようにスタイルシートは若干修正致しました。
なおこちらのサイトは訳ありで閉鎖されるようで残念です。

UNMOVABLETYPE：UMT Template3.0 - Module

今回はMTIncludeというタグを使ってのモジュール化です。PHPを利用したモジュール化もありますので、Magic WhiteさんのPHP利用のテンプレートモジュール化をご覧ください（他のサイトでJavaScriptを使ったのもありました）。

１．新しいモジュールの追加
管理メニューより「テンプレート」をクリック。次の画面で一番下右の「新しいテンプレート・モジュールを作る」をクリック。
次画面で以下の情報を設定（URLは私のサイト用になってますので適宜変更ください）。

• テンプレートの名前：globalnavi
• モジュールの中身：下記

<div id="globalnavi">
<li><a href="<$MTBlogURL$>">Home</a></li>
<li><a href="<$MTBlogURL$>site.html">About</a></li>
<li><a href="<$MTBlogURL$>about.html">Profile</a></li>
</div>

２．スタイルシートの追加
下記をStylesheetに追加（場所はどこでもOK）

#globalnavi {  
    padding-top: 10px;
}
 
#globalnavi li {	  
    padding-left: 0px;  
    padding-right: 10px;  
    display: inline;
}
 	
#globalnavi li a, 
#globalnavi li a:link,  
#globalnavi li a:visited {  
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    text-decoration: none;
}
 
#globalnavi li a:hover {  
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    text-decoration: underline;
}

３．テンプレートにモジュールを引き込む設定の追加
各テンプレートのタイトル部分（下記）の該当位置に青色の記述を追加してください。

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<h2><$MTBlogDescription$></h2>
<$MTInclude module="globalnavi"$>
</div>

４．スタイルシート修正
上記の設定を行ったあと再構築を実施すれば表示されると思いますが、メニュー配置位置がタイトルのパディングに依存するのとバナー部分が広がることでサイドバーのレイアウトが影響を受けますので、必要に応じて下記の部分を修正してください。

#banner {
    padding-bottom:15px; ← バナー下からリンクまでのパディング
}
 
#links-right{
    top : 95px ; ← 右サイドバーのトップからの開始位置
}
 
#links-left{
    top : 95px ; ← 左サイドバーのトップからの開始位置
}

図は上記のカスタマイズを行った結果です。こんな感じでタイトルの下にリンクメニューが表示されます。