• RSS
[JS]背景いっぱいの画像を表示できるjQuery プラグイン「jQuery Fullscreenr」

<img> タグで指定した画像を背景いっぱいにフルスクリーンで表示できるjQuery プラグインが jQuery Fullscreenr です。

以前紹介したプラグイン jQuery Backstretch とほぼ同じコトが出来ますが、jQuery Fullscreenr はCSS の background-image ではなく <img> タグに画像を指定するタイプになりますので扱い方が異なります。

また jQuery Backstretch 同様、カスタマイズ次第では複数枚の画像の中からランダムで1 枚の画像を表示させることも可能ですので、今回は jQuery Fullscreenr の基本的な使い方から画像のランダム出力方法まで紹介致します。
続きを読む

[JS]jQueryで replace() を使って特定の文字列を置換する方法

ページ内の文字列を削除、置換したい場合に、jQueryで replace() を使えば便利です。

要素を指定すれば特定の箇所のテキストを削除、もしくは別の文字列に変換、なんてことも出来ますし、カスタマイズ次第では「ブラウザの幅が320px 以下でのアクセス時には 特定の要素を削除する」という具合に色々な場面で利用できると思います。
続きを読む

[JS]背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」

ブラウザの幅に合わせて画面いっぱいに画像を表示してくれるjQuery プラグイン jQuery Backstretch

1 枚だけの背景画像をブラウザ幅に合わせてフルスクリーン表示できるのはもちろん、カスタマイズ次第では複数枚の画像をアクセス毎にランダムで切替表示することもできる便利なプラグインです。
続きを読む

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 に保存する方法も合わせて紹介させていただきます。

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