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

「 JavaScript 」一覧

WordPressでjQueryが動かないときに確認したい4つのポイント

WordPressでjQueryが動かないときに確認したい4つのポイント

jQueryはjavascriptを簡潔に書くためのライブラリでWeb開発には欠かせません。WordPressでもあらゆる箇所でjQueryが使われていますが、これを使ってオリジナルのスクリプトを書きたいと思った場合はいくつか注意点を守らないとスクリプト自体が動作しません。そこでここではjQueryが動かないときに特にありがちで気をつけなくてはならない4つの注意点について紹介します。

jQueryでページ内リンクをクリック時にスクロールさせる方法

jQueryでページ内リンクをクリック時にスクロールさせる方法

ページ内リンクをクリックしたときにただリンク先までジャンプするのではなく、そのリンク先までスムーススクロールさせる処理を行うにはjQueryを使います。ここではjQueryを使ったスムーススクロールの実装とWordPress内でページ内リンクに対してスムーススクロールさせる方法を解説します。

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

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

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

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

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

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

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

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

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

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プロパティを使って要素の回転などを行う方法を解説します。