ナビゲーションメニュー設置

   


もそさんところのナビゲーションメニューがずっと気になっており、付けたいなぁと思っていたところ、もそさんところと我楽さんところで詳しい設置方法が紹介されてましたので、お二人のを参考に(うそ、ほぼそのまんまコピペ)ナビゲーションメニュー設置しました。
TB:オサレなメニューバーを作ろう by 今日の覚書
TB:覚書:最近のカスタマイズ(その2) by 我楽
TB:メールフォーム(フォームメール?)設置しました。 by 我楽


細かい設置方法は、御本家であるお二人のところを参考にしてください。
一応、覚書ってことで。
もそさんところで紹介されていた「Accessify.com」のをまずは試してみたのですが、ソースやスタイルシートを弄ってみてもどうにも思い通りの見た目にならないので(恥)、もそさん我楽さんがやってらっしゃるのと同じ形にしました。

<div id="navcontainer">

| <a href="http://kazunoblog.com/" title="トップページへ">TOP</a> |

<a href="http://kazunoblog.com/about.html" title="プロフィール">PROFILE</a> |

<a href="http://kazunoblog.com/blogpeople.html" title="BlogPeople">BlogPeople</a> |

<a href="http://kazunoblog.com/mybloglist.html" title="MyBlogList">MyBlogList</a> |

<a href="http://kazunoblog.com/koiki.html" title="小粋空間ユーザーリスト">KOIKI</a> |

<a href="http://kazunoblog.com/link.html" title="リンク">LINK</a> |

<a href="http://kazunoblog.com/mail.html" title="メールはこちらから">Mail</a> |

</div>

を新しいテンプレートモジュール(headmenu)で作成して、各テンプレにインクルード。各ページは新しいインデックステンプレートで作成。モジュール化してあったサイドメニューのリンク部分を削除。
スタイルシートはこんな感じに。

#navcontainer {

text-align: center;

font-family: Verdana, Arial, sans-serif;

font-size: 11px;

font-weight:none;

color: #ffffff;

background: #6699CC;

background-position:left;

background-repeat:no-repeat;

padding-left:5px;

padding-top:2px;

padding-bottom:2px;

margin-left:0px;

margin-right:0px;

line-height: 200%;

margin-top: 0px;

}

#navcontainer a {

color: #ffffff;

text-decoration: none;

}

#navcontainer a:link {

color: #ffffff;

background: none;

}

#navcontainer a:visited {

color: #ffffff;

background: none;

}

#navcontainer a:active {

color: #ffffff;

background: none;

}

#navcontainer a:hover {

color: #006699;

background: none;

}

メールフォームも我楽さんところのそのまんまです(笑)。
PostMail

から、CGI を DL して解凍。
postmail.cgi の編集
postmail.html の編集
アップロード&パーミッション変更
チェックモードで確認
http://cgi を置いたパス/postmail/postmail.cgi?mode=check
postmail.html を iframe を使って 新しいインデックステンプレートに格納。(PHPにしている訳ではないのですが、既存テンプレをコピーした方が早いので)

<iframe src="http://harada.bz/cgi-bin/postmail/postmail.html" width="100%" height="600px" frameborder="0" marginheight="0" marginwidth="0" ></iframe>

以上、相変わらずもそさん我楽さんに頼りっぱなしで完成しました。感謝、感謝。

 - Customize