とってもキュートな水平メニュー「Fancy Navigation withCSS & jQuery」をご紹介致します。

段々と秋の気配を感じる今日この頃です。皆様いかがお過ごしでしょうか。季節の変わり目なので風邪などひかれないようご自愛下さいね。

さて以下、本家のサンプルメニューとなります。とても可愛いですよ。

Animated Navigation with CSS & jQuery

デモ

Very Cute! Pretty! あ～んど　Fancy!（久しぶりのsohtanakaさんのサイトネタで興奮気味）笑
とっても動きがかわいいですね。メニューをマウスオーバーすると、色違いの文字と背景のブロックが下から「みょん！」と出てきます。マウスを左右に動かしてみると、まるで波打っているような効果が見えますね。とても面白いです。さらに続けているとなんとなく上下回転しているように見えませんか。なんというトリック・・・！びっくり・・・です！

私もこのキュートなメニューのサンプルを作ってみました。

サンプル（1）

どうですかな！？か・・・かわいいですか？え？・・・駄目ですか。。そうですかそうですか。。。うわ～ん！！（涙）

さて（笑）気を取り直しまして、このサンプルの実装方法を以下に記述いたしますね。

1.　Animated Navigation with CSS & jQueryより、「jquery-1.3.2.min.js」ファイルをダウンロードする。（「Step 3. Animation – jQuery」のところにリンクがあります。）

2.　head内に以下のjsファイルへのリンクを記述する。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

3.　メニュー部分のHTMLを記述する。

<ul id="topnav" class="v2">
	<li><a href="#">Home</a></li>
	<li><a href="#">会社概要</a></li>
	<li><a href="#">製品情報</a></li>
	<li><a href="#">リクルート</a></li>
	<li><a href="#">お問い合わせ</a></li>
</ul>

4.　メニュー部分のCSS(スタイルシート)を記述する。

ul#topnav {
	margin: 10px 0 20px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	clear: both;
	float: left;
	width: 650px;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: left;
	height:40px;

}
ul#topnav a, ul#topnav span {
	padding: 10px 17px;
	float: left;
	text-decoration: none;
	color: #fff;
	clear: both;
	height: 20px;
	line-height: 20px;
	background: #1d1d1d;
}
ul#topnav a {	color: #7bc441; }
ul#topnav span {
	display: none;
}

ul#topnav.v2 span{
	background: url(a_bg.png) repeat-x left top;
}
ul#topnav.v2 a{
	color: #222;
	background: url(a_bg.png) repeat-x left bottom;
}

4.　jQueryのコードを記述する。

$(document).ready(function() {
	$("#topnav li").prepend("<span></span>"); //空のspanタグをリスト要素の先頭に挿入する

	$("#topnav li").each(function() { //リスト要素内の
		var linkText = $(this).find("a").html(); //aタグ内のテキストを変数linkTextに代入
		$(this).find("span").show().html(linkText); //変数linkTextに代入したテキストをSpanタグ内に追加
	}); 

	$("#topnav li").hover(function() {	//マウスオーバー時の処理
		$(this).find("span").stop().animate({
			marginTop: "-40" //spanタグを40ピクセル上に移動する
		}, 250);
	} , function() { //マウスアウト時の処理
		$(this).find("span").stop().animate({
			marginTop: "0" //元の状態（ 0px ）にspanを移動
		}, 250);
	});
});

以上です。（より詳しいソースははサンプルをご覧下さい。）

メニューが階層構造になっているので拡張性も優れていて、メンテナンスもしやすいのが良いですね！（見た目もソースも優しいのん。）
もちろん、カスタマイズ面でもスタイルシートの

ul#topnav.v2 span{
	background: url(a_bg.png) repeat-x left top;
}
ul#topnav.v2 a{
	color: #222;
	background: url(a_bg.png) repeat-x left bottom;
}

この部分の背景画像を作れば(a_bg.png)、自分の好きな背景画像を指定出来ます。

という訳で調子にのって、もう１パターン作ってみました！！
サンプル（2）

もしかしたらこちらの方が実用的かもしれませんね。シンプルで良いかもかも。
本当に簡単な設定で実装出来てしまうので、キュートなサイトに、又、びっくりどっきりな仕掛けが欲しいサイト等など、是非取り入れてみてはいかがでしょうか。

以上、[jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！のご紹介でした！

久しぶりにWordPress関連の記事になります。
先ほど、ブログの「カテゴリページ」のページ送り(previous_posts_link,next_posts_link）が機能しない事に気がつきました。

恐らくアクセスしても、ブラウザに「自動転送がループしています」（「FireFox」でのエラーメッセージ）や、エラーのページが出ていたと思います。皆様にご迷惑をおかけして大変申し訳ありません。
現在は復旧しております。

今回の記事はその不具合をどのようにして解決したかを書き綴りたいと思います。

動いていない事に気づいてから1時間くらい試行錯誤しネット等で調べていたのですが、直接的な解決策は結局見つかりませんでした。ですが、同じようなエラーを経験されているサイトの共通点に「パーマリンク」という共通のワードがあった為、そこに着目してみる事に。そこで、パーマリンクの設定をデフォルトに戻しページ送りが効くかどうか試したところ、あれほど「嫌だ嫌だ～動きたくない～」とダダをこねていたページ送り君がすんなり動作。（涙笑）
・・・ということは、やっぱり「パーマリンク」関連が不具合動作をおこしている事は「間違い無い！」と長井秀和風に断定しました。（古）

私がこのブログに設定しているパーマリンクの設定は・・・

/%category%/%post_id%.html

です。

上記のパーマリンクをまず「デフォルト」に戻す事で動作するようになったのですが、出来ればこのパーマリンクの設定のまま維持したいですよね。パーマリンクを変えるとgoogle等で検索結果等から過去のURLにアクセスするとそのURLは存在しないためエラーページが表示されてしまいます。又、私のサイトの構造上、カテゴリでのURL表示はどうしても外せないという気持ちもあります。

1.　「デフォルト」でのURL
http://miracle-ysdesign.com/?p=457
2.　カスタム構造「/%category%/%post_id%.html」でのURL
http://miracle-ysdesign.com/blog/javascript/457.html

うーん・・・どうしたものでしょうか。パーマリンクをデフォルトに戻すとアクセス出来なくなるし、今のパーマリンクのままだとページ送りが機能しません。
も・・もう今日は寝ちゃう？疲れたかも。いやいやこのブログを見てくれている人に失礼だよ！という衝動にかられつつもう少し頑張ってみることに。

後あやしいところといえば、プラグインかな？と思い、ひとつひとつ外してテストしていく事にしました。
でですね、、、最近入れた「Permalink Redirect」というプラグインを停止させてみたら見事解決しました！！

ただし！自分の事ながら少し矛盾しているのが、パーマリンクを変更してリダイレクトをしたいと考え「Permalink Redirect」を導入しているのに、今は変更していない事ですね。（まだ設定の項目欄などには何も変更を加えていませんし、保存もしていません。）
実は、数日前よりこのサイトのパーマリンクを

/%category%/%post_id%/%postname%

に変更しようと考えていまして、インスールしていたんです。（%postname%を使うと「投稿スラッグ」」より記事に関係のある名前を自由に設定できるのでSEOの面で有利と言われています。）
やっぱり使わないプラグインは外していた方が良いですね。（そりゃそうだよこのスットコドッコイ！という突っ込みがきそうですね！）

今後「Permalink Redirect」を使用した際にまた不具合が起こる可能性もあるので、その際はまた解決策などを練り公開したいと思います。又、今回のケースが全ての皆様にあてはまるとは思いません。もしかしたら、違う理由でページ送りが出来ていない可能性もあるかもしれません。（カテゴリページでのコーディングミス等。）今回はこういうケースもあったという事で記事におこしてみました。

以下、ページ送りに不具合が生じたら確認すべき事のまとめです。

1. パーマリンクの設定を「デフォルト」に戻して復旧するかどうか試す。（大抵はこれで復旧はするみたいです。）
2. 1.で復旧したら、パーマリンク関連のプラグインを使用していたら停止してみる。
3. 1.2.で解決しない場合はさらに違うプラグインを外して復旧するかどうか試す。

以上です。

このような長文駄文、最後までお読み頂きありがとうございます。

以下、今回記事作成する際に参考にさせて頂いたサイトです。
アーカイブページでのnext_posts_link()について | 広島、晴れのち晴れ
WordPressのページナビゲーションがうまく動作しない | フリー素材b-cures. blog
ありがとうございます！

以上、[WordPress]カテゴリページでのページ送りの不具合に関して（備考録）でした！

メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。

Color Fading Menu with jQuery
デモ

COoooooooooooooooOL!!!かっこよいですね！ （私は最初見たとき「FLASH！」と思ってしまいました。。。いやはや凄い時代になったものです。）

このメニューの面白いところは、マウスオーバーして背景画像と文字色を同時にフェードで切り替えているところです。もちろんスタイルシートでマウスオーバーで背景画像と文字色を変えるという設定は出来るのですが、「徐々に変える」という処理は出来ません。なので、jQueryに「徐々に（フェードして）変える」という処理をやらせて、この面白い効果を実現しています。

さて、例によって私がこのスクリプトを使用したサンプルを作ってみました！

サンプル

う～～～ん・・・微妙ですね！
ええと、言い訳です。いろいろと試したのですが、英語のフォントだとかっこ良く出来ても、日本のフォントだと、び・・微妙になるケースにはまってしまいました。皆様はこんな経験ありませんか。いやーデザインって本当に奥が深いですね！（でも楽しい。）笑

このメニュー（サンプル）の実装方法を以下に記述します。

1.　Color Fading Menu with jQueryより、ファイル一式をダウンロードする。（ページ中の「DowuloadFIles」というリンクより）

2.　head内に以下のjsファイルへのリンクを記述する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-color.js"></script>
<script type="text/javascript" src="main.js"></script>

※main.jsで、マウスオーバーした際のフェード処理等を実行します。

3.　メニュー部分のHTMLを記述する。

<div id="pageWrap">
  <div id="pageBody">
     <a class="hoverBtn" href="#">ホーム</a>
     <a class="hoverBtn" href="#">会社概要</a>
     <a class="hoverBtn" href="#">製品情報</a>
     <a class="hoverBtn" href="#">お問い合わせ</a>
     <div class="clear"></div>
  </div>
</div>

4.　メニュー部分のCSS(スタイルシート)を記述する。（本家のサンプルのように外部CSSファイルで読み込んでもOKです。）

#pageWrap {
	width: 560px;
	background-color: transparent;
	margin: 25px 0;
}

#pageBody {
	width: 100%;
}

div.hoverBtn {
	position: relative;
	float: left;
	background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;
	font-size: 13px;
}
div.hoverBtn a {
	position: relative;
	z-index: 2;
	display: block;
	width: 140px !important;
	width: 139px; /* for only IE6 style */
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: transparent none repeat-x 0 0 scroll;
	border-left: 1px solid #999;
}
div.hoverBtn div {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0px;
	background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;
}

以上です。
上記の要領で設定してあげれば動作すると思います。

さて、このメニューの肝である「マウスオーバーでフェードで切り替わる背景画像や文字色」はどこをどういじればカスタマイズ出来るのでしょうか。次は「カスタマイズの方法」そこに着目していきます。

■マウスオーバーしない状態（初期）の設定。（スタイルシート）
スタイルシートの以下の部分でカスタマイズします。

div.hoverBtn {
	position: relative;
	float: left;
	background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;
	font-size: 13px;
}
div.hoverBtn a {
	position: relative;
	z-index: 2;
	display: block;
	width: 140px !important;
	width: 139px; /* for only IE6 style */
	height: 30px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: transparent none repeat-x 0 0 scroll;
	border-left: 1px solid #999;
}

・背景（画像）の指定： 上記スタイルシートの4行目の「background: #000 url(images/navBG2.png) repeat-x 0 0 scroll;」の部分で指定します。
・文字色の指定： 上記スタイルシートの17行目の「color: #fff;」の部分で指定します。

■マウスオーバーした状態の設定。（スタイルシート,javascript(「main.js」ファイル)）
スタイルシートの以下の部分でカスタマイズします。

div.hoverBtn div {
	display: none;
	position: absolute;
	z-index: 1;
	top: 0px;
	background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;
}

javascript(「main.js」ファイル)の以下の部分でカスタマイズします。

var hoverColour = "#62CBF7";

・背景（画像）の指定： 上記スタイルシートの6行目の「background: #000 url(images/navHover4.png) repeat-x 0 0 scroll;」の部分で指定します。
・文字色の指定： javascript(「main.js」ファイル)の1行目の「var hoverColour = “#62CBF7″;」の部分で指定します。

以上2つの設定ポイントを抑えておけば、切り替わる背景画像と文字色を自由にカスタマイズ可能です。是非是非お試し下さいませ！

以下、今回の記事作成する際に参考にさせて頂いたサイトです。
マウスオーバーをデザインする | DesignWalker
Movable Type 備忘録 - Color Fading Menu with jQuery
ありがとうございます！

以上、[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menuでした！