jQueryプラグイン・ライブラリ [JS]jQuery Text ResizerとjQuery Cookieを利用して文字サイズを大中小と変更する
企業サイトであれば「文字の大中小」ボタンをクリックしてページ内のフォントサイズを変更することがよくあると思いますが、jQueryプラグインjQuery Text Resizerを使えば手軽に実装できます。 また、jQuery Cookieと...
Javascript・jQuery
jQueryプラグイン・ライブラリ 
Javascript・jQuery [JS]Javascriptでa要素のリンクを無効にする方法のまとめ
以前に紹介させていただいたCSSの pointer-eventsで<a>タグのリンクを無効化する方法にも関連しますが、今回はJavascriptによる<a>タグリンクの無効化を行う方法のまとめです。 jQueryでaタグのリンクを無効 <a...
jQueryプラグイン・ライブラリ [JS]レスポンシブWEBデザイン対応のコンテンツスライダーFlex Slider
スライドショーのjQuery プラグインは山ほどありますがFlexSliderはレスポンシブWEBデザイン対応なので、スマホサイトでスライドコンテンツを利用する際には重宝しています。 また、カルーセルが使えるなどカスタマイズ性にも優れており...
jQueryプラグイン・ライブラリ [jQuery]WYSIWYGエディタを実装できるシンプルで軽量なプラグインCLEditor
シンプルなWYSIWYGエディタを簡単に設置できるjQueryプラグインCLEditorです。 各種ボタンのカスタマイズができる他、フルブラウザ対応（リサイズ）や幅固定バージョンも用意されていますのでサイトに合わせて利用できます。 ※注意点...
jQueryプラグイン・ライブラリ [javascript]Pinterestのようにタイル状にコンテンツを配置できるThe Wookmark jQuery plugin
Pinterestのようなサイトをよく見るようになりました。 この手のサイトはjQuery Masonryを利用することが多いのですが、今回はThe Wookmark jQuery pluginを使ったPinterest 風のタイル状サイト...
jQueryプラグイン・ライブラリ [IE]IE6でもmin-width、min-height、max-width、max-heightを使う方法
IE6ではCSSの「min-width」「min-height」「max-width」「max-height」が効かないため、javascriptなどを利用して別途対応してあげる必要があります。 今回紹介させていただくminmax.jsは、...
jQueryプラグイン・ライブラリ [JS]IE下位バージョンでsmoothRollOver.jsが正常に動かない時の対処法
IE6でも滑らかなロールオーバを実現させるには「smoothRollOver.js」が便利の記事で紹介させていただいた便利なjavascriptsmoothRollOver.jsですが、smoothRollOver.jsを使うと画像のレイア...
jQueryプラグイン・ライブラリ [javascript]ランダムでしかも指定件数分だけ要素を表示させるrandomDisplay.js
例えば「5件の記事の中から2件をランダム表示させる」のような処理を、jQueryを利用して実現させる方法です。 jQueryを使うので、小難しいプログラムを書いてランダムで記事を取ってくる…なんて処理は不要ですし、（javascriptが使...
jQueryプラグイン・ライブラリ [jQuery]指定した要素を「ふわふわ」動かすプラグインjquery.yurayura
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素（画像など）を「ふわふわ」浮いているように見せるためのプラグインがjquery.yurayura.jsです。 縦方向に「ふわふわ」動くイメージですが、移動距離とスピード...
jQueryプラグイン・ライブラリ [jQuery]IE下位バージョンでも透過画像を使えるようにするプラグインjquery.belatedPNG
以前にも紹介させていただいたDD_belatedPNG_0.0.8a.jsですが、 IE6、IE7には対応していますがIE8では動いてくれない… ですので、がっつりIE下位バージョンに対応させようとなると、今回紹介させていただくjQuery...
jQueryプラグイン・ライブラリ [jQuery]Lightbox風に画像や動画をオーバレイ表示できるプラグインFancybox
Lightboxのように画像をオーバーレイで拡大表示できるjQueryプラグインFancybox。 この手のプラグインは他にも色々ありますが、Fancyboxの魅力は画像以外にもYoutube動画もLightbox風に表示できるという「汎用...
jQueryプラグイン・ライブラリ [JS]IE6でも:hover疑似クラスが使えるなどHTML/CSS表示を調整するIE用ライブラリIE7.js
IE6 でも:hoverや:first-childの一部擬似クラスを使えたり、透過PNGの画像が使えるなど、ちょっと便利かも知れないライブラリIE7.js。 今回はそのIE7.jsの設置方法から、IE7.jsを使って何か出来るのか？を簡単に...
jQueryプラグイン・ライブラリ [JS]IE6でも滑らかなロールオーバーを実現させるにはsmoothRollOver.jsが便利
リンク画像にマウスを乗せると滑らかなロールオーバーを実現させることができるjavascriptがsmoothRollOverです。 ロールオーバー前と後の2種類の画像を用意して、smoothRollOverのファイルを<head>内に読み込...
Javascript・jQuery [javascript]手軽にブログの関連記事を表示できるLinkWithin
ブログの関連記事を自動で取得してサムネイルとタイトル付きで表示してくれる LinkWithin。 LinkWithinのサイトでメールアドレスやブログURLなどを登録するだけでjavascriptのタグ（ソースコード）が発行されますので、そ...
Javascript・jQuery [jQuery]レスポンシブWEBデザイン対応のスライダープラグインbxSlider
jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただくbxSliderは設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。 また、レンスポンシブWEBデ...
Javascript・jQuery [JS]イメージマップでロールオーバー時の画像を変更する方法
<img><map><area>によりイメージマップを利用する上で、「マウスを乗せた画像に変化を付けてリンクであることを分かりやすくしたい！」という要望に応えるカスタマイズです。 Javascriptを利用すれば、ロールオーバー時の画像を変...
Javascript・jQuery [JS]javascriptでユーザーエージェントを判定してブラウザ毎に振分処理を行う方法
個人的にはブラウザ判定を行う場合はPHPで行うことが多いのですが、PHPが使えない（.htmlファイルなど）場合にjavascriptでユーザーエージェントを調べてブラウザ別に処理を行う方法が使えます。 ブラウザ情報を返す処理だけでなく「I...
jQueryプラグイン・ライブラリ [jQuery]<table>をレスポンシブWEBデザイン対応させるプラグインFooTable
ホームページやWEBサイトを作っていると、<table>を使った表組みというのはまだまだ健在です。 しかし、iPadやスマホでサイトを見る機会も増えたことで、今までのようなPCサイト向けに表示させていた<table>をレスポンシブWEBデザ...
Javascript・jQuery [JS]jQuery でフッター要素をページ下部に固定する方法
フッター要素をページ下部に固定できるjavascriptrライブラリfooterFixed.jsです。 CSSでフッターを固定させる方法もありますが、こちらは固定させたい要素（フッター）にid="footer"を付ければ簡単に固定されますの...
jQueryプラグイン・ライブラリ [JS]画像をオーバーレイ表示できるLightboxの新バージョン2.5の使い方
画像をオーバーレイで拡大表示させるライブラリとして定番のLightbox。 今までのバージョン2.05だとPrototype ペースで動いていましたが、バージョン2.5よりjQueryベースで動くようになりました。 なお、IETesterで...
Javascript・jQuery [JS]jQueryを利用して現在のページのメニューデザインを変更する方法
jQueryを利用して特定の要素にクラスを付けたり外したりする処理のご紹介です。 例えば、グローバルメニューやサイドメニューなどをクリックした時、現在のページ（カレントページ）であるメニューのデザインを変更して、「今このページにいます」とい...
jQueryプラグイン・ライブラリ [jQuery]画面の右や左からダイナミックにメニューをスライド表示できるプラグインPageSlide
スマホアプリで「ボタンをタッチして画面の左や右からメニューがスライド表示される」みたいない動きをよく見ます。 ブラウザの見えない所からダイナミックにコンテンツをスライド表示させる動きを、PCサイトでも実装可能にしてくれるjQueryプラグイ...
Javascript・jQuery [JS]jQueryで画像をランダムに出力する方法
jQueryを利用してページのアクセス毎に複数枚の画像の中からランダムで1枚の画像を表示させる方法です。 今回は<img>タグの画像を使う場合と、CSSのbackground-imageに背景画像を指定する場合の2種類の方法を紹介させていた...
jQueryプラグイン・ライブラリ [JS]HTML5でマークアップする際にhtml5shivでIE下位バージョンにも対応させる
HTML5でマークアップをする場合、IE下位バージョン（8以下）がそもそもHTML5のタグが対応していない…という理由で、IE8以下でもHTML5のタグを使えるようにするためのjavascript html5shiv.jsを使う機会も多いと...
jQueryプラグイン・ライブラリ [jQuery]シンプルなドロップダウンメニューが簡単に実装できるプラグインDroppy
ヘッダーのグローバルメニュー等で、マウスオーバーによるドロップダウンメニューを実現させるためのjQueryプラグインDroppy。 シンプルなプラグインなので手軽に設定できますし、メニューの階層が深い場合でも入れ子のドロップダウンメニューが...