今日は朝一番で仕事関連のデータをサーバーにアップしようとしたとたん、
なぜかCSSがまったく読み込まれず、レイアウトがメチャクチャに・・・
その後、データの確認作業をしたところ、CSSの記述が・・・ごっそり消えてしまいマシタ・・・
間違えてDeleteキーでも押してしまったのか？
理由はまったく分かりません。（電源が落ちたわけでもないし・・・）
とにかく記述したはずのCSSの内容を泣く泣く書き直して作業終了（とりあえず）
あ?せめて一度サーバーにアップするとか、バックアップを取った後にしてほしかったデス。
とにかく落ち着いたので、数日前のMT自分用メモを。
そろそろ記事が多くなってきたので、ページの下部にある
『ページトップへ戻る』をクリックしたときに
スルスル?っと移動するJavaScriptをMTに組み込みました。
皆さん利用しているのは色々あるみたいですが、
今回参考にさせてもらったのは、
MovableTyle備忘録さんのぺーじにあった『ｊQueryを利用する』パターンです。
今回は、このMTだけじゃなく、使用しているドメイン全体で使いたいなぁ?と思っているので、
私の場合はディレクトリはこんな感じ。
================================================
http://194.91.4.143/wp2023/
|
+-- index.html <-- 各自のトップページ
+-- js/
| +-- jquery/
| | +-- interface/
| | | +-- ifxscrollto.js <-- スムーススクロール用
| | +-- jquery.js
| | +-- jquery-effect.js
| |
+-- mt/
================================================
■まずは必要なJavaScriptを入手します。
jQuery: The Write Less, Do More, JavaScript Library
ここで最新のｊQueryをダウンロードし、jquery.js とリネームしてから
サーバーにアップ。
■次に interface.js をダウンロードします。
Interface elements for jQuery
ここで紹介されているelementは沢山あるので今回は
『scroll』だけでいいのですが、面倒なので全部パックになっている
『Interface 1.2 146kb (source files, compressed files)』を
ダウンロードさせて頂きました。
Zipファイルを解凍して、『ifxscrollto.js』を探せばOKです。
■そしてスムーススクロール用のコードを記述。
以下の記述をメモ帳などで記述、
jquery-effect.js というファイル名で保存します。
===========================================
$(function() {
$(‘a.pagetop’).click(function() {
$(‘#top’).ScrollTo(800, ‘easeout’); return false;
});
});
===========================================
呪文のようですが･･･
【a.pagetopをクリックした場合のスクロールの値】を
設定しています。
ここでは、’#top’ という ID タグにスクロールするようにしています。
また、スクロールの速さ(ミリ秒)を指定してます。速さは各自のお好みで。
‘easeout’ とすることで、滑らかなスクロールになるんだそうです。
（これも受け売りで
）
■MTのテンプレートにJavaScriptを読み込ませる指示を追加。
HTMLのヘッダ内（<head>?</head>）に記述するので、
MTのヘッダーモジュールに追加すればOK♪
===========================================
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/interface/ifxscrollto.js">
</script>
<script type="text/javascript" src="<$MTBlogURL$>js/jquery/jquery-effect.js"></script>
===========================================
<$MTBlogURL$>の部分はもちろん”http://www.●●.com/js/…”とURLを指定するのも良し。デス。
■ラスト！
そして、ページの先頭に戻るためのリンクを追加します。
<a class="pagetop" href="#top">ページの先頭に戻る</a>
ここまでやったらMTを再構築すれば・・・出来ました
せっかくほかのelementも手に入れたので、
時間があれば色々挑戦していきたいです。
とりあえずは今日はここまで
