サイトにアクセスした時に、ページの読み込みが完了するまでローディング画面を表示する方法をご紹介いたします。 デモページを用意したので、動きについてはデモをご参照ください。 デモページを見る サイトの読み込み中にローディン…
サイトの読み込み中にローディング画面を表示する方法
jQueryを使って電話発信用のリンクをスマホ以外で無効化する方法
a要素に「tel:0312345678」というような電話番号を入れることで、そのリンクをタップした時に電話をかけることができるようになります。 PCで閲覧している時には、このリンクを無効化しておきたい場合もあるかと思いま…
指定した数まで数字をカウントアップさせることができるjQueryプラグイン「jquery.animateNumber」
jquery.animateNumberは、指定した数まで数字の部分をアニメーションでカウントアップさせることができるjQueryプラグインです。 動きについては、jquery.animateNumberの配布ページをご…
jQueryを使って指定した文字数でテキストを省略する方法
Webサイト内の特定の箇所で、文字数の上限を決めて、それ以降は省略したいということもあるかと思います。 そんな時のために、jQueryを使って、指定した文字数以上になったらテキストを省略する方法をご紹介いたします。 jQ…
jQueryを使ってスマホの時だけ左サイドバーをメインコンテンツの下に配置する方法
例えば、以下のようなレイアウトのPCサイトがあったとき、これをレスポンシブ化してスマホ対応する場合、あなたならどうやって対応しますか？ 以下のようにコーディングされていれば、contentとsidebarの横幅を広げてワ…
HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」
ScrollMeは、HTML要素に対して、ズームや回転などのスクロールエフェクトを加えることができるjQueryプラグインです。 今回は、このScrollMeの使い方について解説したいと思います。スクロールエフェクトの動…
レスポンシブ対応のカルーセル/スライダーを実装できるjQueryプラグイン「slick」
slickは、レスポンシブ対応のカルーセル/スライダーを実装することができるjQueryプラグインです。非常に豊富なオプションも用意されています。 今回は、このslickの実装手順を紹介したいと思います。そんなに難しくな…
アメブロのPR非表示も紹介！RSSから記事の一覧を出力することができるjQueryプラグイン「zRSSFeed」
zRSSFeedは、RSSのフィードを取得して、記事の一覧を出力することができるjQueryプラグインです。外部サイトの記事一覧を簡単に表示することができます。 zRSSFeedの使い方 ステップ1. zRSSFeedの…
指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」
BgSwitcherは、スライドショーのように背景画像を切り替えることができるjQueryプラグインです。 画面いっぱいの背景画像をスライドさせるプラグインはよくありますが、BgSwitcherは背景のサイズに合わせてス…
レスポンシブサイトでもクリッカブルマップが使えるようになるjQueryプラグイン「jQuery RWD Image Maps」
画像の好きな位置にリンクを仕込むことができるクリッカブルマップ。非常に便利ではあるのですが、レスポンシブのように画像などがデバイスサイズに合わせて可変するサイトでは、マップの座標がずれてリンクの位置が変わってしまいます。…