CSSやjQueryを特定ページでだけ読み込ませる方法
カスタムCSSやjQueryコードをWordPressの記事ページに埋め込むとき、特定ページでだけ動作させるならカスタムフィールドが便利です。ここではカスタムフィールドを活用して特定ページでだけコードを読み込ませる方法について紹介します。
「 JavaScript 」一覧
WordPressでjQueryが動かないときに確認したい４つのポイント
jQueryはjavascriptを簡潔に書くためのライブラリでWeb開発には欠かせません。WordPressでもあらゆる箇所でjQueryが使われていますが、これを使ってオリジナルのスクリプトを書きたいと思った場合はいくつか注意点を守らないとスクリプト自体が動作しません。そこでここではjQueryが動かないときに特にありがちで気をつけなくてはならない４つの注意点について紹介します。
子テーマにjavascriptファイルを追加してスクリプトを呼び出す方法
WordPressでは子テーマフォルダにjavascriptファイルをただ置くだけではスクリプトを実行できません。そこで作成した子テーマ内で独自のjavascriptファイルを追加してスクリプトを呼び出す方法についてまとめました。
jQueryでページ内リンクをクリック時にスクロールさせる方法
ページ内リンクをクリックしたときにただリンク先までジャンプするのではなく、そのリンク先までスムーススクロールさせる処理を行うにはjQueryを使います。ここではjQueryを使ったスムーススクロールの実装とWordPress内でページ内リンクに対してスムーススクロールさせる方法を解説します。
jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法
Google検索のように何か入力されたときに検索ボックスの下にサジェストを一覧表示したい場合に便利なのがjQueryの「AutoCompelte」というウィジェットです。ウィジェットと言っても形のあるものではなく、既存の検索ボックスなどにGoogleのような自動補完機能を付け加えるためのものです。また実装するためのコードもそれほど複雑ではありません。そこでここではそのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説します。
クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】
インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。
jQueryで画像のフェードインとスライドダウンを同時に行う方法
jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に２つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。
CSSやjQueryで要素をアニメーションさせて表示する２つの方法
要素にフェードインなどのアニメ効果をつけながら表示するには２つ方法があります。１つめはjQueryのアニメ関数を使う方法で、２つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの２つのやり方で要素をアニメ表示する方法を解説します。
jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法
jQueryで要素をアニメーションさせるにはanimate関数が使われますが、この関数内ではtransformプロパティを時間に沿ってアニメーションさせることはできません。なので代わりにtransitionプロパティを要素に指定してアニメーションさせます。ここではその方法と移動・拡大・回転・傾斜アニメを要素につける方法を解説します。
jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法
jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。