webDesignの最近のブログ記事

雪の結晶フォント

| | コメント(0) | トラックバック(0)

デザインで背景に雪の結晶でも薄く入れようと思い、Googleでイメージ検索をしたところ、雪の結晶dingbatを発見!
http://www.katsfunfonts.com/

ダウンロードは、Page63に掲載されている「KR Kinda Flakey」というリンクから。

この時期、デザインにさりげなく使ってやると雰囲気が増してよいのではないでしょうか。

krkindaflakey.jpg

Welcome to DingbatDepot.com : DingbatDepot.com is the largest source of free dingbat fonts on the internet today. All dingbat fonts on this site are free (shareware or freeware) and available for immediate download. To start downloading the free dingbat fonts, select one of the links from the left hand navigation panel: either Alphabetically or by Category.

この記事のQuotetreeをみる

free dingbat fonts

この記事が引用された数 - with GroveLog

ちなみに、DingbatDepot.comというサイトも発見!

実際使えるかっていうと、微妙なものも多いとは思うけれど、眺めているだけでもにぎやかで楽しいです。


Ci071127180805.jpg
jump to pagetop
  • Quote!(引用する!)
  • このエントリーを含むはてなブックマーク
  • Digg!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • この記事をクリップ!

jQueryでLightBox

| | コメント(0) | トラックバック(0)

写真をモーダルエフェクトで、スライドショー表示する これはprototype.js用の、Lightbox.jsを使っていた。これと、全く同じ動きをしてくれるjQuery のプラグインがありました。 jQuery lightBox plugin 利用方法は簡単。ライブラリをサーバーにアップして、内で読み込む。そして、lightbox 表示するHTMLオブジェクト(タグを囲んでいるタグ)を、jQueryセレクタで選択する。 $('a[@rel*=lightbox]').lightBox(); と記述すると、prototype.js 用のlightbox.js で指定する方法と同じになるので、今までのブログ記事を修正しなくても、そのままjQueryプラグインでスライドショー表示できます。これは便利。

この記事のQuotetreeをみる

ブログで使っているprototype.js を jQuery へ移行(スライドショー, ハイライトなど):Goodpic

この記事が引用された数 - with GroveLog

これまでThickBoxを使っていたけれど、こっちの方が、エフェクトがかっこいいなぁ。

いま、某バイクメーカーの新商品関連のフォトギャラリーサイトを作成していて、やはり、ThickBoxを使って構築したのだけれど、いまから変更したい気持ちが。。とはいえ、なにしろアップ直前だからなぁ。

このブログでも近々Flickrの写真を見せたいと思っているので、その際はこっちを使ってみます。

jQuery lightBox plugin

jump to pagetop
  • Quote!(引用する!)
  • このエントリーを含むはてなブックマーク
  • Digg!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • この記事をクリップ!

IE向けデバッグツール「DebugBar 」

| | コメント(0) | トラックバック(0)

DebugBarは、IE5以上に対応したウェブアプリケーションのデバッグツール。IE内でツールバーやサイドバーとして表示され、JavaScriptエラーやDOMツリー、HTMLソースコード、HTTPヘッダなどの表示、ページ内での任意のJavaScriptコードの実行、表示中のページに関するさまざまな情報の取得などが行える。

この記事のQuotetreeをみる

IE向けデバッグツール「DebugBar 5.0 beta 1」リリース:ニュース - ZDNet Japan

この記事が引用された数 - with GroveLog

使えます。

これまで、FirefoxでのデバッグはFireBugのおかげで快適なんだけれど、困っていたのはIEでのデバッグ。
IEではjavascriptエラーが出た場合、アラートは出るが内容はほとんど意味なし。非常に面倒で、FireBugみたいなツールがないものかと以前から思っていたけれど、真剣に探すことなく、なんとなくすごしていたところ、このニュース。 ブログのネタにも良いと思い、ダウンロード and インストール。

機能としては、FireBugとくらべても遜色ないのではないでしょうか。
DOMのTreeも展開できるし、表示画面をなぞりながらオブジェクトの選択も可能だし、関連するcss、htmlソースなんかも参照できて、なにより、javascriptのエラーは行数とエラーメッセージがちゃんとでる。

これで、IEでのデバッグ効率も格段にアップすること間違いなし。重宝しそうです。

debugbar.gif
jump to pagetop
  • Quote!(引用する!)
  • このエントリーを含むはてなブックマーク
  • Digg!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • この記事をクリップ!

GroveLogのfeedを表示するブログパーツ

| | コメント(0) | トラックバック(0)

GroveLogでは、最新のQuoteをXMLでfeedしています。これを読み込んで、ブログのサイドバーにその内容を表示してやろうという、よくあるブログパーツです。

実現するにあたって考慮しないといけないのは、javaScriptのクロスドメインの問題と、XMLのパースの問題。
クロスドメインの対応は今回は、当ブログのサーバ上にプロキシCGIを設置しました。(一応、レスポンスを返すドメインを制限する機能くらいはあります。)
XMLのパースにあたってはこれを使わせてもらいました。

JKL.ParseXML クラスは、サーバ上の XML 形式ファイルをダウンロード~解析して、 JavaScript オブジェクト(配列やマップ)に変換するライブラリです。 複雑な DOM 操作なく簡単なスクリプトで XML 形式ファイルを扱えるため、 Amazon など XML を出力する既存の Web サービスや、 CGI と連携することで ajax ページを手軽に構築できます。 IE・Firefox・Opera・Safari のクロスブラウザに対応しています。 XML を JSONのように手軽に扱える他、 JSON/CSV/LoadVars 形式ファイルなどのテキストファイルも利用可能です。

この記事のQuotetreeをみる

[ajax] JKL.ParseXML/ajax通信処理ライブラリ

この記事が引用された数 - with GroveLog

ループ処理で最新の10件分だけ抽出するようにしています。
とりあえずなので、汎用的ではないです。
時期バージョンではJSONを利用してプロキシCGIなしで、どこでも設置可能なブログパーツに改良するつもりです。(ローディングのアニメーションくらいあったほうが親切かな)

jump to pagetop
  • Quote!(引用する!)
  • このエントリーを含むはてなブックマーク
  • Digg!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • この記事をクリップ!

HTMLブロック要素の高さを揃えたい

| | コメント(0) | トラックバック(0)

このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。

この記事のQuotetreeをみる

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

この記事が引用された数 - with GroveLog

以前、角丸ライブラリかなにかで、角取りつつ高さも揃える・・みたいなのがあったような気がしたのだけれど、覚えておらず。
改めてGoogleしてみたところ、よさそうなのを発見。
ただ、個人的にはjQueryを利用しているので、jQuery版みたいのがあれば、そっちの方がすっきりするかなと思い、「jQuery 高さ揃え」で、再度Google。すると、今度はこれを発見。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。

この記事のQuotetreeをみる

jQueryでブロック要素の高さを揃えてみる - 徒書

この記事が引用された数 - with GroveLog

今回はこっちを使うことに。
問題なくうまく行きました。一点、jqcorner.jsも併用しているのだけれど、先に.flatHeights()で高さを揃えてから、.corner("5px")としないと変なところで角丸されてしまいます。

角丸とか、高さを揃えるとか、昨今のウェブデザインではよく使う手法だけれど、普通にやろうとすると、余計なdivが増えたり、cssを多くかかないといけなかったり、どんどん複雑になる傾向があります。こうった便利なjsを使うとソースも綺麗に保てるし、なにより、ずっと楽になります。重宝します。

jump to pagetop
  • Quote!(引用する!)
  • このエントリーを含むはてなブックマーク
  • Digg!
  • BuzzurlにブックマークBuzzurlにブックマーク
  • この記事をクリップ!

AD

Macをはじめよう。Apple Store(Japan) Apple Store(Japan)

ページの先頭へ