縦長のページでページ内リンクのナビゲーションを設置している場合に、スクロール位置によって現在位置をカレント表示させる方法をご紹介いたします。 言葉にするといまいちわかりにくいですが、以下に簡単なデモを用意しましたので、ご…
ページ内リンクのナビゲーションをスクロール位置によってカレント表示させる方法
ほぼコピペでOK！PHPとjQueryを使って外部サイトのRSSフィードを取得・表示する方法
PHPとjQueryを使って、外部サイトのRSSフィードを取得・表示する方法をご紹介いたします。RSSフィードのURL以外は、コピペで実装することができます。 PHPとjQueryを使って外部サイトのRSSフィードを取得…
別ページからのアクセスでもjQueryを使ってスムーススクロールさせる方法
ページ内リンクをスムーススクロールさせる方法については、以前「jQueryを使ってページ内リンクをスムーススクロールさせる方法」という記事でご紹介いたしました。 こちらの記事では、同じページ内のアンカーリンクをスムースス…
固定ヘッダーを実装している際にアンカーリンクの移動位置がずれるのを解消する方法
ヘッダー部分を「position:fixed;」で固定してスクロールに追尾させていると、アンカーリンク(ページ内リンク)への移動時に、固定したヘッダー部分の高さ分、移動先の位置がずれてしまいます。 正確には、位置がずれる…
jQueryでブラウザの横幅やデバイスの種類で条件分岐させる方法
jQueryで、ブラウザの横幅やデバイスの種類で条件を指定する方法をご紹介いたします。 スマホのみに適用したい処理がある場合などに活用できますので、結構利用シーンは多いかと思います。 jQueryでブラウザの横幅やデバイ…
jQueryで開いているページのナビゲーションにクラスを追加してカレント表示させる方法
グローバルナビゲーションで開いているページを示す、いわゆるカレント表示をするために、jQueryを使ってクラスを追加する方法をご紹介いたします。 WordPressの場合は、開いているページのナビゲーションには、.cur…
簡単にサムネイル付きのスライダーを設置できるjQueryプラグイン「Fotorama」
Fotoramaは、シンプルで導入が容易なスライダープラグインです。サムネイル付きのスライダーが簡単に設置できます。もちろんサムネイルなしも可能です。 挙動については、以下デモページをご確認いただければと思います。 デモ…
WordPressの投稿一覧に無限スクロールを実装する方法
WordPressの投稿一覧ページに、jQueryプラグイン「Infinite Scroll」を使って無限スクロールを実装する方法をご紹介いたします。 無限スクロールというのは、スクロールしていくと次々に要素が読み込まれ…
横からスライドして表示されるメニューを実装できるjQueryプラグイン「Drawer」
Drawerは、横からスライドして表示されるメニューを実装することができるjQueryプラグインです。 デモは以下ページでご確認いただけます。 デモページを見る Drawerの使い方 ステップ1. 必要なファイルの読み込…
背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグイン「jQuery Ripples」
jQuery Ripplesは、背景画像に水の波紋が広がるような動きを加えることができるjQueryプラグインです。 挙動については、以下デモページにてご確認ください。画像にマウスを乗せたり、クリックすると波紋が広がりま…