テンプレート・モジュールの利用
ここではタイトル下にメニューを与える方法についてのメモです。参考サイトは下記です。ありがとうございました。デザインが合うようにスタイルシートは若干修正致しました。
なおこちらのサイトは訳ありで閉鎖されるようで残念です。
今回はMTIncludeというタグを使ってのモジュール化です。PHPを利用したモジュール化もありますので、Magic WhiteさんのPHP利用のテンプレートモジュール化をご覧ください(他のサイトでJavaScriptを使ったのもありました)。
1.新しいモジュールの追加
管理メニューより「テンプレート」をクリック。次の画面で一番下右の「新しいテンプレート・モジュールを作る」をクリック。
次画面で以下の情報を設定(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>
2.スタイルシートの追加
下記を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;
}
3.テンプレートにモジュールを引き込む設定の追加
各テンプレートのタイトル部分(下記)の該当位置に青色の記述を追加してください。
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<h2><$MTBlogDescription$></h2>
<$MTInclude module="globalnavi"$>
</div>
4.スタイルシート修正
上記の設定を行ったあと再構築を実施すれば表示されると思いますが、メニュー配置位置がタイトルのパディングに依存するのとバナー部分が広がることでサイドバーのレイアウトが影響を受けますので、必要に応じて下記の部分を修正してください。
#banner {
padding-bottom:15px; ← バナー下からリンクまでのパディング
}
#links-right{
top : 95px ; ← 右サイドバーのトップからの開始位置
}
#links-left{
top : 95px ; ← 左サイドバーのトップからの開始位置
}
![]() | 図は上記のカスタマイズを行った結果です。こんな感じでタイトルの下にリンクメニューが表示されます。 |
リンクをマウスオン時にずらす
これも使い始めて随分日が経ちましたがとりあえずご紹介まで。
文字や画像のリンクにマウスをポイントすると表示が右下にずれるという技です。我楽さんのサイトで使われているのが気に入って、使ってみました。とりあえずタイトル文字と右下のバナーに適用させています。こういう小技は洒落ていていいですね。
カスタマイズ方法は、スタイルシートで該当するa:hoverの中に
position:relative; top:1px; left:1px;
を入れればOKです。
MT 3カラム テンプレート(サイズ固定)
デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します。コメント・トラックバックはポップアップしない指定にしています。個別アーカイブ・コメント・コメントプレビュー・コメントエラー・コメント保留のテンプレートは1カラムで作成しています。
カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後(前でもいいです)に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。
カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。
#box {
width: 800px; ←3カラム全体の幅
}
#content {
width: 428px; ←中央カラムの幅(左右border分の2px差し引く)
}
#links-right{
width : 155px ; ←右カラムのテキスト幅
}
#links-left{
width : 155px ; ←左カラムのテキスト幅
}
値は、
全体の幅 = (中央カラム幅 + 2) + (左カラム幅 + (15*2)) + (右カラム幅 + (15*2))
となるように設定してください。左右カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。
不明な点または不具合等ございましたらご連絡ください。
Main Index
Stylesheet
Category Archive
Date-Based Archive
Individual Entry Archive(1カラム用)
Individual Entry Archive(3カラム用)
コメント・プレビュー(1カラム用)
コメント・プレビュー(3カラム用)
コメント・エラー(1カラム用)
コメント・エラー(3カラム用)
コメント・保留
2004.09.29 追記
コメント関連のテンプレートに3カラム用を追加しました。
2004.10.15 追記
スタイルシートの本文・コメント
サイドバー部分はカレンダーの曜日表示に影響があることが判明したためコメントアウトしました。
2004.10.19 追記
Individual Entry Archive(1カラム・3カラム)のトラックバック表示部分のデザインを変更しました(きちんとできていなかったので他と統一しました)。
2004.10.22 追記
TypeKeyのサイン・イン時の不具合を修正しました。修正したファイルはIndividual Entry Archive(1カラム/3カラム)/コメント・プレビュー(1カラム/3カラム)/コメント・エラー(1カラム/3カラム)/コメント保留です。

先日秩父に行った際、CDプレーヤーを使いたい用事があったのですがうっかり忘れたことに気がつき、「今持っているCDプレーヤーも古いし調子悪いし、ACアダプタ使えないし、この際だから新調しちゃえ!」と言い聞かせ(真実ですが)、道中でみつけた秩父市街の某電気店に立ち寄りました。