★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

「 フク郎 」一覧

jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法

jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法

Google検索のように何か入力されたときに検索ボックスの下にサジェストを一覧表示したい場合に便利なのがjQueryの「AutoCompelte」というウィジェットです。ウィジェットと言っても形のあるものではなく、既存の検索ボックスなどにGoogleのような自動補完機能を付け加えるためのものです。また実装するためのコードもそれほど複雑ではありません。そこでここではそのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説します。

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】

インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。

jQueryで画像のフェードインとスライドダウンを同時に行う方法

jQueryで画像のフェードインとスライドダウンを同時に行う方法

jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に2つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。

画像にウォーターマークを入れられるプラグイン「Image Watermark」の使い方

画像にウォーターマークを入れられるプラグイン「Image Watermark」の使い方

インターネット上の画像というのは基本的に誰でもコピーできてしまうので、何も対策をしないと簡単に無断使用されやすくなります。そこでここではWordPressで画像のアップロード時に自動または手動で透かしを入れることができる「Image Watermark」というプラグインの導入・使い方について紹介します。自分で作った画像を人に無断で使用されたくない場合や著作権を守りたい場合は役立つプラグインです。

CSSやjQueryで要素をアニメーションさせて表示する2つの方法

CSSやjQueryで要素をアニメーションさせて表示する2つの方法

要素にフェードインなどのアニメ効果をつけながら表示するには2つ方法があります。1つめはjQueryのアニメ関数を使う方法で、2つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの2つのやり方で要素をアニメ表示する方法を解説します。

jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法

jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法

jQueryで要素をアニメーションさせるにはanimate関数が使われますが、この関数内ではtransformプロパティを時間に沿ってアニメーションさせることはできません。なので代わりにtransitionプロパティを要素に指定してアニメーションさせます。ここではその方法と移動・拡大・回転・傾斜アニメを要素につける方法を解説します。

jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法

jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。

WordPressでページ離脱時にアラートを出す方法【jQuery】

WordPressでページ離脱時にアラートを出す方法【jQuery】

フォームの入力途中でページから離脱しようとしたときにアラートを出すとユーザーの利便性が高まります。WordPressでそのような離脱アラートを出すには編集画面でスクリプトを記述できるプラグインが必要です。ここではそのプラグインの使い方とjQueryでページ離脱時にアラートを表示する方法について解説します。