buena suerte!


Smart Columns w/ CSS & jQuery を MooTools で。

リキッドレイアウトなんかの時、自動でカラム数やカラム幅を調節してくれるなんだか便利そうな jQuery プラグインがあったので MooTools で試しにやってみた。

参考記事

基本的に MooTools 用のコードに変換しただけで、参考記事からまんまパクってます。タダ乗りですいません。元のコードも短いし、 MooTools を少し理解して使ってる人なら誰でもできそう。

動作確認

Browser
Firefox 3.0.11, Opera 9.64, Chrome 2.0.172.31, Safari 4.0(530.17), IE5.5(IETester), IE6(IETester), IE7, IE8(IETester)

デモサイト/Demo Site

smart columns

必要なもの/Necessary

今回は Core ライブラリだけでいけるんで Google Ajax Libraries API を使ってもおk。バージョンは1.2.2と1.2.1でいけました。さらに容量を減らしたい場合は、 Core Builder で以下をチェックしてダウンロード。

  • Core: Core, Browser
  • Native: Array, Function, Number, String, Hash, Event
  • Element: Element, Element.Event, Element.Style, Element.Dimensions
  • Utilities: Selectors, DomReady

あ、上記のデモでは無駄に Fx.Tween も使ってます。

Read more...


MooTools で Twitter のメッセージを表示させるサンプル。

今回は MooTools を使って Twitter の JSON 形式のデータを受け取り、メッセージを表示させる方法を、簡単に紹介します。

動作確認

OS
Windows XP
Browser
Firefox 3.0.10, Opera 9.64, Chrome 1.0.154.65, Safari 4 Public Bata(528.16), IE6(IETester), IE7, IE8(IETester)

デモサイト/DEMO Site

仕様を余り把握してないんでよくわかりませんが、 API に実行回数制限があるらしく、短い期間に何度も実行してると、そのうち表示されなくなります。時間が経てばまた使えます。

必要なもの/Necessary

Core ライブラリの読み込みは Google Ajax Libraries API を使う手も。

Read more...


以前の雰囲気を残しつつ、約2年半ぶりにリニューアルしました。

いままでのデザインの雰囲気は残して、ちょっとばかしリニューアルしました。ちょっとと言っても、全体のデザイン考えたり、素材作ったり、ライブラリの整理等々、なんかやればやるほどドンドンやる事が増えていって、すごい時間がかかってしまいました。大体合計で1ヶ月くらいかな。

とりあえず変更点やメモなど書き出してみました。

以前と同じところなど。

横幅が 960px 固定な点やリンクの色など基本的には以前のものと同じになっています。トップページ下にあるナビゲーションもそのままつけたままです。また、一番上の livedoor Blog のヘッダは、表示義務があるのできちんと表示させました。今まですいません。

favicon を変更。

リニューアルにあわせて、さらにシンプルなものに変更しました。今回も @icon変換 というフリーソフトを使いました。
favicon

文字を大きく、1カラム化させました。

ずっと2カラムデザインで通してきましたが、読みやすくするため、文字を大きくし、1カラムデザインに変更しました。ただ、個別記事のページだけ、右サイドにポストデータを載せています。今までサイドバーに表示していた、テンプレート等へのリンクは、記事表示部分より下にまとめて移動させてます。

Read more...