2004年9月30日

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

September 30,2004 12:38 AM
Tag:[]
Permalink

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

UNMOVABLETYPEUMT Template3.0 - Module

今回は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 ; ← 左サイドバーのトップからの開始位置
}
MTInclude図は上記のカスタマイズを行った結果です。こんな感じでタイトルの下にリンクメニューが表示されます。
Comments [10] | Trackbacks [12]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3