FLBTLOGFLBTLOG解説Recent Entry編
February 27, 2008 | Web Programming | Post by Hiroyuki Morimoto
珍しく2日（正確には本日）続けての連投。
いや、ブログなんだからお前もっと書けよ？って感じなんだけどね！
前置きは、これぐらいにしてRecent Etnry部分の表示方法についての解説です。
(結局書き始めたのは結構前だけど、まとめてたら遅くなりましたorz）
Recent Entryの表示部分について
当ブログではRecent Entryのリストは
<MTEntries last="10">
<ul id="Rent">
<li><a href="<$MTEntryPermalink$>"><$MTentryTitle$></a></li>
</ul>
</MTEntries>
と記述しています。
これで10件分の一覧が表示されるようになりました。
次にマウスカーソルをhover時の動作ですが
こちらは<a href="http://mootools.net/">mootools</a>(Ajaxライブラリ）を使用しています。
まずはmootoolsのサイトにいってライブラリをDL後サーバへUP
その後、ヘッダーに以下を記述
<script type="text/javascript" src="<$MTBlogURL$>UPしたディレクトリ名/mootools1.11.js"></script>
ひとまずここで終了。
次にテキストエディタを開き以下を記述
window.addEvent('domready', function() {
var list = $$('ul#Rent li a');
list.each(function(element) {
var fx = new Fx.Styles(element, {duration:480, wait:false});
//マウスカーソルhover時
element.addEvent('mouseenter', function(e){
fx.start({
'padding-left': 5,
'background-color': '#9c683c',
'color': '#EAE9D5'
});
});
//マウスカーソルを離した時
element.addEvent('mouseleave', function(e){
fx.start({
'padding-left': 0,
'background-color': '#f5f3ed',
'color': '#8d6a4e'
});
});
});
});
fx.start以降の中を見ればわかるとは思うけど単にCSSを書いて、それをDOM上で展開（言い方おかしいかも）してるだけです。
なので、書き方によっては他の見せ方ももちろんできます。
モーションの速度はduration:480となってる部分を調整すればOK
これを新規保存で適当にhoge.jsとかで保存。
サーバーにUPロードし、ヘッダー部分にこのファイルを読むように記述をする。
<script type="text/javascript" src="<$MTBlogURL$>UPしたディレクトリ名/hoge.js"></script>
以上で終わりです。とまぁ全くもってたいした事はやってないのだけど
なんだか、かっこよくみえるね！？という、DHTMLって奴ですネ。
mootoolsは非常に強力で便利なライブラリですので、中の人考えたかた次第で
簡単に色々できるるので、重宝してます。
ただこの手の物は使いすぎるとうざくなりがちなので要注意ですネ。
アクセント程度で使うのが吉
- SBM:
Trackback URL for Entry
http://blog.flatbit.co.jp/btlog/mt-tb.cgi/99
Post Your Comment
Tools
Music
 |
 |
 |
 |
 |
 |
Conmpany&Service
Comments
有益な情報ありがとうございました！
うざくならない程度に組み込んでいきたいと思います（笑）
これからもブログ見に来ますんで宜しくお願いします！
お役にたてたなら幸いです。
こちらこそ、今後ともよろしくですよー。
もし不明な点があればコメントしてくれればできる範囲で解説しますので。
あれから実装しようと試みたのですが、失敗に終わりました。。。
mootoolsではどれを取ってくればいいのか分からないので、全てチェックを入れてダウンロードしてきました。
落としてきた拡張子がtxtになっていたので、「.txt」を消して「js」ファイルにしました。
そこでアップロードさせました。
上記ソースを新規で作成し、jsとして保存し、アップロードしました。
最新記事のIDも自分のIDに合わせてやってみたのですがうまくいきません。。。
考えられる間違いはありますでしょうか？
大変忙しい中、失礼します。
実際の状態を見たわけではないので、はっきりした事はわかないですが、
とりあえず、mootoolsで必要なコンポーネントを記載しておきますね。
Core,Class,Class.Extras,Array,String,Function,Number,Element,
Element.Event.js,Element.Filters,Element.Selectors,
Window.DomReady,Window.Size,Fx.Base,Fx.CSS,Fx.Style,Fx.Styles
以上のコンポーネントにチェックをいれhttp://mootools.net/downloadからDL
ページ最下部にあるChoose compression typeは圧縮形式なのでYUIかJsMinのお好きなほうで。このブログは確かJsMinだったと思います。
後、解説にある#マウスカーソルを離した時等は説明のためつけただけですので
もし記載されているなら、そこを消しておいてください。
実装できました！
原因は説明の所を消してなかった為です。
全然理解してなかったので、「＃をつければコメント文になるんだなぁ」と思っていました（汗）
本当に親切に説明して頂きありがとうございます！
無事実装できたみたいで、おめでとうございます。
あぁなるほど、ややこしくてすいません。
コメントアウトするときは//をした部分がコメントとなります。
そんなわけで、本文自体を修正しておきました。