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. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。

WordPressの投稿などにFacebookアカウントでコメントするためのコメントフォームを表示するプラグイン「Fancy Facebook Comments」

WordPressで古い投稿をTwitterへ自動ツイートできるプラグイン「Buffer Connector(旧Buffer My Post)」

WordPressでツイッターのタイムラインを開閉表示できるプラグイン「Twitter Widget Slider」


【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

楽天市場の人気ランキング

小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! 初めてでもホームページがすぐ作れる!/..

小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! 初めてでもホームページがすぐ作れる!/..

2,178 円 (税込)
著者星野邦敏(著) 吉田裕介(著) 羽野めぐみ(著)出版社技術評論社発行年月2019年07月ISBN9784297105556ページ数239P9784297105556内容紹介初めてでも安心!思いどおりのホームページを作ろう!誰でもかんたんに作れる!専門知識がなくてもきれいなホームページが作れる!最新..
いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【1000円以上送料無料】

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏【1000円以上送料無料】

1,738 円 (税込) 送料込
著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2019年08月ISBN9784295006664ページ数280P9784295006664内容紹介Webサイトをはじめて作る初心者でも安心!大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!..
楽天ウェブサービスセンター CS Shop

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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

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

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


【スポンサーリンク】


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

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

関連情報