<?xml version="1.0" encoding="UTF-8"?><!-- generator="WordPress/2.7" -->
<rss version="0.92">
<channel>
	<title>Ys DESIGN</title>
	<link>http://miracle-ysdesign.com</link>
	<description>Ys DESIGNへようこそ！このサイトは、私が「WordPress」や「Movable Type」といったCMSを利用して製作したWEBサイトや、FLASHサイト、WEBデザインに関するブログ等を公開しています。</description>
	<lastBuildDate>Tue, 01 Sep 2009 11:59:43 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>ja</language>
	
	<item>
		<title>[jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS &#038; jQuery！</title>
		<description><![CDATA[とってもキュートな水平メニュー「Fancy Navigation withCSS &#38; jQuery」をご紹介致します。

段々と秋の気配を感じる今日この頃です。皆様いかがお過ごしでしょうか。季節の変わり目なので風邪などひかれないようご自愛下さいね。
さて以下、本家のサンプルメニューとなります。とても可愛いですよ。

Animated Navigation with CSS &#38; jQuery
デモ
Very Cute! Pretty! あ～んど　Fancy!（久しぶりのsohtanakaさんのサイトネタで興奮気味）笑
とっても動きがかわいいですね。メニューをマウスオーバーすると、色違いの文字と背景のブロックが下から「みょん！」と出てきます。マウスを左右に動かしてみると、まるで波打っているような効果が見えますね。とても面白いです。さらに続けているとなんとなく上下回転しているように見えませんか。なんというトリック・・・！びっくり・・・です！  
私もこのキュートなメニューのサンプルを作ってみました。
サンプル（1）
どうですかな！？か・・・かわいいですか？え？・・・駄目ですか。。そうですかそうですか。。。うわ～ん！！（涙）
さて（笑）気を取り直しまして、このサンプルの実装方法を以下に記述いたしますね。
1.　Animated Navigation with CSS &#38; jQueryより、「jquery-1.3.2.min.js」ファイルをダウンロードする。（「Step 3. Animation – jQuery」のところにリンクがあります。）
2.　head内に以下のjsファイルへのリンクを記述する。
&#60;script type="text/javascript" src="jquery-1.3.2.min.js"&#62;&#60;/script&#62;
3.　メニュー部分のHTMLを記述する。
&#60;ul id="topnav" class="v2"&#62;
	&#60;li&#62;&#60;a href="#"&#62;Home&#60;/a&#62;&#60;/li&#62;
	&#60;li&#62;&#60;a href="#"&#62;会社概要&#60;/a&#62;&#60;/li&#62;
	&#60;li&#62;&#60;a href="#"&#62;製品情報&#60;/a&#62;&#60;/li&#62;
	&#60;li&#62;&#60;a href="#"&#62;リクルート&#60;/a&#62;&#60;/li&#62;
	&#60;li&#62;&#60;a href="#"&#62;お問い合わせ&#60;/a&#62;&#60;/li&#62;
&#60;/ul&#62;
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: [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/javascript/483.html</link>
			</item>
	<item>
		<title>[WordPress]カテゴリページでのページ送りの不具合に関しての備考録</title>
		<description><![CDATA[久しぶりに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()について &#124; 広島、晴れのち晴れ
WordPressのページナビゲーションがうまく動作しない &#124; フリー素材b-cures. blog
ありがとうございます！
以上、[WordPress]カテゴリページでのページ送りの不具合に関して（備考録）でした！
]]></description>
		<link>http://miracle-ysdesign.com/blog/wordpress/473.html</link>
			</item>
	<item>
		<title>[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu</title>
		<description><![CDATA[メニューにマウスオーバーすると、背景画像と文字色がフェードで切り変わるメニュー「Color Fading Menu」のご紹介記事です。

Color Fading Menu with jQuery
デモ
COoooooooooooooooOL!!!かっこよいですね！  （私は最初見たとき「FLASH！」と思ってしまいました。。。いやはや凄い時代になったものです。）
このメニューの面白いところは、マウスオーバーして背景画像と文字色を同時にフェードで切り替えているところです。もちろんスタイルシートでマウスオーバーで背景画像と文字色を変えるという設定は出来るのですが、「徐々に変える」という処理は出来ません。なので、jQueryに「徐々に（フェードして）変える」という処理をやらせて、この面白い効果を実現しています。
さて、例によって私がこのスクリプトを使用したサンプルを作ってみました！
サンプル
う～～～ん・・・微妙ですね！
ええと、言い訳です。いろいろと試したのですが、英語のフォントだとかっこ良く出来ても、日本のフォントだと、び・・微妙になるケースにはまってしまいました。皆様はこんな経験ありませんか。いやーデザインって本当に奥が深いですね！（でも楽しい。）笑
このメニュー（サンプル）の実装方法を以下に記述します。
1.　Color Fading Menu with jQueryより、ファイル一式をダウンロードする。（ページ中の「DowuloadFIles」というリンクより）
2.　head内に以下のjsファイルへのリンクを記述する。
&#60;script type="text/javascript" src="jquery.js"&#62;&#60;/script&#62;
&#60;script type="text/javascript" src="jquery-color.js"&#62;&#60;/script&#62;
&#60;script type="text/javascript" src="main.js"&#62;&#60;/script&#62;
※main.jsで、マウスオーバーした際のフェード処理等を実行します。
3.　メニュー部分のHTMLを記述する。
&#60;div id="pageWrap"&#62;
  &#60;div id="pageBody"&#62;
     &#60;a class="hoverBtn" href="#"&#62;ホーム&#60;/a&#62;
     &#60;a class="hoverBtn" href="#"&#62;会社概要&#60;/a&#62;
     &#60;a class="hoverBtn" href="#"&#62;製品情報&#60;/a&#62;
     &#60;a class="hoverBtn" href="#"&#62;お問い合わせ&#60;/a&#62;
     [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/javascript/457.html</link>
			</item>
	<item>
		<title>[jQuery]マウスオーバーした画像にフェードイン・フェードアウト（透明度）する効果を！夏</title>
		<description><![CDATA[画像をマウスオーバーするとふわ～っと透明度がフェードインしていくFLASHのような効果のご紹介記事です。（マウスアウトでフェードアウト）

いや～しかし暑いっすね、旦那！そこのお兄さん、お姉さん、ちょっくらこのマウスオーバー効果見てっておくれでないかい？・・・なんていう会話が街中から聞こえそうな毎日であります。_(:D)￣&#124;_ 皆様も夏バテなどしないようご自愛下さいませ。
まずは、サンプルを見てみてください。
サンプル
画像をマウスオーバーすると、画像の透明度が徐々に変わっていきます。マウスアウトすると、もとの透明度に戻る。FLASHではよく見る手法です。
スタイルシートで画像をマウスオーバーしたら透明度を変えるという手段もあるのですが、スタイルシートでは、徐々に変化する事を実現する事は難しいです。
（例）スタイルシートで画像をマウスオーバーしたら透明度を変える
a:hover img{
  opacity:0.6;
  filter: alpha(opacity=60);
}
そこで、今回はjQueryで徐々に透明度が変わるという処理をやらせてみました。
以下、実装手順です。
1.　ヘッダにjQuery本体を読み込む
&#60;script type="text/javascript" src="js/jquery.js"&#62;&#60;/script&#62;
2.　jQueryの処理を記述する
$(document).ready(
  function(){
    $("#gallery img").hover(function(){
       $(this).fadeTo("normal", 0.6); // マウスオーバーで透明度を60%にする
    },function(){
       $(this).fadeTo("normal", 1.0); // マウスアウトで透明度を100%に戻す
    });
  });
hoverイベントを用いて#gallaryのimg要素をマウスオーバーしたら、フェードイン、マウスアウトでフェードアウトする処理を実行しています。
フェードの部分はjQueryのFadingエフェクトを使用しています。
以下、解説です。
fadeTo(speed, opacity, [callback])
fadeToメソッドは、マッチした要素を第2引数で指定した不透明度opacityへフェイドします。第1引数で、アニメーションスピードと、第3引数で、動作完了後に起動させるコールバック関数も指定できます。(第3引数は省略可)
※引用元
jQueryのFadingエフェクト3 - ［JavaScript］All About
引数の解説。
speed ： フェードの速度。&#8221;slow&#8221;, &#8220;normal&#8221;, [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/javascript/443.html</link>
			</item>
	<item>
		<title>[jQuery]クロスフェードで切り替わる画像（URL）を簡単実装「Innerfade with jquery」！</title>
		<description><![CDATA[簡単に画像や文字（要素）をクロスフェードで切り替える事が可能なjQueryのプラグイン「Innerfade with jquery」のご紹介です。

サンプルを見る
FLASH等でよく見かけますが、やっぱりクロスフェード（フェードイン・フェードアウトの交差）は綺麗ですね！
画像の切り替わりと同時にその画像に設定したURLに変更するので、おしゃれなバナー広告として、又、最近の記事一覧（ニュースティッカーとして画像を切り替え）の紹介などに使えそう。 
又、HTMLの構造がリスト構造になっているので、画像の追加や、後々のメンテナンスも簡単なのも嬉しいですね。Great！
下の画像はスタイルシートを外したブラウザの画面。。。うんうん、リストですな。

以下、「Innerfade with jquery」の実装手順です。
1.「Innerfade with jquery」からjquery.innerfade.zipをダウンロードします。（ページの一番下にあります。）そしてファイルを解凍展開。
2.jsフォルダの「jquery.innerfade.js」「jquery.js」ファイルを任意の場所（jsフォルダ等）にコピー保存します。
3.HTMLファイルにjsファイルの読み込み部分のソースを記述します。
&#60;script type="text/javascript" src="js/jquery.js"&#62;&#60;/script&#62;
&#60;script type="text/javascript" src="js/jquery.innerfade.js"&#62;&#60;/script&#62;
4.表示したい画像とURLのHTMLをリスト形式で記述します。
&#60;ul id="portfolio"&#62;
  &#60;li&#62;
     &#60;a href="http://miracle-ysdesign.com/blog/webdesignconnection/103.html"&#62;&#60;img src="images/lavalamp.jpg" alt="Lava Lamp Menu でロールオーバー表現を豊かにする" /&#62;&#60;/a&#62;
  &#60;/li&#62;
  &#60;li&#62;
     &#60;a href="http://miracle-ysdesign.com/blog/wordpress/118.html"&#62;&#60;img src="images/lightbox2.jpg" alt="Lightbox 2プラグイン導入！" /&#62;&#60;/a&#62;
  &#60;/li&#62;
  &#60;li&#62;
     &#60;a href="http://miracle-ysdesign.com/blog/javascript/75.html"&#62;&#60;img src="images/multicol1.jpg" alt="HTMLで雑誌のような美しい段組みレイアウトを実現するjQueryプラグイン！" /&#62;&#60;/a&#62;
  [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/javascript/409.html</link>
			</item>
	<item>
		<title>[CSS]画像をほんのちょっぴり豪華に装飾するスタイルシートのプチテクニック</title>
		<description><![CDATA[「写真等の画像をいかに上手くスタイル付けしてあげられるか」を日々模索しています。
そんな中、これはなかなか面白いのでは？と思ったスタイルシートのプチテクニックをご紹介します。

とはいったものの、そんなたいそうなものじゃありません。プチプチプチテクニックです！！
実際に見ていただくのが一番良いですね。
サンプル
サンプル1では白系の背景に使えそうなものをスタイルし、サンプル2では黒系の背景に使えそうなものをスタイルしています。
スタイルシートのソースは以下になります。
1.白系の背景にフィットしそうな画像の装飾
#main #cover img {
	background: #fff;
	border: 3px double #ddd;
	margin: 5px;
	padding: 3px;
}
2.黒系の背景にフィットしそうな画像の装飾
#main #cover2 img {
	background: #333;
	border: 3px double #ccc;
	margin: 5px;
	padding: 3px;
}
「border: double」というところが肝になります。
いかがでしょう？すこーしだけ豪華な気がしませんか。（・・・私だけでしょうか・・・（笑））
FF,Safari,IE6、7、8でも差異なく表示出来ます。
※ただし、IE6の表示モードが後方互換モードの（xml宣言ありの）場合は、img要素にpaddingを設定しても反映されないので、注意が必要。
また画像の装飾に関して面白そうな表現を見つけましたら記事にしますね！
以上、[CSS]画像をほんのちょっぴり豪華にするスタイルシートのプチテクニックでした！
]]></description>
		<link>http://miracle-ysdesign.com/blog/webdesignconnection/365.html</link>
			</item>
	<item>
		<title>[CSS]夏だ！海だ！さわやかなデザインを実現するbackground-attachment: fixed;！</title>
		<description><![CDATA[・・・ふざけているつもりはないのですが、なんとなく今回はこのタイトルで行こうと思いました。（汗）
Webデザインにおける「background-attachment: fixed;」の活用法のご紹介です。結構いろいろなサイトで使われていて、個人的にはとても面白いアイデアだなと思っています。

まずは、テストサイトをご覧下さい。
スタイルシートのbodyに背景固定の記述をしてこのレイアウトを実現しています。（記述はここだけ。）
以下、CSSのソースです。
body {
	background: #CCF2FA url('img/middle-background.jpg') repeat-x left top;
	background-attachment: fixed;
}
中のコンテンツはマウス動作により、スクロールされます。この際、背景はスクロールに付随しません。ここが肝となります。この手のレイアウトは当然背景画像の見せ方が重要になってくると考えます。「ブラウザをキャンバスと見立てて、一枚の絵として配置しユーザーに見ていただく。」という感じでしょうか。私も出来る限り綺麗なレイアウトをお見せ出来るよう頑張ってみましたが、なかなか難しいですね。。。！ちなみに下まで、スクロールしていくと、、、コンテンツが上に行くため、下からまた背景画像が見えてくるのがなかなか「おつ」ではないでしょうか。（コンテンツ下にその為のマージンを指定しています。）
問題点として

大きな画像を使用する為、最初の背景画像の読み込みが重い（遅い）
流動的なスクロールに慣れているユーザーは、違和感を感じる可能性がある

等があります。
この辺りの問題点を自分なりに整理して、いかにユーザーに配慮されたレイアウトなり仕組みが構築されているかが鍵になりそうです。
独特の仕様な為万人向けとはいえませんが、デザインのスパイスとして、パターンのひとつとして、組み込んでみるのもWebデザインの楽しさのひとつではないでしょうか。又、企業サイト等での実装は難しいでしょうが、ブログでの実装はレイアウトパターンのひとつとしてありだと思っています。
又、テストサイトでは、background-attachment: fixed;を使用する際にあわせて使ったら面白いのではと思ったものを実装しています。それを以下に記述します。
1.styleswitcherによる、背景画像の切り替え（スタイルシート）

■以下、設定する為のHTMLのソースです。（headに記述する）
&#60;link rel="stylesheet" type="text/css"   href="default.css"  title="" media="all"/&#62;
&#60;link rel="alternate stylesheet" type="text/css"  href="af.css" title="alternate1" media="all"/&#62;
&#60;link rel="alternate stylesheet" type="text/css"  href="n1.css" title="alternate2" media="all"/&#62;
&#60;link rel="alternate stylesheet" type="text/css"  href="n2.css" title="alternate3" media="all"/&#62;
&#60;script type="text/javascript" src="styleswitcher.js"&#62;&#60;/script&#62;
&#60;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221;   href=&#8221;default.css&#8221;  title=&#8221;" media=&#8221;all&#8221;/&#62;
で、初期に表示するCSSを記述します。
&#60;link rel=&#8221;alternate stylesheet&#8221; type=&#8221;text/css&#8221;  href=&#8221;af.css&#8221; title=&#8221;alternate1&#8243; media=&#8221;all&#8221;/&#62;
&#60;link rel=&#8221;alternate stylesheet&#8221; type=&#8221;text/css&#8221;  [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/webdesignconnection/376.html</link>
			</item>
	<item>
		<title>[jQuery]3階層以上のドロップダウンメニューを表示する「droppy」！</title>
		<description><![CDATA[jQueryで3階層以上のドロップダウンメニューを表示可能なプラグインを見つけましたので、ご紹介いたします。こちらは水平（横）のメニューになります。

droppy  - Nested drop down menus
さっそくテストしてみました！
動作がスムーズで、かつ見栄えも良く、使えるメニューではないでしょうか。  
なんといってもリストのネストに柔軟に対応しているところが嬉しいですね。私が試してみたのは4階層までですが、もっと深い階層でも実装可能です。（んが！見栄えやユーザビリティを考慮しますと、2.3階層くらいまでがベストかも。）
以前、「JQueryでサブ（階層）メニューを表示する」でご紹介したSuckerFish Styleよりより深い階層に対応してる分、若干使い勝手が良い感じです。
以下、実装手順です。
（必要なファイルは、droppy  - Nested drop down menusよりダウンロード出来ます。）
1.　head内に以下のjsファイルへのリンクを記述する
&#60;script type="text/javascript" src="jquery.js"&#62;&#60;/script&#62;
&#60;script type="text/javascript" src="jquery.droppy.js"&#62;&#60;/script&#62;
2.　リストのHTMLを記述する
&#60;ul id="nav"&#62;
  &#60;li&#62;&#60;a href="#item1"&#62;ホーム&#60;/a&#62;&#60;/li&#62;
  &#60;li&#62;&#60;a href="#"&#62;ゲーム&#60;/a&#62;
    &#60;ul&#62;
      &#60;li&#62;&#60;a href="#"&#62;DS→&#60;/a&#62;
        &#60;ul&#62;
          &#60;li&#62;&#60;a href="#"&#62;ゲームソフト&#60;/a&#62;&#60;/li&#62;
 [...]]]></description>
		<link>http://miracle-ysdesign.com/blog/javascript/358.html</link>
			</item>
	<item>
		<title>Movable Typeのテンプレートを確認・保存する方法</title>
		<description><![CDATA[WordpressからMovable Typeに移行した際に、「テンプレートのファイルはどこに保存されているんだろう？」「テンプレートのソースをエディタで開き、編集したり、保存したりする方法は無いかな？」という疑問が出てきました。

Wordpressでは、「themes」フォルダの該当するテンプレート名のフォルダに「PHPファイル」等で保存されていて、個々のファイルのソースの確認も、編集も、バックアップも簡単に出来ます。
ところが、Movable Typeの場合は、テンプレートのファイルがどこにあるのか分かりません。  もちろん、ツールのバックアップ機能を用いてバックアップは出来ますが、出来れば、テンプレートの内容を個々に保存して、エディタでソースを確認したり、コーディングにミスがあった時など、過去のファイルを使用（比較）して復旧したいと考えました。
要するに、Wordpressのように直感的に保存、編集、修復をしたい。
そこで、いろいろ調べまして、MTはデータベースそのものにテンプレートの情報を保存しているらしい？とのことです。
うーん、、、困った。やはり、テンプレートのソースをエディタに直接コピペして、確認保存する方法しかないのでしょうか。ああ、悲しきかなコピペ人生。（チョンチョーン）
そんなこんなで、数日しゃがれたMTライフを送っていた訳ですが、グーグル先生が一筋の光明を導いて下さいました。
それは、「ファイルへのリンク」というキーワードでした。。。。終　　　　　　りません。
前置きが長くなりましたが（笑）以下、現時点でのMTのファイルの保存、確認が出来る方法を記述しておきます。
1.まず、FFFTP等で、サーバーのMTがインストールしてある階層に、「temp-backup」（名前はなんでも良いです。）というフォルダを作成します。
2.次に、MTの「ブログのテンプレート」画面を開きます。テンプレートはなんでも良いのですが、ここでは、「メインページ」にします。クリック。そして、「テンプレート編集」画面に移り、下部の「テンプレートの設定」をクリック。
「ファイルへのリンク」出てきましたね。ははは、こいつぅ！
3.この「ファイルへのリンク」に先に作成した「temp-backup」に、保存する為のパスを記述します。私はテンプレートの種類毎に分けて保存したかった為、temp-backupの中にindex-tempというフォルダを作成し、パスを「temp-backup/index-temp/index.html」としました。
4.上記の要領で、スタイルシートも同様に「ファイルへのリンク」へパスを記述します。私は「temp-backup/index-temp/styles.css」としました。
5.さらにテンプレートの種類に応じて「ファイルへのリンク」へパスを記述します。詳細は以下。
・インデックステンプレート
ーーメインページ（temp-backup/index-temp/index.html）
ーースタイルシート（temp-backup/index-temp/styles.css）
・アーカイブテンプレート
ーーブログ記事（temp-backup/archive-temp/blogkiji.html）
ーーブログ記事のリスト（temp-backup/archive-temp/blogkijino-list.html）
・テンプレートモジュール
ーーhead要素(temp-backup/Template-module-temp/head-youso.html)
ーーパンくずナビゲーション（temp-backup/Template-module-temp/pankuzu-navigation.html）
・システムテンプレート
ーー検索結果（temp-backup/system-template-temp/kensakukekka.html）
※ファイルの名前はなんでも良いそうです。が、出来るだけ分かりやすい名前にした方が良いでしょう。
6.以上の設定により、ブログの再構築をかけるとテンプレートファイルがHTMLファイルとして、ひとつひとつ指定したパスに保存されます。
※再構築の度に上書き保存されるので、ローカルにバックアップフォルダ等を作成して、ファイルを適時保存しておくと良いです。（作業前や、重要な変更をする時など、失敗した場合に備えてすぐに修復出来るようにしておく。）
※FFFTPによるバックアップ詳細画面はこちら（私の場合）

7.ローカルにバックアップしたファイルを、エディタ等で開き、確認、修正が出来ます。エディタはアンドゥや、検索、置換等の機能が豊富ですので、安心してコーディングが出来るのが嬉しいですね。
これで快適MTライフ！  
以上です。
尚、修復は、ローカルに保存された該当するテンプレートファイルをエディタで開いてソースを全選択コピーし、MTの「テンプレート編集」画面にて該当するテンプレートに全選択ペーストします。そして再構築します。これで、以前の状態に復旧（ローカルに保存された内容に戻す）します。（私は試してませんが、ローカルにある該当ファイルをサーバーの該当ファイルに直接アップ上書きでもいけるのでしょうか。。。再構築エラーが出そうで怖いです。）
ところで、この「ファイルへのリンク」機能なんですが、オーサリングソフトとの連携に使うのが主らしいです。
小粋空間: 「このテンプレートにリンクするファイル」の使い方 for Movable Type
小粋空間さんの記事は大変参考になりました。ありがとうございます。
以上、Movable Typeのテンプレートを確認・保存する方法でした！
]]></description>
		<link>http://miracle-ysdesign.com/blog/movabletype/341.html</link>
			</item>
	<item>
		<title>120個の優れたメニューが見れるサイト！</title>
		<description><![CDATA[なんと！その数120個におよぶ素敵なメニューが、一覧で見れるサイトを見つけたのでご紹介いたします。

120 Excellent Examples of CSS Horizontal Menus
ここまでくると圧巻ですね。 
メニュー作りに困った時や、新しいメニューを作る時に参考になりそうです。ちなみにメニュー画像をクリックすると、そのメニューがあるサイトに遷移するので、そのメニューと全体のバランスも見ることが出来ます。
以下、気に入ったのをペタペタと・・・



メニューの下に丁寧に説明が書いてあるところが良いなと思いました。  
以上、メニューに関する記事のご紹介でした！
]]></description>
		<link>http://miracle-ysdesign.com/blog/webdesignconnection/202.html</link>
			</item>
</channel>
</rss>
