WEBサイトを開くと、そのページの<title>タグがブラウザのタブに表示されます。このタブに表示されたタイトルをスクロールしながら動くようにする方法を紹介いたします。 動きについては以下デモページをご参照く…
ブラウザのタブに表示されるWEBページのタイトルをスクロールさせる方法
指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」
BgSwitcherは、スライドショーのように背景画像を切り替えることができるjQueryプラグインです。 画面いっぱいの背景画像をスライドさせるプラグインはよくありますが、BgSwitcherは背景のサイズに合わせてス…
レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」
画像の好きな位置にリンクを仕込むことができるクリッカブルマップ。非常に便利ではあるのですが、レスポンシブのように画像などがデバイスサイズに合わせて可変するサイトでは、マップの座標がずれてリンクの位置が変わってしまいます。…
フォームでスペースのみが入力された時に、jQueryを使って拒否する方法
名前や住所などを入力してもらうフォームにて、テキストボックスを必須項目に設定していてもスペースを1つだけ入れると、すり抜けてしまうケースがあります。 そんな時に便利な、スペースのみの入力を拒否する方法を紹介したいと思いま…
フォームに入力した郵便番号から住所を自動入力してくれるjQueryプラグイン「jquery.jpostal.js」
jquery.jpostal.jsは、フォームで入力した郵便番号から住所を自動的に取得してくれるjQueryプラグインです。フォームで住所を入力してもらう時に、郵便番号を入れるだけで住所欄に住所を自動入力してくれるので、…
簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」
Clingifyは、ヘッダーに固定されたスクロール追尾型のナビゲーションを実装することができるjQueryプラグインです。最近よく見かけますね。 デモは、以下のページで確認できます。下にスクロールしていくと、ヘッダー部分…
WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法
WordPressのブログ記事内に設置した画像を簡単にRetinaディスプレイ対応させる方法の紹介です。jQueryを使ってRetinaディスプレイの時だけ画像を差し換えるという方法で、これはStocker.jpさんが考…
クリックした時に指定したサイズのポップアップウインドウを開く方法
リンクをクリックした時に、指定したサイズの別ウインドウが開くようにする方法をご紹介いたします。JavaScriptを使いますが、知識も必要なく非常に簡単に実装することができます。 以下にデモを用意したので、動きについては…
ページ内に閉じるボタンを設置する方法
リンクを別ウインドウで開いた時などに、以下のような閉じるボタンをよく見かけると思います。 この閉じるボタンを設置する方法を紹介したいと思います。 ページ内に閉じるボタンを設置する方法 閉じるボタンを設置するのは非常に簡単…
超簡単！jQueryを使ってページ読み込み時にローディング画像を表示させる方法
サイトの読み込みに時間がかかると、その分離脱率が上がってしまいます。サイトを高速化するための施策を講じるのがベストではありますが、ローディング画像を表示して、少しでもページを読み込んでいることがわかるようにするというのも…