• RSS
WordPressに同梱されたjQueryを使う場合と、CDN を利用する場合の処理のまとめ

WordPress にはjquery 本体が同梱されていて、header.php に <?php wp_head(); ?> を書けばjquery ファイルが呼び出されます。

ただ、「最新版のjQuery を使いたい!」なんて場合に同梱のjquery ファイルを使わないことも稀にありますので、今回はその辺の処理を中心にまとめてみました。
続きを読む

[JS]スマホアプリのように左右からメニューをスライド表示できるjQueryプラグイン「mmenu」

スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグイン mmenu のご紹介です。

オプションで色々カスタマイズができますが、まずは今回は mmenu の基本的な設置方法から使い方までをご紹介します。
続きを読む

[JS]スマホでもIE7 にも対応したjQuery ベースの「マーキー」っぽいスクロール

以前はPCサイトやガラケーサイトで頻繁に目にした marquee タグによる文字のスクロール表示ですが、モダンブラウザや iPhone、iPad、またIE 8 や 7 の環境でもマーキーっぽく文字を流したい場合は、jQuery を利用すると便利です。

今回はjQuery を使って文字をマーキーっぽくスライド表示させる方法に加えて、
「指定の文字数以上ならマーキー、未満なら固定表示」
なんていう条件分岐もやってみようと思います。
続きを読む

[JS]フォームの入力文字数をカウントするjQuery プラグイン「Textchange」

テキストフォームに入力した文字数をカウント表示してくれるjQuery プラグインが TextChange です。

Twitterのように140文字を上限とした場合、入力文字数に応じて140 からカウントダウンしていき、140文字を超えると「負」の値で表示されます。
続きを読む

[JS]横並びの要素の高さを行毎に揃えるjQueryプラグイン「jQuery.lineUp」

float を使って要素を横並びで表示する場合、「高さの異なる要素を行を揃えてキレいに表示したい!」と思いますが、
height を固定値にして overfloe:hidden ではみ出た情報を非表示にして…なんてのはスマートじゃないし…」

という時に便利なjQueryプラグインが「jQuery.lineUp」です。
続きを読む

サイトのコピーライトで「現在年」を表示する方法(Javascript & PHP)

サイトのフッターコピーライトで、2007 – 2013 のような年号を記載する場合もあると思いますが、年が変わるたびに年号を手打ちで更新するのは面倒なので、Javascript で現在年を自動表示する方法を紹介致します。
続きを読む

[JS]Google画像検索のような画像の拡大表示ができるjQueryプラグイン「Superbox」

jQueryプラグイン「Superbox」を使って、Google の画像検索のような見せ方ができます。

サムネイル画像をクリックして、その直下に拡大画像を割り込ませて表示させるUIです。

ギャラリーサイトなどで Lightbox を使って立ち上げていた画像を、Superbox を使って見せ方を変えても面白いかもしれませんね。
続きを読む

[JS]テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」

テーブルを手軽にソートできるjQueryプラグイン「Stupid jQuery Table Sort」のご紹介です。

非常にシンプルで軽量なスクリプトなので、ちょっとしたテーブルのソートに便利です。

ライセンスはMIT license。
続きを読む

[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」

CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。

jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、

個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。
続きを読む

[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法

<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。

非常に便利なカスタマイズでしたのでシェアさせていただきました。
続きを読む

Bootstrap のタブメニューを Cookie に保存して記憶させる方法

Bootstrap を使ったシンプルなタブメニューの実装方法です。

今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookie を利用して現在閲覧しているタブの情報を Cookie に保存する方法も合わせて紹介させていただきます。

これにより、ページをリロードしたり離脱して戻ってきた場合でも、タブの情報を保持できるようになります。
続きを読む

[JS]複数の要素を縦にも横にも「ふわふわ」動かすjQueryプラグイン「jqFloat」

指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグイン jquery.yurayura.js について紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。

プラグイン提供先でも動きを確認できますが、jqFloat により複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。
続きを読む

[JS]フォームのバリデーションと入力ヒントの表示も可能なjQueryプラグイン「JQuery Form Validation And Hints」

フォームのバリデーションと入力ヒント用jQuery プラグイン「JQuery Form Validation And Hints」のご紹介です。

設置とカスタマイズが簡単なので、お問い合わせや見積、資料請求などの各種メールフォームが必要な企業サイトでも使えるんじゃないかなと思います。
続きを読む

[JS]jQueryでページスクロールしてもナビゲーションを固定させる方法

ページを下までスクロールしてもサイドメニューに広告が固定されたまま、なんてブログをよく目にしますが、このような動きはjQuery を利用することで実装可能です。

バナー広告以外にもメニューボタンやSNSボタン、ページの先頭へ戻るなどのリンクを設置できるなど、色々と応用しやすいカスタマイズです。
続きを読む