画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
Firefoxの自動更新を止める方法
Firefoxの自動更新を止める方法を紹介します。 セキュリティアップデートがあるため、Firefoxの自動更新を止めるのは基本的に推奨するものではありませんが、一昨日エントリーした「Firefox16でMovable Typeのカテゴリ・フォルダ選択ができない不具合について」などのような問題がある場合、一時的に自動更新を止めたいケースもあると思います。 １．Firefoxの自動更新を止める Firefoxの自動更新を止めるには、メニューバーの「ツール」→「オプション」をクリック。 「詳細」タブをクリックし、表示された画面からさらに「更新」タブをクリックして、「Firefoxの更新」にある「更新の確認は行うが、インストールするかどうかを選択する」を選択して、「OK」をクリック。 「更新の確認は行わない」という選択肢もありますが、セキュリティ上非推奨となっているので、このエントリーでも非推奨
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」
WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」を紹介します。 最近ベータ版がリリースされた「Recommendations Bar」もさくっと表示できました（下のスクリーンショットは空記事のブログで試したものなので何も表示されてなくて正常です）。 １．機能 このプラグインを利用すれば、WoprdPressにソーシャルプラグインを簡単に表示できるようになります。 具体的には次のものが設定できるようです（バージョンは1.0.2）。 Social Publisher（タイムラインやFacebookページへの投稿） Like Button Subscribe Button Send Button Comments Recommendations Bar 以下、設定方法です。 ２．インストール WordPress管理画面
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
FacebookのIFrameタブページでスクロールバーを消す方法
FacebookのIFrameタブページに表示されるスクロールバーを消す方法のまとめです。 １．スクロールバーが発生するケース スクロールバーは、コンテンツサイズが高さ800px・幅520pxを超えると自動的に表示されるようです（CSSでbodyセレクタにmargin:0; padding:0;を指定した場合）。 下のスクリーンショットは、サイズをちょっと超えた、青枠だけの画像を表示したものです。 IFrameタブページにスクロールバーが表示された状態 「高さ800px・幅520px」という値はブラウザ依存なので、大体の目安と理解しておくと良いでしょう。 参考までに、ブラウザ別のスクロールバーが表示されなかった最大サイズを掲載しておきます。計測は、コンテンツにimg要素を与え、width属性とheight属性を指定した方法で行っています。すべてOSはWindows VISTAです。 Goo
JavaScriptでデータをダンプする「jQuery Dumpプラグイン」
PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。 jQuery Dump １．サンプル jQuery Dumpを使ってデータをダンプするには次のように設定します（青色部分）。 <pre id="dump"></pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.dump.js"></script> <script type="text/javascript"> $(function(){ var obj = { hubba: "Some string...", bubba: 12.5, dubba: ["One"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
