----- ブログ運営に年齢制限なし!  40~50代の方でも 熱烈応援中!! -----
スポンサーリンク

画像にマウスオーバーエフェクトを付与「Image Hover Effects Block」の使い方

ブログに貼り付ける画像って鑑賞用や説明用とありますが
旅行写真などの観賞用の場合って
タイトルや説明を付けたくなりますよね。
そこで写真にマウスを当てると反転してタイトル、説明が表示される
プラグイン「Image Hover Effects Block」の紹介です。
ブロックエディター対応なので
投稿作成ページからそのまま使えますよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。

Image Hover Effects Blockとは

WordPressで作成したブログで
写真をマウスオーバーすると黒色に反転して
タイトル・説明を表示するプラグインです。
複雑な設定はなく
ブロックエディターから写真を選んで作成する形になっています。
*有料版だと複数のエフェクトを選べるようになります。

プラグイン「Image Hover Effects Block」のインストール

それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。

プラグインを追加のページが表示されたら
キーワード検索欄に「Image Hover Effects Block」と入力しましょう。
検索結果は、自動で反映されます。

Image Hover Effects Blockを見付けたら
「今すぐインストール」をクリックします。
*下の方や右側、または違うページにある場合があります。

インストールが終わると「有効化」をクリックしましょう。

有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。

これでImage Hover Effects Blockのインストールは終わりです。

写真の反転画像の作成

ここでは指定した写真の反転後のタイトル・説明を入力していきます。
どちらもリンクも付けることができるので便利ですよ。

それでは管理メニューから
「投稿」→「新規追加」で通常の投稿記事作成ページに移動しましょう。

投稿作成ページが開いたら適当にタイトルを入力します。

では、本文スペースの「+」ボタンをクリックして
ブロック検索で「image」と入力
Image Hover Effectsブロックをクリックしましょう。

Image Hover Effectsブロックが開いたら
真ん中の画像マークをクリックします。

メディアライブラリーが開くので
まずは貼り付けたい写真を選んで「選択」をクリックしましょう。

するとこのように写真が設置されます。

マウスを写真に当てると
反転してタイトル・説明が表示されるので変更していきます。

タイトル:「Drive Theater」にしました。

リンクを付けることができるので
タイトルにリンクを付けてみました。

続いて、説明を変更していきます。

説明:「Golden 50s-60s」にしました。

これでタイトルと説明の入力は終わりです。
あとは自動でマウスオーバーに対応しますよ。

それでは実際にどのように表示されるのか
「プレビュー」から確認していきましょう。

するとこのようにマウスオーバーで反転します。
画像ではわからないので動画を再生して確認してみてください。

これでImage Hover Effects Blockの紹介は終わりです。

画像関係のプラグインは他にもいろいろありますよ。
インスタグラムの写真と連動して表示するものや
画像を貼り合わせて立体キューブを作成するものもあります。
また、ビフォーアウター画像を作成できるものや
画像をタイル調に並べて表示するものまでありますよ。
興味のある方はここより参考にしてみてください。

まとめ

写真にマウスオーバーでタイトル・説明を表示するプラグインでした。
旅行や趣味関係のブログだと
写真にタイトル・説明を付けることで伝えやすくなりますよ。
昔、アルバムにある写真って裏に日付とメモ書きをしてましたよね。
あの感覚で見た人がわかりやすいように書いておくといいかも。

ブログを始めたら毎年維持費もかかりますよね。
そこでこれをやらなきゃ損をするということで
ブログ維持のためにアフィリエイトを始めてみませんか。
大きく稼ぐには全力で挑む必要がありますが
ブログ維持費なら片手間でも大丈夫!
気になる方はここよりアフィリエイト会社(ASP)の紹介を見てみましょう。

にほんブログ村 IT技術ブログ WordPressへ

PVアクセスランキング にほんブログ村

タイトルとURLをコピーしました