ページ内リンクをスクロールできる「Page scroll to id」が便利!使い方を解説
WordPressでページ内リンクをスムーズスクロールする処理を行うには普通はjQueryなどが必要ですが、「Page scroll to id」というプラグインを使うと簡単設定でスムーズスクロール指せることが可能です。ここではこのプラグインの導入や使い方を解説します。
WordPressでページ内リンクをスムーズスクロールする処理を行うには普通はjQueryなどが必要ですが、「Page scroll to id」というプラグインを使うと簡単設定でスムーズスクロール指せることが可能です。ここではこのプラグインの導入や使い方を解説します。
個人サイトやブログはGDPRを破らないためにしておいた方がいいことの1つがサイトの訪問者にCookie使用の同意を求めておくことです。どうやって同意を取るの?と思うかもしれませんがWordPressを使っているならその同意をとるのに便利なプラグインがあるので、その導入方法と使い方について紹介します。
ページ内リンクをクリックしたときにただリンク先までジャンプするのではなく、そのリンク先までスムーススクロールさせる処理を行うにはjQueryを使います。ここではjQueryを使ったスムーススクロールの実装とWordPress内でページ内リンクに対してスムーススクロールさせる方法を解説します。
Google検索のように何か入力されたときに検索ボックスの下にサジェストを一覧表示したい場合に便利なのがjQueryの「AutoCompelte」というウィジェットです。ウィジェットと言っても形のあるものではなく、既存の検索ボックスなどにGoogleのような自動補完機能を付け加えるためのものです。また実装するためのコードもそれほど複雑ではありません。そこでここではそのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説します。
インタラクティブなWebサービスだとユーザーの入力内容や操作が間違っていた場合、ボタンを押すとガタガタ震えるような演出をしているところがあります。あのような演出はCSS3のアニメーションプロパティとjQueryなどのスクリプトを組み合わせると実現できます。ここではクリック時にボタンがガタガタ震えるアニメーション効果をつける方法について解説します。
jQueryを使うと画像などの要素をフェードインで徐々に浮かび上がらせて表示させたり、スライドダウンで上から下にスライドして表示させるなどのアニメーション効果をつけることができます。ただし同時に2つの効果をつけたい場合は少し工夫が必要です。ここでは画像をフェードインしつつスライドダウンさせて表示する方法を解説します。
インターネット上の画像というのは基本的に誰でもコピーできてしまうので、何も対策をしないと簡単に無断使用されやすくなります。そこでここではWordPressで画像のアップロード時に自動または手動で透かしを入れることができる「Image Watermark」というプラグインの導入・使い方について紹介します。自分で作った画像を人に無断で使用されたくない場合や著作権を守りたい場合は役立つプラグインです。
要素にフェードインなどのアニメ効果をつけながら表示するには2つ方法があります。1つめはjQueryのアニメ関数を使う方法で、2つめはCSSでアニメーションプロパティを使う方法です。それぞれの方法に長所や短所があるので使い分けた方がいいです。ここではこの2つのやり方で要素をアニメ表示する方法を解説します。
jQueryで要素をアニメーションさせるにはanimate関数が使われますが、この関数内ではtransformプロパティを時間に沿ってアニメーションさせることはできません。なので代わりにtransitionプロパティを要素に指定してアニメーションさせます。ここではその方法と移動・拡大・回転・傾斜アニメを要素につける方法を解説します。
jQueryではanimate関数を使うと要素のCSSプロパティを変化させてフェードインなどのアニメ効果をつけることができますが、transformプロパティの値を変化させることはできません。そこでtransitionプロパティを使います。ここではtransitionプロパティを使って要素の回転などを行う方法を解説します。