WordPressサイトにフリップボックスオーバーレイや画像ホバーエフェクトを追加したいですか？
高品質なWordPressテーマを使用している場合でも、カスタマイズオプションに制限を感じることがあります。この場合、フリップボックスや画像ホバーを使用して、目を引くアニメーション効果をサイトに追加できます。
この記事では、WordPressサイトにフリップボックスのオーバーレイや画像ホバーを追加する方法を説明します。
フリップボックスとは？
フリップボックスは、マウスカーソルを合わせると反転するボックスです。このホバーエフェクトは、画像やテキストボックスなどのコンテンツに追加できます。
GIFやレスポンシブスライダーなどの他のアニメーションコンテンツと同様に、フリップボックス効果はよりインタラクティブで魅力的なものにすることができます。たとえば、著者の写真と名前を表示し、読者がホバーしたときにフリップボックスアニメーションを使用してそのプロフィールを表示することができます。
WordPressのフリーランサーであれば、顧客のロゴを表示し、フリップアニメーションを使用して各プロジェクトへのリンクを明らかにすることができます。
これらのアニメーションエフェクトはウェブサイトのユーザーエクスペリエンスを向上させることができますが、やりすぎないことが重要です。多数のアニメーションは、圧倒的で混乱を招き、ウェブサイトのパフォーマンスに影響を与える可能性さえあります。
それでは、WordPressウェブサイトにフリップボックスオーバーレイと画像ホバーエフェクトを追加する方法を見ていきましょう。
WordPressでフリップボックスオーバーレイとホバーエフェクトを作成する方法
WordPressにアニメーションを追加するには、SeedProdページビルダーを使用したり、カスタムコードを記述したりするなど、さまざまな方法があります。
ただし、フリップボックスやホバーエフェクトを作成する最良の方法は、Flipbox – Awesomes Flip Boxes Image Overlay プラグインを使用することです。この無料プラグインには、画像、テキスト、および コールトゥアクションボタンを組み合わせた、いくつかの異なるフリップボックススタイルが用意されています。
新しいフリップボックスを作成する
まず、Flipbox – Awesomes Flip Boxes Image Overlay プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
プラグインがインストールされ有効化されたら、フリップボックス » 新規作成 に移動して最初のフリップボックスを作成できます。
ここに使用できるさまざまなテンプレートが表示されます。
これらのデザインのいずれも使用したくない場合は、「テンプレートをインポート」をクリックしてください。
使用したいテンプレートが見つかった場合は、「インポート」をクリックして、WordPressブログまたはウェブサイトに追加してください。
デザインを選択したら、「スタイルの作成」ボタンをクリックする必要があります。
表示されるポップアップで、フリップボックスデザインの名前を入力します。これは参照用ですので、好きな名前を使用できます。
1番目、2番目、または3番目のいずれかをクリックして、使用するレイアウトを選択することもできます。
これが完了したら、「保存」をクリックしてください。
フリップボックスにコンテンツを追加する
一般、前面、バックエンドのタブを使用して、フリップボックスの外観を変更できます。
フォント、パディング、マージンを変更できます。これらの設定のほとんどは自己説明的なので、さまざまな効果をどのように作成できるかを確認するために目を通す価値があります。
ボックスの外観に満足したら、コンテンツを追加する時間です。画面下部にあるフリップボックスのプレビューまでスクロールし、マウスカーソルを合わせるだけです。
表示されたら、「編集」ボタンをクリックします。
フリップボックスの前面に表示されるタイトルを変更するには、「フロントタイトル」フィールドに入力できます。
その後、「フォントアイコン」フィールドをクリックし、表示されるポップアップから新しい画像を選択することで、フロントアイコンを変更できます。
次に、フリップボックスの前面に画像を追加できます。「画像のアップロード」をクリックし、メディアライブラリからファイルを選択するか、コンピューターから新しい画像をアップロードします。
使用したい画像がまだない場合は、Canvaなどのウェブデザインソフトウェアを使用して作成できます。
フロントのフリップボックスに満足したら、バックのデザインに移りましょう。まず、「バックエンド情報」ボックスに表示したいコンテンツを入力します。
多くの場合、訪問者を関連ページ（人気商品のリスト、価格情報、その他のコンテンツなど）に誘導するために、行動喚起を使用したい場合があります。
コールトゥアクションボタンに表示されるテキストを変更するには、「バックエンドボタンテキスト」に単純に入力します。次に、「リンク」フィールドに移動先のURLを追加できます。
最後に、「今すぐアップロード」をクリックして背景画像を変更します。
フリップボックスの裏側の設定が完了したら、「送信」をクリックします。
プレビューが更新され、すべての変更が表示されます。
複数のフリップボックスを作成する
この時点で、「新しいフリップボックスを追加」セクションの「+」をクリックして、さらにボックスを追加したい場合があります。
これにより、同じスタイルで複数のフリップボックスを作成し、それらを列と行に整理できます。
上記の手順に従って、さらにフリップボックスを作成できます。
たとえば、各価格プランに対してフリップボックスを作成することができます。
フリップボックスをWordPressウェブサイトに追加する
フリップボックスに満足したら、プラグインが自動的に提供するショートコードを使用して、WordPressウェブサイトに追加できます。
画面の右側にある「ショートコード」ボックスの値をコピーしてください。
これで、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアにフリップボックスを追加できます。
ショートコードの配置方法については、WordPressでのショートコードの追加方法に関するガイドを参照してください。
このプラグインには、WordPressテーマのウィジェット対応エリアに追加できるフリップボックスウィジェットもあります。
複数のフリップボックスアニメーションを作成した場合、IDを知る必要があります。この情報を取得するには、フリップボックス » フリップボックス に移動し、「ID」列を確認してください。
次の画像では、フリップボックスのIDは1です。
この情報が揃ったら、外観 » ウィジェット に移動します。
ここで、「+」ボタンをクリックする必要があります。
ここで「フリップボックス」と入力できます。
目的のウィジェットが表示されたら、サイドバー、フッター、または同様のセクションにドラッグアンドドロップするだけです。
Flipboxウィジェットは、デフォルトでアニメーションの1つを表示します。
代わりに別のフリップボックスを表示するには、そのIDをフィールドに入力します。
ウィジェットの外観に満足したら、「更新」をクリックします。
詳細については、WordPressでウィジェットを追加して使用する方法に関するガイドをご覧ください。
この記事が、WordPressサイトにフリップボックスのオーバーレイやホバーを追加する方法を学ぶのに役立ったことを願っています。また、画像ギャラリーの作成方法に関するガイドを確認したり、専門家が選んだ最高のWordPressスライダープラグインをご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
質問や提案はありますか？コメントを残して、議論を開始してください。