-
セキュリティ対策プラグイン「XO Security」の使い方・設定方法
WordPressは多くの利用者に支持されているブログ構築システムですが、しばしばハッキングの対象にされることがあります。 そのため、WordPressインストール後はセキュリティ対策プラグインを入れておくことが大切です…
-
Bogoを使ってWebサイトを多言語化する方法【ウィジェット・カスタム投稿・自作テーマ対応】
今回は、WordPressの人気多言語化プラグイン「Bogo」を使って、Webサイトを多言語対応にする方法を解説します。 Bogoを使うと、1つのWordPressのダッシュボード上で各言語ページを管理でき、非常に効率的…
-
BackWPupの使い方やおすすめの設定方法、データ復元方法を解説
WordPressサイトのバックアップデータを取得するには、バックアッププラグインを導入するのが便利です。 WordPressのバックアッププラグインにはいくつかおすすめがありますが、今回は人気バックアッププラグイン「B…
-
Contact Form7に条件分岐が設定できる「Conditional Fields for Contact Form 7」の使い方
今回はContact Form 7で作成したお問い合わせフォームに条件分岐を設定できるプラグイン「Conditional Fields for Contact Form 7」の使い方を解説します。 ある質問に「いいえ」と…
-
Contact Form 7とスプレッドシートを連携させる方法！GSheetConnector for CF7の使い方
Contact Form 7で届いた問い合わせ内容をGoogleスプレッドシートに反映させたいという場合があるかと思います。 そういった際は、GSheetConnector for CF7を使用することでContact …
-
matchMediaを使ってGSAPアニメーションをレスポンシブ対応させる方法
アニメーションを作っている際に、PCとSPで微妙にアニメーションの動きやscrollTrggerプラグインのトリガー要素を変えたいことがあります。 こんなときGSAPを使っている場合は、mathMediaメソッドを使うこ…
-
Contact Form 7でお問い合わせフォームを作成し、スパム対策まで行う方法
WordPressにお問い合わせフォームを作成したい場合、プラグインを導入するのが手っ取り早く便利です。 今回は数あるお問い合わせプラグインの中でも国産で使いやすいことから人気を集めている「Contact Form 7」…
-
【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法
GSAPはデフォルトでは、ページが読み込まれたタイミングでアニメーションが開始されます。 しかし、これを制御して、クリックやホバーなどのイベントが発生してからアニメーションを開始させることもできます。 今回はGSAPのア…
-
【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法
GSAPは、簡単にトゥイーン（始点と終点の間を補間するアニメーション）を作成できるJSライブラリですが、デフォルトではスクロールと連動していません。 しかし、ScrollTriggerプラグインを使うことで、以下のように…
-
【GSAP】タイムラインの使い方！複数要素のアニメーション順を制御する方法
アニメーションライブラリ「GSAP」を使うと、以下のように複数要素のアニメーション順を制御することができます。 See the Pen GSAP タイムライン機能 by E-VALUE WORKS (@evw) on C…
-
アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方
GSAP（GreenSock Animation Platform）は、おしゃれなギミックを取り入れたWebサイトを制作する際に便利なアニメーションライブラリです。 GSAPを使えば、複雑な動きも短いコードでスムーズに実…
-
Vivus.jsを使ったSVGアウトラインアニメーションの作り方！
今回は、Vivus.jsを使ってSVGアウトラインアニメーションを作成する方法を解説します。 Vivus.jsを理解すれば、サイト読み込み時などでよく見られる、ロゴの輪郭が線で描かれていく以下のようなアニメーションが作れ…
-
SVGを自在に変形！JSライブラリ「Snap.svg」を使ってモーフィング表現を実装する方法
JSライブラリ「Snap.svg」を使用すると、異なるpathで描いたSVG画像をスムーズに変形アニメーションさせられます。 このように、連続する2つの画像の間をコンピューターグラフィックスによって補間し、自然な変形を実…
-
symbol・useタグを使ってSVGアイコンを使い回す方法
SVGアイコンはインラインで表示すると、CSSで色を変えられたり色々便利です。 しかし、コードが長くなってしまうため、たとえばボタンの矢印部分をSVGアイコンで繰り返し使う場合などは、記述量が多くなってしまいソースが読み…
-
SVGとは？ツール毎のSVG書き出し方法、SVGコードの基本的な使い方を解説
SVGはベクター形式の画像データです。 ベクター形式は、点や線、色、カーブを数値データで記録するため、軽量で拡大しても画像が荒れない点が大きな特徴です。 今回は、SVGとJPG・PNGとの違いやメリット・デメリット、SV…
-
【clip-pathの使い方】CSSで画像をクリッピングする方法
今回は、画像を様々な形でクリッピングしたい場合に便利なCSSプロパティclip-pathの使い方を解説します。 clip-pathが使えるようになると、指定した要素の一部のみをくり抜いて表示させることができるようになりま…
-
$(function() {})の意味は？$(window).on(‘load’,function(){})との違い
jQueryの初学者には、$(function() {})を意味も分からず「おまじない」のように記載している方も多いのではないでしょうか？ しかし、実際には、JavaScriptやjQueryを実行するタイミングを決める…
-
PHPのusort関数を使って配列の中身を並び替える方法
PHPで取得した配列の中身を、何らかの規則に則って並び替えたくなる場合があります。 そういった際に便利なのがusort() 関数です。 今回はusort()関数を使って配列の中身を並び替える方法を解説します。 usort…
-
【JavaScript】debounce（デバウンス）とは？実装方法を解説
Webサイトやアプリの開発中に、ウィンドウのリサイズやinputの入力時に何らかの処理を行いたい場面がよくあります。 しかし、これらのイベントが発生するたびに処理が連続して呼び出されると、ブラウザに大きな負担がかかり、パ…
-
WordPressのローカル環境構築！Localの使い方を解説
WordPressでWebサイトを作成する際、完成するまで一般公開したくないと考える方も多いでしょう。 そんな方は、インターネットから閉ざされた自身のPC上でローカル環境を構築するのがおすすめです。 ローカル環境であれば…
