テンプレート・モジュールの利用
Tag:[]
ここではタイトル下にメニューを与える方法についてのメモです。参考サイトは下記です。ありがとうございました。デザインが合うようにスタイルシートは若干修正致しました。
なおこちらのサイトは訳ありで閉鎖されるようで残念です。
今回は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 ; ← 左サイドバーのトップからの開始位置
}
図は上記のカスタマイズを行った結果です。こんな感じでタイトルの下にリンクメニューが表示されます。 |
- Movable Type 4 の PHP モジュール化
- MTInclude タグによる SSI(サーバサイドインクルード)不要なインデックステンプレートのモジュール化
- .htaccess によるリダイレクト
- Movable Type の PHP モジュール化の仕組みについて(その4:再構築オプション利用方法)
- Movable Type の PHP モジュール化の仕組みについて(その3:変更方法)
- Movable Type の PHP モジュール化の仕組みについて(その2:具体的動作とMTIncludeとの違い)
- Movable Type の PHP モジュール化の仕組みについて(その1:概要)
≫ ナビゲーションバー from /PEN/
長らくつけたいと考えていたナビゲーションバーですが、小粋空間のyujiro様の解... [続きを読む]
≫ タイトルの下にリンクメニュー from Magic White
小粋空間 テンプレート・モジュールの利用を参考に、小粋空間さんでは、MTIncl... [続きを読む]
≫ テンプレートモジュールでブログの共通部分を一括で編集する方法 from link-log powered by fullsizeimage.inc
例)全ページ共通のフッタを作成
1. テンプレート・モジュールの作成
「テンプ... [続きを読む]
≫ MTIncludeを使ったモジュールの利用 from Stupid excuse!!
ちょっと前からPHP化をしていたんですがprofileだけhtmlのままだったん... [続きを読む]
≫ MTIncludeを使う(テンプレートモジュール) from angeli-x ++ monologue
MovableTypeで、テンプレートモジュールを使用して、共通化できる部分をひとつにし、それぞれのテンプレートに読み込む方法です。 つまり、バナー、サイドバー... [続きを読む]
≫ 追記の折りたたみとメニュー from Aoi Movable Type
またまた小粋空間サマで書かれていた 追記文章の折りたたみ用スクリプト(改)と テ... [続きを読む]
≫ タイトル下にメニュー from FFF HP
たま〓に、お子ちゃまには毒な話も出てくるので バナー下にABOUTを作成し、サイ... [続きを読む]
≫ カスタマイズ覚え書き from K'S GARDEN
このブログのテンプレートは 小粋空間:2カラム テンプレート(サイズ固定・右メニ... [続きを読む]
≫ テンプレート・モジュール from Tvyordiy Znahk
このサイトのサイドバーの一部を、テンプレート・モジュール化した。サイドバーの「ABOUT」「検索」「OTHERS」は、どのページにも共通して配置しているセクショ... [続きを読む]
≫ モジュール化 from Toxic
モジュール化(部品化)をところどころ実行中。 要は、パーツパーツに分解して、それ... [続きを読む]
≫ タイトル下にメニューを追加 from PoPo.NET
小粋空間:テンプレート・モジュールの利用を参考にタイトル下にメニューを付けてみま... [続きを読む]
≫ テンプレートモジュール化 from zona sessualmente sensibile
今日はテンプレートのモジュール化をしてみた。 エントリー数も少ない当ブログではモジュール化したところで 再構築時間も体感的には差がなく意味がほぼない。 唯一の利... [続きを読む]
丁寧な解説、ありがとうございますm(__)m
事前にタイトル部をPHPモジュール化していたので、そこに直接放り込むカタチでやってみましたが、無事に成功致しました!
ようやくサイトの方もカタチになってきました…本当に、いろいろとありがとうございます(^^)
こんばんわ。UNMOVABLETYPEさん閉鎖かなり残念です。理由が理由なだけに、これは、ブログ界のマナーの問題のような気もした。
原因エントリーのコメント見てるだけでなけてきましたわ、、。
トラックバックありがとうです。
>PENさん
良かったですね。また何かありましたらご連絡ください!(って書いてたら早速頂きましたね(笑))
>みよたんさん
本当に残念です。参考させて頂いた瞬間に閉鎖とは…なんとも複雑な気持ちです。
すいません、またまた記事の手直しをしたときにTBが飛んでしまったようです。・・・_| ̄|○・・・はうぅ・・・
>198さん
こんばんはー。
削除しておきましたのでどうぞお気遣いなく!
>198さん
追伸です。
古い方のTBを削除しておきました(記事の内容が一致する方がいいかと思いまして)。
もう何から何まで・・・。(涙)
かくなる上はバナー頑張ってつくります!
>198さん
はい、楽しみにしております!
ってもう頂いてますね。ありがとうございました!
すいません、記事を修正していて、また何回かTBpingを飛ばしてしまったようです。
お手数ですが、削除をお願いします。
申し訳ありません・・・(汗)
>198さん
こんにちは。
遅くなりましたがトラックバック削除しておきました。
どうぞお気遣いなく。
ご連絡ありがとうございました。