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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

小さな会社のWordPressサイト制作・運営ガイド【電子書籍】[ 田中勇輔 ]

2,894 円 (税込) 送料込
<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

Web担当者のためのWordPressがわかる本 あらゆるビジネスサイトで使える企画・設計・制作・運 [ 田中勇輔 ]

2,570 円 (税込) 送料込
あらゆるビジネスサイトで使える企画・設計・制作・運 田中勇輔 翔泳社ウェブ タントウシャ ノ タメノ ワードプレス ガ ワカル ホン タナカ,ユウスケ 発行年月:2015年09月15日 ページ数:287p サイズ:単行本 ISBN:9784798142708 田中勇輔(タナカユウスケ) Webディレク..
楽天ウェブサービスセンター CS Shop

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

「こんなプラグインないの?」「設定方法をもっと詳しく教えてほしい」「プラグインを少しカスタマイズして使いたい」などのご相談は、こちらのリンクからお願いします(【ココナラ】のサイトへ移動します)。

ココナラ Wordpress プラグイン探し バナー

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

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