サムネイル画像付きリンクを作成 Browser ScreenshotsとCreate Link 

スポンサーリンク
スポンサーリンク

サムネイル画像付きリンク作成

WordPressプラグイン「Browser Screenshots」と、Chrome拡張機能「Create Link」を使って、サムネイル画像付きリンクを簡単に作成する方法をご紹介します。

Browser Screenshotsは自動でウェブサイトやブログの画像をキャプチャして、リンクを作成してくれるプラグインです。

いちいちサイト画像を切り出して加工する手間が省けるので、サイトの紹介やリンク作成に便利なプラグインですが、キャプチャ画像だけでは何のサイトかわからない場合があります。

最近はテーマの機能でブログカードを作成できるものがありますが、WordPressの公式テーマや一般のテーマを使用する場合は、自分で画像付きリンクを作成しないといけません。

それなら、サムネイル画像付きリンクを自分で作れるようにしてみましょう。

Browser ScreenshotsとChrome拡張機能「Create Link」を組み合わせると、サムネイル画像とサイトタイトルが付いたリンクを簡単に作成することができます。

ブログカード作成機能がないWordPressテーマでリンクを作成するなら、ぜひ一度この方法を試してください。

なお、このプラグインは「Browser Shots」という名称でしたが、今は「Browser Screenshots」に変更されています。プラグイン検索で「Browser Shots」と入力すると、名称変更後のプラグインが見つかるので間違わないように注意してください。

他にもプラグイン「Pz-LinkCard」を使う方法や、プラグインを使わずにブログカードを作成する方法もあるので、調べてみてください。

スポンサーリンク

リンクはサムネイル画像付きで

ウェブサイトやブログを運営していると、参考記事や関連記事を紹介することがよくあります。

そのために外部リンクや内部リンクを使うのですが、単にURLとタイトルだけのリンクを作成するより、サイトの画像が付いていると見栄えがよくなります。

サイトのサムネイル画像付きでリンクを作成するなら、WordPressプラグイン Browser Screenshotsと、Chromeの拡張機能 Create Linkを使う方法がオススメです。

論より証拠、これを見てください。以下は単なるURLリンクですが・・・

https://wind-mill.co.jp/

こちらはサムネイル画像付きリンクです。単なるURLリンクより見栄えしますよね。

サムネイル画像付きリンク

なお、この記事の内容はChromeをメインブラウザでお使いの方向けです。

FirefoxやSafariには「Make Link」というCreate Linkと同様の拡張機能があるので、Chrome以外のブラウザをお使いの方は、Make Linkを使ってください。

WordPressプラグイン Browser Screenshots

まずはWordPressプラグインBrowser Screenshotsをインストールしましょう。

Browser Screenshots
ウェブサイトのスクリーンショットを撮るプロセスを自動化します。

ダッシュボード左メニューの「プラグイン」から「新規追加」を選択して、検索窓に「Browser Screenshots」と入力してから「プラグインの検索」をクリックします。

Browser Screenshotsが出てくるので「いますぐインストール」をクリックして「プラグインを有効化」してください。

Browser Screenshots

ちなみに「Browser shots」で検索すると「Browser Screenshots」が出てきました。プラグインの名称は変わっていますが、新旧どちらで検索しても大丈夫です。

Browser Screenshotsの使い方

当然ながら、Browser Screenshotsは単独でも使えます。サイトのスクリーンショット画像入りリンクを作成すると、こんな感じになります。

Browser Screenshots スクリーンショット画像付きリンク

スクリーンショットは投稿ページと固定ページの両方で作成できますが、作成用のアイコンはビジュアルエディターのみ表示され、テキストエディターでは使えません。

では、サイトのスクリーンショットを作成してみましょう。リンクを挿入したい場所を選び、ビジュアルエディタの「Browser shots」アイコンをクリックします。

サイトスクリーンショット作成

ここにサイトのURLや画像のサイズを入力します。キャプションは無しでも構いません。あとは入力しなくてもOKです。最後に「OK」をクリックします。

Browser Screenshots 設定

記事内に以下のショートコードが挿入されるので、プレビューでサイトのスクリーンショットを確認してください。画像のサイズは適宜調整してください。

Browser Screenshots ショートコード

[browser-shot url="https://wind-mill.co.jp/" width="600" height="450"]ウインドミル | 京都のホームページ制作・ウェブマーケティング[/browser-shot]

Chrome拡張機能 Create Linkをインストール

続いて、Chromeの拡張機能 Create Linkをインストールします。下からChromeウェブストアの「Create Link」に直接リンクしていますよ。

Create Link
Copy current page URL to clipboard in various formats.

右上の「Chromeに追加」をクリックすると、Create Linkのインストールが始まります。

Create Link インストール

上部に「Create Link」を追加しますか?と表示されたら「拡張機能を追加」をクリックします。

Create Link インストール

「Create LinkがChromeに追加されました」のメッセージと共に、右上に小さなアイコンが追加されました。

Create Link 追加

Create Link 設定

次にCreate Linkの設定です。右上のCreate Linkアイコンをクリックするとメニューが表示されるので、一番下の「Configure…」をクリックしてください。

create link 設定

Create Linkの設定画面が表示されるので、「Formats」欄の下にある「+」をクリックします。

Create Link 設定画面

新しいコードが追加できるので、シェア用リンクのコードを作成します。まずは左の項目に好きな名前を入れてください。ここでは「link」としています。

Create Link コード名入力

続いて中段にシェア用リンクのコードを入力します。はてブ数を表示させることもできますよ。

Create Link リンクシェア用コード入力

こちらがシェア用リンクのコードです。見やすいように改行していますが、実際のコードは一行で書いています。htmlやcssの知識がある方は、お好みに合わせて適宜修正してください。

一行目の「width=”240″ height=”160″」の数値を変えると、サムネイル画像の横幅を変更することができます。こちらもお好みの数値でどうぞ。

ただ、あまり大きすぎると記事タイトルのスペースが減ってしまうので、ほどほどの大きさにしてください。縦幅も横との比率に合わせて変更します。

<div class="browsershot">[browser-Shot url="%url%" width="240" height="160"]</div>
<a href="%url%" target="_blank">%htmlEscapedText%</a>
<div class="divclear"></div><br/>

最後にstyle.cssに見栄えを調整するためのcssを追記します。cssの知識がある方は、お好みに合わせて修正してくださいね。

div.browsershot img {
	float: left;
	margin-right: 15px;
}

div.divclear {
	clear: both;
}

これでBrowser Screenshotsのシェア用リンクが表示されるようになりました。

Create Link 使い方

では、WordPressの投稿画面にBrowser Screenshotsのシェア用リンクを反映させてみましょう。

シェアしたい記事を表示させて、右上のCreate Linkアイコンをクリックすると、メニューに先ほど作成した「link」が追加されているはずです。

Create Link メニュー

「link」をクリックすると、シェア用リンク作成コードがクリップボードにコピーされるので、投稿画面のシェア用リンクを表示させたい場所でペーストしてください。

こんなコードが記事内に挿入されて、サムネイル画像付き記事リンクが作成できます。

<div class="browsershot">[browser-shot url="https://wind-mill.co.jp/iwashiblog/2013/07/browsershots/" width="240" height="160"]</div>
<a href="https://wind-mill.co.jp/iwashiblog/2013/07/browsershots/" target="_blank">ブログ記事をサムネイル画像付きで紹介 Browser Shots | ウィンドミル いわしブログ</a>
<div class="divclear"></div><br/>

その結果、文字とテキストリンクだった記事が・・・

ブログ記事サムネイル画像なし

こんな風に変わりました。サムネイルがあるとなかなかいい感じです。

ブログ記事サムネイル画像付き

前回までの記事も、さっそくサムネイル付きに変更しました。Browser ScreenshotsとCreate Linkを組み合わせて使うと、ブログが少しはビジュアルになりますよ。

今回のサムネイル画像付きリンクの作成方法は、りくまろぐさんの記事を参考にしました。ありがとうございます。

ブログ記事をサムネイル画像+はてブ数付きで紹介する方法・Chrome版
いろんな方々の有益なサイトやブログエントリーをシェア(紹介)したい時、当ブログではサムネイル画像と「はてなブックマーク」の数を付加して表示させています。今回はそのリンクを簡単に生成できる方法を紹介します。
タイトルとURLをコピーしました