twitter facebook hatena google pocket ECサイトなどでよく使用されている画像の一部分を拡大表示する手法。 これを簡単に導入できるloupe | a jQuery image magnifierを紹介します。 sponsors 使用方法 loupe | a jQuery image magnifierからquery.loupe.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.loupe.js"></script> <script type="text/javascript"> $(document).ready(function(

ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum

余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:

ブラウザ上で様々なファイルを作ってダウンロードさせられる「Downloadify」。 Downloadyfy を使えば、JavaScript によって文字列を組立て、それをサーバサイドに保存することなく直接ダウンロードダイアログを出して利用者にダウンロードしてもらうことができます。 サーバに保存する必要がないので、サーバサイド言語が使えない環境であってもつかえてしまうのが特徴です。 例えば、この仕組みを利用したサイトの「starter」。 このサイト自体便利で、クラス名、ネームスペース、関数のパラメータなどを入力すると、jQueryプラグインのスケルトンコードを生成してくれるものなのですが、「DOWNLOAD」ボタンでその生成されたコードを直接ダウンロードすることができます。 「DOWNLOAD」ボタンを押すと、ファイル名が入った状態でダイアログが現れ「保存」ですぐダウンロードできます。

今年も ｊQuery ネタのエントリーは数多くありましたが、この2ヶ月はほんと次から次へといろいろと紹介されていました。HTML5・CSS3を組み合わせた実験的なものから、ナビゲーションメニューやギャラリーを始め、今すぐ使えそうな実用的なものまで様々。気になるものを片っ端からブックマークしておきます。 Making a Fresh Content Accordion Beautiful Slide Out Navigation: A CSS and jQuery Tutorial jQuery Masonry 25 Incredible jQuery Slider Tutorials and Plugins TextboxList jQueryのプラグイン33+1選 -2009年12月：コリス 20 Professional jQuery Image Gallery Plugi

ページ内に雪を降らせられるjQueryプラグイン「jSnow」。 好きな文字をページ内に雪を降らせたような感じで浮遊させることができます。 デモページを見てみましょう 使い方は簡単で、flakeCode に配列を指定すると文字が指定でき、flakeColor 指定で色を指定できます。 $().jSnow({flakes:30,flakeCode:["&spades;","&clubs;"],flakeColor:["#f00","#00f"]}); ちょっとしたドッキリエフェクトとして覚えておくと使えるかもしれませんね。 以下のエントリを参照してください。 jSnow, a jQuery plugin for creating falling snow effect on your website | DuMmWiaM.com

SEO対策において内部対策と外部対策どちらも重要なのですが、上位表示難易度が高いキーワードの場合には、圧倒的に外部SEO（被リンク対策）が必要となります。 外部SEOの重要性 内部SEOの重要性を説くSEO関係者が増えていますが、それは以前から言われている事であって、特に最近になって検索エンジンが内部評価の基準を変えたという事ではないと思います。 どんなリンクでも一定の評価が与えられていた頃は、保有している大量のサイトからリンクを張れば、かなりの確率で順位が上がっていたのですが、それが難しくなってきたために、有料リンクを売っていた業者が方向変換しただけのような気もします。 評価される被リンクとは 一口に外部SEOと言っても、被リンクには色々な形態があります。アンカーテキストにキーワードが含まれているというだけでは質の良いリンクとは言えません。 今回は、どういったリンクがSEOに効果的なのか

最近は特にECサイトなど、画像を豊富に掲載して、見ていて楽しい魅力的なサイトが増えてきています。 しかしサイトの魅力を増す画像も、使い方を誤るとユーザをミスリードしてしまうことがあります。 今回は画像活用時の注意点をご紹介します。 ユーザはウェブサイトを閲覧する際、目につくものを拾い読みする傾向が強く、特に注目されやすいのが「写真」と「見出しのキーワード」です。 そのため、アイキャッチ画像とキーワードをあわせて配置するレイアウトは、一般的に非常に効果的です。 しかし、画像の与えるイメージは非常に具体的であるため、ユーザは画像の印象に強く引きづられてしまいます。 実際に弊社の調査で、照明やインテリアを探していたユーザが下図右のレイアウトを見て、読み飛ばしてしまうケースがありました。 上のケースの場合、単純に画像を削除してリンクを目立たせることでも、十分にユーザの誤解を避けることが可能でした。