Home > スポンサー広告 > GlobalNavi Current Customize

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Home > スポンサー広告 > GlobalNavi Current Customize

Home > Customize > GlobalNavi Current Customize

GlobalNavi Current Customize

  • Posted by: Black vicuna
  • 2010-04-22 Thu 20:11:24
  • Customize

gnavi2

Fc2.Vicunaで個別エントリーページをグローバルナビゲーションのカレント表示に対応させます。このエントリーでは、実際にBlack Vicunaのグローバルナビ、About, Skinのカレントを画像のように有効化させます。 基本的なグローバルナビゲーションの追加方法が理解出来ている前提で説明します。グローバルナビゲーションについて知りたい方はWikuna - グローバルナビの編集を参考にして下さい。

1. Entry IDを調べる

まずカレント表示させたいブログページのurlを調べます。このIDでページごとにCSSを対応させます。 urlの数字一部が ID(./blog-entry-1.html)です。カレント表示させたいブログページのIDをすべて調べておいて下さい。 後述 「4.CSSを追加」 でIDを使用します。

ex) Black Vicuna ID

カレント表示させたい Aboutページのurlがblog-entry-1.htmlなのでIDは[1]
id1

カレント表示させたい Skinページのurlがblog-entry-4.htmlなのでIDは[4]
id4

2. XHTMLテンプレート 個別ページにXHTMLを追加

xhtml

次に、XHTMLテンプレートを変更します。 XHTMLテンプレートの個別ページにある Fc2変数タグ id="entry<%topentry_no> を有効化するため、Fc2変数タグでbodyclass部分を囲んでいきます。(XHTML該当箇所は98行目位です。) id="entry<%topentry_no>は、現在のページのIDを出力してくれるタグです。

ex1) XHTML

Before

 <!-- ★個別ページはじまり -->
<body class="individual single" id="entry<%topentry_no>">
<div id="header">
	<p class="siteName"><a href="./" title="<%blog_name> Indexへ戻る"><%blog_name></a></p>
	<p class="description"><%introduction></p>
	<ul id="globalNavi">
		<li><a href="./">Home</a></li>
		<li><a href="./blog-entry-1.html">About</a></li>
		<li><a href="./blog-entry-4.html">skin</a></li>
		<li><a href="./?all">Archives</a></li>
	</ul>
</div>

After

 <!-- ★個別ページはじまり -->
	<!--topentry-->
<body class="individual single" id="entry<%topentry_no>">
	<!--/topentry-->
<div id="header">
	<p class="siteName"><a href="./" title="<%blog_name> Indexへ戻る"><%blog_name></a></p>
	<p class="description"><%introduction></p>
	<ul id="globalNavi">
		<li><a href="./">Home</a></li>
		<li><a href="./blog-entry-1.html">About</a></li>
		<li><a href="./blog-entry-4.html">skin</a></li>
		<li><a href="./?all">Archives</a></li>
	</ul>
</div>

・他ページのグローバルナビについては、通常のタグ追加となります。

3. リストにクラス属性を指定

カレント表示させたい <li>を<li class="重複しない任意の文字列+Fc2変数タグ">へ変えます。  Black Vicunaの場合は任意の文字列を about, skin, にしました。更にFc2変数タグでカレント対応させたいリストタグ部分を囲んでいきます

ex2) XHTML

Before

 <!-- ★個別ページはじまり -->
	<!--topentry-->
<body class="individual single" id="entry<%topentry_no>">
<div id="header">
	<p class="siteName"><a href="./" title="<%blog_name> Indexへ戻る"><%blog_name></a></p>
	<p class="description"><%introduction></p>
	<ul id="globalNavi">
		<li><a href="./">Home</a></li>
		<li><a href="./blog-entry-1.html">About</a></li>
		<li><a href="./blog-entry-4.html">skin</a></li>
		<li><a href="./?all">Archives</a></li>
	</ul>
</div>
	<!--/topentry-->

After

 <!-- ★個別ページはじまり -->
	<!--topentry-->
<body class="individual single" id="entry<%topentry_no>">
<div id="header">
	<p class="siteName"><a href="./" title="<%blog_name> Indexへ戻る"><%blog_name></a></p>
	<p class="description"><%introduction></p>
	<ul id="globalNavi">
		<li><a href="./">Home</a></li>
		<!--topentry--><li class="about<%topentry_no>"><!--/topentry--><a href="./blog-entry-1.html">About</a></li>
		<!--topentry--><li class="skin<%topentry_no>"><!--/topentry--><a href="./blog-entry-4.html">skin</a></li>
		<li><a href="./?all">Archives</a></li>
	</ul>
</div>
	<!--/topentry-->

4.CSSを追加

css be

次に、スタイルシート編集に移ります。 ul#globalNaviに任意の文字列+調べたIDをクラス名として追加して下さい。  Black Vicunaの場合、about(任意の文字列)+1(ID), skin(任意の文字列)+4(ID),をクラス名とします。

ex) CSS

Before

ul#globalNavi li a:hover,
ul#globalNavi li.current a {
	color: #333;
	background-color: #eee;
}

After

ul#globalNavi li.about1 a,
ul#globalNavi li.skin4 a,
ul#globalNavi li a:hover,
ul#globalNavi li.current a {
	color: #333;
	background-color: #eee;
}

css

CSS, ul#globalNaviが見つからない場合は、CSSを一度メモ帳などのテキストエディタにコピーして検索してみて下さい。
クラス名については、重複しない文字列であることが重要です。
ex)about[1], about[2], about[3],など文字列を重複させるとグローバルナビのカレント表示に不具合が出ます。
XHTML,CSSは正しい位置に記述して下さい。カンマやタグの閉じ忘れがないように気をつけてください。

Home > Customize > GlobalNavi Current Customize

Tag Cloud
Vicuna

Vicuna CMS

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。