フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

WordPressでホバーでフリップさせるプラグイン「Flip Box Block」

読了目安時間は約 2 分です。

海外サイトを見ていると、画像にマウスカーソルを当てるとクルッと回転して説明書きなどのテキストなどを表示させるという、からくり仕掛けのような表現を見かけることがあります。ホバーで回転させる「フリップ」というアニメーションですが、これをプラグインで簡単に導入できるのが「Flip Box Block」です。

WordPress.org 日本語
Flip Box Block Flip Box Block は 前後に自由にブロックを配置できる、WordPress ブロックエディター用のプラグインです。
目次

便利なところ

  • 簡単にフリップアニメーションを実現できる
  • 表裏で別々のブロックを設置できる
  • 表裏で異なる内容を表示させることができる

使い方

プラグインをインストールして有効化します。

固定ページや投稿ページなどの編集画面で「Flip Box Block」のブロックを呼び出します。

あとは通常のブロックと同様に設定していきます。

設定

「Flip Box Block」のブロックを選択すると、サイドバーに設定項目が表示されます。

サイドバーから「Front」「Back」を切り替えながらそれぞれを編集してください。

大抵のブロックが入りますので、画像やテキストなどご自由にどうぞ。

まとめ

フリップは日本ではあまり見かけないモーションですが、視覚効果だけでなく手軽にコンテンツを見せることができるのでUI的にも良さそうですね。

ただし使いすぎにはご注意を!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる