WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【WordPress】シェアしたいブログ記事をサムネイル画像付きで紹介する方法

この記事は約6分26秒で読めます

WordPress はてブ数サムネイル画像付きシェアリンクを表示する方法
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressネタは数ヶ月ぶりな気がします。書いたり調べたりするの楽しいです。
今回はサムネイル画像&はてブ数付きで記事をシェアする方法をご紹介します。

  • サムネイル画像付きの基本形のシェアリンクの作り方
  • 内部リンク、外部リンクでスタイルを変更する
  • はてブ数付きリンクを表示する

といった感じで進めていきます。

参考にした記事を紹介する時ってどうしてる?

ブログを書いていると他の人が書いている記事を参考にして記事を書くことってよくありますよね?
引用して記事を書くこともあると思います。

他の人が書いた記事を引用する場合は参照元の記事を紹介する必要があります。
私の場合はリストタグで単純に羅列してるだけでしたが・・・

引用元の記事もやっぱり見栄え良く表示した方が紹介した記事のアクセスアップにもつながる気がします。
実際に通常のテキストリンクとサムネイル画像付きのシェアリンクで見比べてみましょう!

どっちがいい? ただのテキストリンクとサムネイル画像付きのシェアリンク

テキストリンクだけで紹介するか、サムネイル付きで紹介するのとどちらがいいでしょうか?
実際に表示してみましょう。

ゆとりっち

火を見るよりも明らか!

多くの方はサムネイル付きの方がよいと答えると思いますし、紹介した記事のアクセスアップに貢献できます!

サムネイル画像付きで記事を効率よくシェアするには?

記事を紹介するためのサムネイル画像を用意しなきゃいけないし、
紹介するときは記事タイトル、記事リンクをコピーしてタグ付けるなどちょっと面倒な作業があります。

そこでWordPressプラグインの「Browser Shots」とChrome拡張機能の「Create Link」を使います。
Chrome使ってない人は単語登録に入れたりAddQuickTagやPost Snippetsなどで代替可能だとは思います。

もちろん手作業でサムネイル画像を撮影したり、手でタグを打ち込んでもオッケー!

サムネイル画像付き記事シェアリンクの基本形

シェアリンクの基本形は上記のようになります。テーマに元々入っていたスタイルをそのまま持ってきました。
画像は200x150pxを想定しております。

基本形のソースコード

これはWordPressのブログを書くときのテキストエディタに貼り付けます。
browser-shotクラスのタグに画像
link_titleクラスのタグに記事のタイトル
link_contentクラスのタグに記事の紹介テキストとなります。

style.cssに追記します。
link_contentクラスは780px以上のPCサイズから表示するように指定しています。

これで基本形のシェアリンクを表示することができるようになりました。
参考までにソースコードをご紹介しましたがテーマによっては微調整が必要だと思いますのでガンガンカスタマイズください。

さて、記事ごとにサムネイル画像を用意したり、リンクタグを書いたりするのはとても面倒です。

それを効率よく行うためWordPressプラグイン「Browser Shots」Chrome拡張機能「Create Link」を使います。
では導入、使い方について説明します。

WordPressプラグイン「Browser Shots」を導入する

シェアしたい記事が増えてくると毎回サムネイル画像を用意するのは大変です。
そこで、「Browser Shots」というURLを指定するだけでサムネイル画像を表示してくれるプラグインを使います。

Broser Shotsプラグインのインストール方法

WordPressの管理画面から検索してインストールします。もしくは、WordPress.org からダウンロードして、そのままアップロードしてインストールします。

WordPress管理画面 プラグイン 新規追加 Broser Shots」で検索

※記事掲載時バージョンは1.3.2です。

Browser Shotsの使い方

Chrome拡張機能「Create Link」の導入

Browser Shotsによって簡単にサムネイル画像を作成できるようになっても、
いちいち記事のタイトルを入力したり、タグを打ち込んだりするのは手間がかかってしまいます。

簡単にシェアリンクのタグを生成するためにChrome ウェブストアの「Create Link」を導入します。

※記事掲載時バージョンは0.2.9です。

Create Linkの設定

Chromeブラウザ右上の「Create Link」のマークから設定画面を表示します。

「+」ボタンから「Name」「Format」に下記の値を設定しましょう。

Nameの値は何でも構いません。

Formatの値は上記の1行を入れます。

Create Linkの使い方

使い方は簡単です。
Chromeブラウザ右上の「Create Link」のマークから先ほど追加した「ShareLink」を選択するだけです。

※見やすく整形しておりますが、実際は1行になっています。

ゆとりっちのトップページで試すと上記のようなタグがクリップボードにコピーされていますので、ブログのテキストエディタ画面に貼り付ければオッケー!

これでシェアリンクの基本形は完成です!
内部リンク、外部リンクでデザインを変えたり、はてブ数付きリンクなど必要なければここまでで完了です。

もっとこだわりたい人は続けて記事をどうぞ。

サムネイル画像付き記事シェアリンクの応用編

さて、ここからは応用編です。

  • 相手の記事のリンクにはnofollwo属性を付けたい場合
  • 応用編では自分の記事、相手の記事によってデザインを使い分けたい場合
  • はてブ数付きリンクを表示したい場合

Browser Shotsのショートコードでrel=”nofollow”を指定する方法

Browser Shotsは掲載時(ver1.3.2)はrel="nofollow"に対応していません。
下記の記事にプラグインの修正方法を紹介しております。

※Broser Shotsプラグインは現在(4/16)のver1.3.2ではrel="nofollow"指定ができないので、プラグインに直接手を加える必要があります。

自分の記事、相手の記事によってデザインを使い分ける

内部リンク向けスタイル

上記のコードをCreateLinkに登録してください。
内部リンク向けはtarget="_blank"rel="nofollow"の指定は行っていません。

自分の記事(内部リンク)を紹介するときはテーマカラーのシアン系の色のシェアリンクにしています。

外部リンク向けスタイル

上記のコードをCreateLinkに登録してください。
外部リンク向けはtarget="_blank"rel="nofollow"を指定しています。

相手の記事を紹介するときは赤紫っぽい色にしています。

内部、外部向けのCSSコード

基本形を含めたスタイルシートの指定です。
基本形はshare_linkクラスで割り当てています。
内部リンク用はshare_internal_linkクラスで割り当てています。
外部リンク用はshare_external_linkクラスで割り当てています。

box-shadowジェネレーター

box-shadowジェネレーターを使うと箱型の枠をざっくり作成してくれます。
直感的に枠のデザインを作成できます。

Creating Different CSS3 Box Shadows Effects

影付きボックスのサンプルです。
枠に影を付けて浮いているように見せるサンプル集です。

はてブ数付きリンクを表示する

はてブ数付きリンクは簡単に表示することができます。

はてブ数付きリンクを表示したい位置に上記のコードを追加します。
実際に基本形、内部リンク、外部リンク向けのタイトルの隣にはてブ数付きリンクを表示します。

ついでにファビコンを表示するコードはこちらです。

Create Linkの登録内容(はてブ数付きサムネイル画像シェアリンク)

最終的なイメージはこれ。

さいごに

「Browser Shots」×「Create Link」のコンボは強力です。
めんどうなシェアリンクの作成が一瞬でできるようになりました。

内部リンクと外部リンクのデザインは作ったときはめっちゃかっこいいな! と思ったのですが、
実際に使ってみるとけっこう浮いてる感がしますね。

もっと素敵な色の組み合わせやボックスの形などあったら取り入れてみたいと思います。

また、記事が長くなってしまったので、読みにくいところなどございましたらお気軽にコメントで質問してくださいませ!

関連記事

  1. WordPress Crayon Syntax Highlighter
  2. WordPressコメント メールアドレス任意入力
  3. WordPress リビジョン機能、自動保存機能を制御する方法
  4. 灰色のボケ
  5. ランダムでサムネイル表示
  6. zylyz wordpress free theme

PR

カテゴリー