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

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】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

Wordpressプラグイン【Cool Image Share】の日本語翻訳ファイルのダウンロードページです。

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

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

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

インストールと設定方法

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

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

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【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を短いものにするかどうかを設定します

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

Amazonの人気商品楽天市場の人気商品
【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

【送料無料】 WordPress 仕事の現場でサッと使える!デザイン教科書 Webデザイナー養成講座 / 中島真洋 【本】

3,002 円 (税込) 送料込
基本情報ジャンル建築・理工フォーマット本出版社技術評論社発売日2015年06月ISBN9784774173801発売国日本サイズ・ページ366p 26cm(B5)関連キーワード 9784774173801 【FS_708-2】出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

【中古】 本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版 /プライム・ストラテジー株式会社(著者) 【中古..

1,649 円 (税込)
プライム・ストラテジー株式会社(著者)販売会社/発売会社:SBクリエイティブ/ 発売年月日:2015/02/01JAN:9784797381078
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。
トップへ戻る