タグ

ブックマーク / kachibito.net (10)

  • http://で始まるテキストをjQueryで自動リンク化

    $("#autlink").each(function(){ //http、httpsなどで始まる文字列を正規表現でリンクに置換する $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') ); });html<p id="autlink">かちびと.netのアドレスは http://kachibito.net/ です</p>viahttp://で始まる文字を自動リンクしよう

    http://で始まるテキストをjQueryで自動リンク化
  • スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar

    題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 こんな感じでデザインを変えられます。せっかく統一性をうまく出したのに仕様上スクロールバーが出てしまって一体感を損なう悲しみと絶望感はWebデザイナーさんなら経験したことがあるのではないでしょうか?え、無いの・・じゃあいらないかn Sampleまぁせっかくなので見てください。 当サイトの右上のギアアイコンを使いました。このアイコンをクリックすると回転するんですがこれはcss3のkeyframeとanimateでうごかs、あ、どうでもいいですよね。 IE6/7 IEでも

    スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar
  • 配布したWP管理画面マニュアルをプラグイン化して管理画面で確認出来るようにしてみた

    先週にWordPress2.9の管理画面 の操作マニュアル(Webに疎い お客様に渡す用)を配布しましたが、 直接管理画面で見れたほうがいいかも と思って簡単なプラグインを作成しました。 良かったらご利用下さい。 詳しくは以下より。 操作マニュアルを管理画面で直接確認出来る ↑ 上記のようにWebサイトを納品した先のお客様側で管理画面内でマニュアルを確認出来るので、紙に印刷して渡したり、PDFで渡す事でお客様がいちいち開く必要が無いようになります。 必要なくなればプラグインを削除、という感じで。テーマ→functions.phpからでも可能ですが、プラグインの方が削除も楽なのでこっちを選択。 ↑ 上記のようにPDFが大きく表示されます。単純にPDFを読み込んでるだけです。モニターの関係上、見にくい場合は別窓で開けるようにリンク付けてあります。 宜しければ編集して下さい作成はしましたが、管理

    配布したWP管理画面マニュアルをプラグイン化して管理画面で確認出来るようにしてみた
  • jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ

    jQuery Mobileに関して少し整理したいので まとめました。JQMを使うときに知っておくと 便利そうなTipsとか情報とか。いくつか自分 の記事も含まれているのが若干アレなんです が、ご了承ください。内容はコードのみ、では なく、参考サイトなど一貫性無い感じですが。 整理するのが下手なもので一貫性に欠ける内容で申し訳ないですけど、jQuery Mibileを使ったWebサイト構築時のちょっとしたTipsや役に立つ情報などのまとめです。 ページ移動にAjaxを使わないようにするプラグインの前に記述。リンク単位でならマークアップでrel=”external”を、フォームはdata-ajax=”false”を加える。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/

    jQuery Mobileを使う際に知っておくと役立ちそうなTipsや情報のまとめ
  • tumblrで画像収集するのに向いてそうな、無料のテーマ・51個まとめ(と、少しだけ特徴をメモ

    tumblrで画像収集するのは割と当たり前 ですが、後で見返すときに見にくいテーマ だと見る気がしないのでいろいろ試して いましたが、せっかく試したのでついでに 画像収集に向いてそうなtumblrのフリー のテーマをご紹介します。 というか変えたい時に探してるんですけど、いちいち面倒なのでメモしたいんですが、せっかくなのでここにリンク集作ってシェアしようかなと思った次第です。 簡単ではありますが、特徴をメモ書きしています。Lightboxが付いてるとか、自動で次のページを読み込むとかリキッドレイアウトとか。 全てをちゃんと確認したわけではないので、参考程度に。順不同、全部で51個ありました。 キャプチャはテスト用で作ったものです全部無料です環境次第でカラム数が変わるものもあります長くなってしまって見る気がしないので1カラムは省いています。Themanati 3カラムのリキッドレイアウトでギ

    tumblrで画像収集するのに向いてそうな、無料のテーマ・51個まとめ(と、少しだけ特徴をメモ
  • 少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

    列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。 jQuery( function($) { $('tbody tr[data-href]').addClass('clickable').click( function() { window.location = $(this).attr('data-href'); }).find('a').hover( function() { $(this).parents('tr').unbind('click'); }, function() { $(this).parents('tr').click( function() { window.location = $(this).attr('data-href'); }); });

    少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする
  • スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ

    以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日語サンプル作った Demo 前回はほぼ全てのデモを

    スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
  • 携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net

    Tips携帯サイト構築 どうもTwitterやってるとiPhoneAndroidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneAndroidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト(html)の制作に入る前に確認してお

    携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
  • cssのちょっと小粋なテクニック13個

    小粋の定義は分かりませんが、ちょっと「おっ」と思えるcssのテクニックをいろいろと。以前、記事にさせていただいた、cssとHTMLのみで3D効果を実現したテクニックで他にも無いかなと思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かのヒントになるかも・・と思い、cssplayでちょっと探してみましたのでいくつかのcssを使った良アイデアや高度なテクニックなど。 ざっとしか見ていませんが、多分jsは使ってないと思います。 Film strip gallery with information text ネガポジ加工された画像にフィルムのような枠をつけてマウスオーバーで写真を表示するギャラリー。 Film strip gallery with information text Super animationjust for the fu

    cssのちょっと小粋なテクニック13個
    miruto
    miruto 2009/12/24
  • コンテンツにエフェクトを掛けるjQueryプラグイン10個

    個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an

    コンテンツにエフェクトを掛けるjQueryプラグイン10個
  • 1