小粋空間: テンプレート・モジュールの利用

Top ＞ Movable Type ＞カスタマイズ＞モジュール化＞テンプレート・モジュールの利用

2004年9月30日

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

Posted at September 30,2004 12:38 AM
Category：[3.01D-ja, モジュール化]
Tag：[]

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

今回は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 ; ← 左サイドバーのトップからの開始位置
}

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

Posted by yujiro このページの先頭に戻る

« リンクをマウスオン時にずらす | Main | 標語 »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ ナビゲーションバー from /PEN/
長らくつけたいと考えていたナビゲーションバーですが、小粋空間のyujiro様の解... [続きを読む]

Tracked on September 30, 2004 3:09 AM

≫ タイトルの下にリンクメニュー from Magic White
小粋空間テンプレート・モジュールの利用を参考に、小粋空間さんでは、MTIncl... [続きを読む]

Tracked on September 30, 2004 3:46 AM

≫ テンプレートモジュールでブログの共通部分を一括で編集する方法 from link-log powered by fullsizeimage.inc
例)全ページ共通のフッタを作成 1. テンプレート・モジュールの作成「テンプ... [続きを読む]

Tracked on October 17, 2004 1:05 PM

≫ MTIncludeを使ったモジュールの利用 from Stupid excuse!!
ちょっと前からＰＨＰ化をしていたんですがprofileだけｈｔｍｌのままだったん... [続きを読む]

Tracked on November 11, 2004 11:07 PM

≫ MTIncludeを使う（テンプレートモジュール） from angeli-x ++ monologue
MovableTypeで、テンプレートモジュールを使用して、共通化できる部分をひとつにし、それぞれのテンプレートに読み込む方法です。つまり、バナー、サイドバー... [続きを読む]

Tracked on January 16, 2005 6:34 PM

≫ 追記の折りたたみとメニュー from Aoi Movable Type
またまた小粋空間サマで書かれていた追記文章の折りたたみ用スクリプト（改）とテ... [続きを読む]

Tracked on March 5, 2005 10:20 PM

≫ タイトル下にメニュー from FFF HP
たま〓に、お子ちゃまには毒な話も出てくるのでバナー下にABOUTを作成し、サイ... [続きを読む]

Tracked on March 21, 2005 1:15 AM

≫ カスタマイズ覚え書き from K'S GARDEN
このブログのテンプレートは小粋空間：2カラムテンプレート（サイズ固定・右メニ... [続きを読む]

Tracked on April 7, 2005 11:35 PM

≫ テンプレート・モジュール from Tvyordiy Znahk
このサイトのサイドバーの一部を、テンプレート・モジュール化した。サイドバーの「ABOUT」「検索」「OTHERS」は、どのページにも共通して配置しているセクショ... [続きを読む]

Tracked on May 6, 2005 11:17 PM

≫ モジュール化 from Toxic
モジュール化（部品化）をところどころ実行中。要は、パーツパーツに分解して、それ... [続きを読む]

Tracked on May 28, 2005 2:32 AM

≫ タイトル下にメニューを追加 from PoPo.NET
小粋空間：テンプレート・モジュールの利用を参考にタイトル下にメニューを付けてみま... [続きを読む]

Tracked on July 8, 2005 1:02 PM

≫ テンプレートモジュール化 from zona sessualmente sensibile
今日はテンプレートのモジュール化をしてみた。エントリー数も少ない当ブログではモジュール化したところで再構築時間も体感的には差がなく意味がほぼない。唯一の利... [続きを読む]

Tracked on August 25, 2005 4:57 PM

丁寧な解説、ありがとうございますm(__)m
事前にタイトル部をPHPモジュール化していたので、そこに直接放り込むカタチでやってみましたが、無事に成功致しました！
ようやくサイトの方もカタチになってきました…本当に、いろいろとありがとうございます(^^)

[1] Posted by PEN : September 30, 2004 3:00 AM

こんばんわ。UNMOVABLETYPEさん閉鎖かなり残念です。理由が理由なだけに、これは、ブログ界のマナーの問題のような気もした。

原因エントリーのコメント見てるだけでなけてきましたわ、、。

トラックバックありがとうです。

[2] Posted by みよたん : September 30, 2004 3:04 AM

＞PENさん
良かったですね。また何かありましたらご連絡ください！（って書いてたら早速頂きましたね（笑））

＞みよたんさん
本当に残念です。参考させて頂いた瞬間に閉鎖とは…なんとも複雑な気持ちです。

[3] Posted by yujiro : October 1, 2004 12:14 AM

すいません、またまた記事の手直しをしたときにＴＢが飛んでしまったようです。・・・＿|￣|○・・・はうぅ・・・

[4] Posted by 198 : November 11, 2004 11:10 PM

＞198さん
こんばんはー。
削除しておきましたのでどうぞお気遣いなく！

[5] Posted by yujiro : November 12, 2004 1:25 AM

＞198さん
追伸です。
古い方のTBを削除しておきました（記事の内容が一致する方がいいかと思いまして）。

[6] Posted by yujiro : November 12, 2004 2:01 AM

もう何から何まで・・・。（涙）
かくなる上はバナー頑張ってつくります！

[7] Posted by 198 : November 12, 2004 9:18 AM

＞198さん
はい、楽しみにしております！
ってもう頂いてますね。ありがとうございました！

[8] Posted by yujiro : November 12, 2004 9:17 PM

すいません、記事を修正していて、また何回かＴＢpingを飛ばしてしまったようです。
お手数ですが、削除をお願いします。
申し訳ありません・・・（汗）

[9] Posted by 198 : November 23, 2004 9:09 AM

＞198さん
こんにちは。
遅くなりましたがトラックバック削除しておきました。
どうぞお気遣いなく。
ご連絡ありがとうございました。

[10] Posted by yujiro : November 24, 2004 9:50 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

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

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