WordPressで本文内の画像へSNSのシェアボタンを表示するプラグイン「Cool Image Share」

公開日:2016年11月27日 SNS
Knowledge Base Wordpress プラグイン
Wordpressでサイトを作る際に一般的になったシェアボタン。記事を読んだ人が自身のSNSでコメントしてくれることでアクセスアップを図る目的で設置されることが多いですね。

SNSでシェアしてもらうということは、SEO対策をするよりも確実に、より多くの人がサイトへ訪問してもらえる機会ができることから、Wordpressでなくても標準的なコンテンツになっています。特にページ自体が検索エンジンへインデックスされるよりも速く配信したいニュースサイトやニッチなサイトではSNS経由でのアクセスが重要なのではないかと思います。

ただ、ページへ埋め込む場所は?となるとタイトル下や文末、サイドバー、追従型のボタンなどになるのですが、追従型のものはうるさい感じがするし、タイトル下に入れてもまだ読む前ですから読んでもらった後でわざわざ先頭に戻って・・・というのも考えにくいですね。また、本文下には関連記事や広告などが入っていたりしてシェアボタンが見過ごされてしまうこともあるのではないでしょうか?

「Cool Image Share」は、設定したサイズ以上の画像が本文に含まれている場合で、マウスオーバー(マウスが重なったとき)時だけ画像の隅にシェアボタンが表示されるプラグインです。ただ文章を読んでいるときには表示されませんからデザインや画像の見た目が損なわれることもありません。

そして、画像にマウスが重なるとアニメーション効果を持たせたボタンが表示されるので、常時表示される場合よりも目に留まる確率が高くなると思われます。

【Cool Image Share】プラグインの基本的な機能・できること

  1. 画像をマウスオーバーした際にシェアボタンを表示
  2. 表示するボタンは「Twitter」「Facebook」「Google+」「Pinterest」「reddit」「Odnoklassniki」「VKontakte」「LiveJournal」から任意に選択可能
  3. 特定のサイズ以上の画像に対して自動的に表示
  4. マウスオーバー時のみボタンを表示するので、画像のイメージを崩す心配がない
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Cool Image Share】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Cool Image Share】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Cool Image Share】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

【Cool Image Share】プラグインの基本的な使い方

  1. アイコン画像を表示する位置を設定します。左または右上、左または右下、中央から選択できます
  2. 画像の端からアイコンまでの隙間を設定します
  3. SNSアイコンを並べる方法を選択します。縦並び、横並びから選択できます
  4. SNSアイコンのサイズをピクセルで設定します
  5. アイコン同士の隙間を設定します(Xは横方向 Yは縦方向)
  6. アイコンパネルが表示される最低の画像サイズを設定します
  7. 画像にアイコンが収まらないとき自動でアイコンを省くかどうかを設定します
  8. モバイルでのアイコン表示をするかどうかを設定します
  9. 画像をホーバーしたときのアイコンのアニメーション動作をするかどうかを設定します
  10. SNSアイコンをホーバーした際の効果を設定します
  11. 画像をホーバーしたときの効果を設定します
  12. 表示するSNSアイコンの種類と並び順を設定します
  13. アニメーション表示しないようにするかどうかの設定をします
  14. 単一ページを表示したときのみアイコンパネルを表示する(投稿・固定ページ・添付ファイル)かどうかを設定します
  15. アイコンとともに表示する文章を設定します。「この画像をシェアしてください」など/空欄でなしになります
  16. シェアする際のURLを短いものにするかどうかを設定します

赤字の項目は同一の画面にあるプレビューですぐに変更結果が確認できます

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

たった1日で基本が身に付く! WordPress 超入門【電子書籍】[ 佐々木恵 ]

1,944 円 (税込) 送料込
<p>WordPressによるWebサイト作成の基本を一から学べる書籍です。1日8時間の勤務時間内に読むことができる程度に解説内容を絞り込み,初心者・新人が最初の1冊目として読むのにふさわしい内容となっています。本書ではローカル環境にWordPressをインストールしてWebサイト..
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル【電子書籍】[ 宮内 隆行 ]

3,456 円 (税込) 送料込
<p>プラグインの開発から運用までを網羅</p> <p>※この電子書籍は固定レイアウト型で配信されております。固定レイアウト型は文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。</p> <p>CMSのデファクト・スタン..
楽天ウェブサービスセンター CS Shop

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報