joomla template
■ Welcome KNTS-WEB Joomla DemoSite!!
オリジナルNAVIバーの作成！ PDF プリント メール
作者 Administrator   
2007/08/09 木曜日 10:31:09 JST
当サイト使用のNAVIバーの設置
グラフィカルな、マウスを乗せると色が変わるナビゲーションバーをJoomlaに挿入します。
テーブルタグを使った横一列のNAVIバーです。
必要なもの：
画像 mn_bar.png size:w=22px h=22px　自前の画像を作成し、お使いのテンプレートフォルダimages/へ
CSSファイル：mystyle.css　style.css
mystyle.cssはNAVIバーのCSSです。
style.cssはオリジナルのtemplate_css.cssに手を加えずインポートさせるためのCSSです。

ファイルネームmystyle.cssとしてNAVIバー用のスタイルを記述します。
/*-------------ここから
#my_navi {
      height:22px;
      background-image:url(../images/mn_bar.png);
      border:1px solid #94b0c8;
      margin:0;
}

.my_link {
	text-align:center;
	height:22px;
	line-height:175%;
}

.my_link a:link {
width:100px;
	height:22px;
	background:transparent;
	display:block;
	text-decoration:none;
	color:#000000;
	font-size:9pt;
	border-right:1px solid #cccccc;

}

.my_link a:hover {
        height:22px;
	background:transparent;
	display:block;
	text-decoration:none;
	color:#ffffff;
	font-size:9pt;
	background-color:#ff4500;

}

.my_link a:visited {
width:100px;
        height:22px;
	display:block;
	text-decoration:none;
	font-size:9pt;
	border-right:1px solid #cccccc;
}
-------------------ここまで*/

style.cssの作成 [インポート]
/*---------------------------------ここから
　@import url("template_css.css");
　@import url("mystyle.css");
　---------------------------------ここまで*/

作成したらお使いのテーマフォルダ/css/template_css.cssと同じ場所にstyle.cssを置きます。

管理エリア：HTML編集[ヘッダー部]
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />

template_css.cssをstyle.cssに置き換える。

<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/style.css" rel="stylesheet" type="text/css" />

NAVIバーのHTMLを任意の場所（上段LOGO部分の可能な位置）へ挿入します。
<!-- Guide -->
<div id="my_navi">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="22"><tr>
<td class="my_link">
<a href="http://www.knts.net/~suite/"> ホーム </a>
</td>
<td class="my_link">
<a href="http://www.knts.net/~worker/Joomla/content/section/1/2/"> ニュース </a>
</td>
<td class="my_link">
<a href="http://www.knts.net/~gateway/hp/search/seos.htm">相互リンク</a>
</td>
<td class="my_link">
<a href="http://www.knts.net/~gateway/">ショップ</a>
</td>
<td width="100%">
 
</td>
</tr></table>
</div>
<!-- Guide -->

※ URL/リンク名部分は貴方がリンクしたいアドレスに変更してください。
以上当サイトの設置例です。

※ 当サイトでは設置に関する質問は受け付けておりません、
また設置の際不具合などが生じても責任は問いませんので設置には充分注意し、自己責任のもとでご利用ください。
※ 不具合、間違い等あればお知らせ頂ければ幸いです。

最終更新日 ( 2007/08/30 木曜日 21:43:41 JST )
 
次へ >
[ 戻る ]
joomla template
joomla template
joomla template