Clingifyは、ヘッダーに固定されたスクロール追尾型のナビゲーションを実装することができるjQueryプラグインです。最近よく見かけますね。 デモは、以下のページで確認できます。下にスクロールしていくと、ヘッダー部分…
簡単にヘッダー固定の追尾型ナビゲーションを実装できるjQueryプラグイン「Clingify」
WordPressの記事内に設置している画像をRetinaディスプレイに対応させる方法
WordPressのブログ記事内に設置した画像を簡単にRetinaディスプレイ対応させる方法の紹介です。jQueryを使ってRetinaディスプレイの時だけ画像を差し換えるという方法で、これはStocker.jpさんが考…
クリックした時に指定したサイズのポップアップウインドウを開く方法
リンクをクリックした時に、指定したサイズの別ウインドウが開くようにする方法をご紹介いたします。JavaScriptを使いますが、知識も必要なく非常に簡単に実装することができます。 以下にデモを用意したので、動きについては…
ページ内に閉じるボタンを設置する方法
リンクを別ウインドウで開いた時などに、以下のような閉じるボタンをよく見かけると思います。 この閉じるボタンを設置する方法を紹介したいと思います。 ページ内に閉じるボタンを設置する方法 閉じるボタンを設置するのは非常に簡単…
超簡単！jQueryを使ってページ読み込み時にローディング画像を表示させる方法
サイトの読み込みに時間がかかると、その分離脱率が上がってしまいます。サイトを高速化するための施策を講じるのがベストではありますが、ローディング画像を表示して、少しでもページを読み込んでいることがわかるようにするというのも…
ページ読み込み時にプログレスバーを表示させることができる「PACE.js」
PACE.jsは、ページのロード中にプログレスバーを表示することができるJavaScriptです。ダウンロードしたJavaScriptとCSSを設置するだけで、簡単に実装することができます。 以下よりデモを確認することが…
円形のメニューを作成できるジェネレーター「Pie Menu Generator」
Pie Menu Generatorは、一風変わった円形のナビゲーションメニューを作成することができるジェネレーターです。各種設定を選択していくと、HTML/CSS/JavaScriptを生成してくれます。 Pie Me…
jQueryを使ってタブ切り替えメニューを実装する方法
jQueryでタブ切り替え型のメニューを作成する方法を紹介いたします。 簡単なデモページを作成しましたので、動きについては以下をご参照ください。 デモページを見る タブの中には、画像やリンク、テーブルなどを入れることが可…
Pinterest風のタイルデザインを簡単に実装できるjQueryプラグイン「Masonry」
Masonryは、Pinterest風のタイルデザインを簡単に実装することができるjQueryプラグインです。 Pinterest風のデザインって何よ？って方は、以下のデモページをご参照ください。 デモページを見る Ma…
スマホ用のドロップダウンメニューが簡単に実装できるjQueryプラグイン「SlickNav」
SlickNavは、スマホでよく見かけるドロップダウン形式のメニューを簡単に実装することができるjQueryプラグインです。 簡単なデモページを用意したので、動きについてはデモでご確認ください。 デモページを見る 今回は…