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リンクですが・・・
こちらはサムネイル画像付きリンクです。単なるURLリンクより見栄えしますよね。
なお、この記事の内容はChromeをメインブラウザでお使いの方向けです。
FirefoxやSafariには「Make Link」というCreate Linkと同様の拡張機能があるので、Chrome以外のブラウザをお使いの方は、Make Linkを使ってください。
WordPressプラグイン Browser Screenshots
まずはWordPressプラグインBrowser Screenshotsをインストールしましょう。
ダッシュボード左メニューの「プラグイン」から「新規追加」を選択して、検索窓に「Browser Screenshots」と入力してから「プラグインの検索」をクリックします。
Browser Screenshotsが出てくるので「いますぐインストール」をクリックして「プラグインを有効化」してください。
ちなみに「Browser shots」で検索すると「Browser Screenshots」が出てきました。プラグインの名称は変わっていますが、新旧どちらで検索しても大丈夫です。
Browser Screenshotsの使い方
当然ながら、Browser Screenshotsは単独でも使えます。サイトのスクリーンショット画像入りリンクを作成すると、こんな感じになります。
スクリーンショットは投稿ページと固定ページの両方で作成できますが、作成用のアイコンはビジュアルエディターのみ表示され、テキストエディターでは使えません。
では、サイトのスクリーンショットを作成してみましょう。リンクを挿入したい場所を選び、ビジュアルエディタの「Browser shots」アイコンをクリックします。
ここにサイトのURLや画像のサイズを入力します。キャプションは無しでも構いません。あとは入力しなくてもOKです。最後に「OK」をクリックします。
記事内に以下のショートコードが挿入されるので、プレビューでサイトのスクリーンショットを確認してください。画像のサイズは適宜調整してください。
[browser-shot url="https://wind-mill.co.jp/" width="600" height="450"]ウインドミル | 京都のホームページ制作・ウェブマーケティング[/browser-shot]
Chrome拡張機能 Create Linkをインストール
続いて、Chromeの拡張機能 Create Linkをインストールします。下からChromeウェブストアの「Create Link」に直接リンクしていますよ。
右上の「Chromeに追加」をクリックすると、Create Linkのインストールが始まります。
上部に「Create Link」を追加しますか？と表示されたら「拡張機能を追加」をクリックします。
「Create LinkがChromeに追加されました」のメッセージと共に、右上に小さなアイコンが追加されました。
Create Link 設定
次にCreate Linkの設定です。右上のCreate Linkアイコンをクリックするとメニューが表示されるので、一番下の「Configure…」をクリックしてください。
Create Linkの設定画面が表示されるので、「Formats」欄の下にある「+」をクリックします。
新しいコードが追加できるので、シェア用リンクのコードを作成します。まずは左の項目に好きな名前を入れてください。ここでは「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」が追加されているはずです。
「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を組み合わせて使うと、ブログが少しはビジュアルになりますよ。
