jQueryでモーダルウインドウを実装する方法をご紹介いたします。モーダルウインドウとは、クリックすると画面の前面に出てくる要素のことです。 ものすごく簡単なデモも用意したので、挙動についてはデモページをご参照ください。…
クリックすると前面に現れるモーダルウインドウを実装する方法

HTMLやPHPのコードを登録して投稿や固定ページ内で呼び出すことができるWordPressプラグイン「Post Snippets」

Post Snippetsは、HTMLやPHPのコードを登録しておいて、投稿や固定ページで簡単に呼び出すことができるWordPressプラグインです。 よく使うパターンを登録しておくと、投稿や固定ページの作成が捗ります。…
プラグインなしでWordPressサイトの人気記事一覧を表示する方法

色んなブログを見ていると、よく人気記事の一覧がサイドバーなどに表示されていることがあります。WordPress Popular Postsなどのプラグインを使えば簡単に実装することができますが、今回はプラグインなしで人気…
スクロール時にパララックス効果を加えられる軽量スクリプト「ScrollReveal」

ScrollRevealは、要素が可視範囲に入った時に、アニメーションさせながら要素を表示させることができるスクリプトです。jQueryや他のCSSに依存せず、ScrollReveal単体で動作します。また、サイズも軽量…
水面が波打っているようなアニメーションを実装できるjQueryプラグイン「Raindrops」

Raindropsは、横から見た水面が波打っているようなアニメーションを実装することができるjQueryプラグインです。 デモは以下ページにてご覧いただけます。 デモページを見る Raindropsの使い方 ステップ1.…
アニメーションする幾何学的な模様の背景を実装できるjQueryプラグイン「Particleground」

Particlegroundは、アニメーションする幾何学的な模様の背景を実装できるjQueryプラグインです。 デモは以下ページにてご確認いただけます。 デモページを見る Particlegroundの使い方 ステップ1…
要素にアニメーションエフェクトを加えることができるCSSライブラリ「Motion CSS」

Motion CSSは、要素にCSSアニメーションによる動きを加えることができるCSSライブラリです。 CSSファイルを読み込んでクラスを追加するだけで、アニメーションエフェクトを加えることができます。 Motion C…
jQueryを使ってマウスホバーでドロップダウンするメニューを実装する方法

jQueryを使ってドロップダウンメニューを実装する方法をご紹介いたします。 ドロップダウンメニューは、マウスホバーすると子メニューが出てくる、よく見かけるナビゲーションですね。 jQueryによるドロップダウンメニュー…
広告を記事の上下や中央などに埋め込むことができるWordPressプラグイン「Quick Adsense」

Quick Adsenseは、広告を記事内の任意の箇所に埋め込むことができるWordPressプラグインです。名前の通り、Googleアドセンスの広告を設置することを前提としているプラグインですが、アドセンス以外の広告で…
外部ドメインも可!複数のWordPressサイトを一元管理できるプラグイン「MainWP」

MainWPは、複数のWordPressサイトを一元管理することができるプラグインです。別のドメイン間でも一元管理が可能です。 MainWPを導入することで、以下のようなことができるようになります。 管理しているWord…