【WordPress】画像ホバー時にソーシャルアイコンを表示。WordPress Image Hover Lite

wp_image_hover_lite_s
WordPress Image Hover Liteは画像をホバーした際にソーシャルボタンを表示してくれるプラグイン。ボタンの形状は丸と四角の2種類が選択でき、画像ホバー時のオーバーレイカラーは変更ができます。

WordPress Image Hover Liteプラグイン導入

ダッシュボード >> プラグイン >> 新規追加 >> WordPress Image Hover Liteを検索
有効化にするとWP Image Hover Liteが追加されます。

Appearance Settings

wp_image_hover_lite_2
Image Hover Overlay Colorで画像にホバーした際のオーバーレイカラーを指定できます。

Social Settings

wp_image_hover_lite_1

Display Social Links ソーシャルリンクの表示
Social Link Style ソーシャルリンクスタイル
Social Link Color ソーシャルリンクの色
Social Profiles ソーシャルプロフィール

Animation Settings

wp_image_hover_lite_3
Default Hover Animationでホバーアニメーションの設定を行います。

ビジュアルエディター

wp_image_hover_lite_4
メディアで画像を挿入し、画像を選択します。選択状態になるとImage Hover Liteが選択できるようになります。

General Settings

wp_image_hover_lite_5
Hover AnimationはFadeのみです。Share Text Messageにテキストを入力。(空白でも機能します。)

Social Settings

wp_image_hover_lite_6
Styleでソーシャルボタンの形状を変更。追加するものや表示させないものをチェックします。
最後にUpdate Imageをクリックします。

imgタグにdata属性が追加されます。

<img src="画像URL" width="" height="" class=""
data-fburl="CURRENT" data-tweeturl="CURRENT" data-linkedinurl="CURRENT" data-pinurl="CURRENT" data-plusurl="CURRENT" data-diggurl="CURRENT" data-deliciousurl="CURRENT" data-stumbleuponurl="CURRENT" data-sstyle="circle" data-sharetxt="sample" data-animation="fade" />

data-sstyle=”circle”

wp_image_hover_lite_8

data-sstyle=”square”

wp_image_hover_lite_7

 
WordPress Image Hover Lite

【WordPress】画像ホバー時にソーシャルアイコンを表示。WordPress Image Hover Lite

  • LATEST
  • RELATED
  • POPULAR