Luminousは、画像をクリックするとふわっと拡大してくれるLightbox系のJavaScriptスクリプトです。jQueryに依存せず単体で動作します。 Luminousの使い方 Luminousの使い方は、WEM…
クリックするとふわっと拡大！jQuery不要のLightbox系スクリプト「Luminous」の使い方
クリック/タップする度にJavaScriptでクラスを追加・削除させる方法
素のJavaScript(Vanilla JS)を使って、クリック/タップする度にクラスを追加・削除させる方法をご紹介いたします。 要素にクラスを追加・削除することで、表示・非表示を切り替えたり見た目を変えたりと、色んな…
背景画像も遅延読み込み可能なLazyload系ライブラリ「lazysizes」
lazysizesは、画像を遅延読み込みすることができるLazyload系のJavaScriptライブラリです。通常の画像だけでなく背景画像も遅延読み込み可能です。また、jQuery非依存で単体で動作します。 挙動につい…
画像を遅延読み込みできるJavaScriptライブラリ「echo.js」の使い方
echo.jsは、画像を遅延読み込みさせて、表示速度の向上に貢献するJavaScriptライブラリです。 echo.jsは単体で動作するため、jQueryなどに依存しません。Lazy Load系のライブラリはjQuery…
高さの異なる要素もグリッド型で綺麗に配置することができるJavaScriptライブラリ「Magic Grid」
Magic Gridは、高さの異なる要素も詰め込んでグリッド型で配置することができるJavaScriptのライブラリです。レスポンシブにも対応しており、ブラウザの幅に合わせて最適な配置に切り替わります。 デモは以下でご確…
クリック/タップでふわりと画像を拡大表示できるスクリプト「Lightbox」
Lightboxは、クリックするとふわりと画像を拡大表示することができるJavaScriptのライブラリです。jQuery非依存で単体で動作します。 挙動については、以下デモページをご参照ください。 デモページを見る L…
ページ内リンクのスムーススクロールをjQueryなしで実装する方法
ページ内リンクをクリックした時に滑らかに移動させるスムーススクロールは、jQueryを使えば簡単に実装できますが、jQueryに依存したくない場合もあるかと思います。 jQueryを使わずに素のJavaScriptでスム…
憎きIEを撲滅！Internet Explorerからアクセスすると警告文を表示してブロックするスクリプト「IE Buster」
IE Busterは、Internet Explorer(IE)でアクセスした際に、Google Chromeのインストールを促すメッセージを表示してアクセスをブロックするスクリプトです。 以下デモページにIEでアクセス…
下にスクロールすると消えて、上にスクロールすると表示される固定ヘッダーをjQueryを使わずに実装する方法
下にスクロールすると消えて、上にスクロールすると現れる固定ヘッダーを実装する方法をご紹介いたします。jQueryは使わずに素のJavaScriptで実装する方法です。 挙動については、以下デモページをご参照ください。 デ…
Gutenbergの不要なブロックを削除し必要なブロックのみを表示させる方法
WordPressの新しい投稿エディタ「Gutenberg(ブロックエディタ)」では様々なブロックが用意されていますが、ブロックの数が多すぎて混乱してしまうこともあるみたいです。ブロックの数が多いのは便利である一方、Gu…