ブログ記事をサムネイル画像付きで紹介 Browser ShotsとCreate Link

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

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

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

Browser Shots と Create Link を使うと、リンク先の記事をサムネイル画像付きで紹介することができます。

スポンサーリンク

リンクの見栄えにこだわるなら Browser Shots と Create Link を使おう

いわしブログでは、いろんな記事をシェアして紹介するようにしています。気になることもGoogleで検索すれば、便利な記事がたくさん出てくるので、ありがたく使わせていただいてます。皆様にはホントに感謝です。

さて、せっかくよい記事を紹介するなら、見栄えにもこだわりたいですよね。WordPressのプラグイン Browser Shotsと、Chromeの拡張機能 Create Linkを使えば、サムネイル画像付きで記事を紹介することができます。

論より証拠、これを見てください。以下は紹介記事ですが、単なるリンクよりこっちのサムネイル画像付き記事のほうがかっこいいでしょ。

http://rikumalog.com/wordpress/bmshots-createlink.html

ブログ記事をサムネイル画像+はてブ数付きで紹介する方法・Chrome版 : りくまろぐ

今回は上記の記事を参考に、WordPressのプラグイン Browser ShotsとChromeの拡張機能 Create Linkを使って、サムネイル画像付きの記事を紹介できるようにしました。

りくまろぐさん、ありがとう!!

なお、この記事はChromeをメインブラウザでお使いの方向けです。FirefoxやSafariにも「Make Link」というCreate Linkと同様の拡張機能があるので、Chrome以外の方はMake Linkを使ってください。

WordPressプラグイン Browser Shots

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

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

WordPressプラグイン Browser Shots検索

Browser Shotsが出てくるので「いますぐインストール」をクリック。

WordPressプラグイン Browser Shots 今すぐインストール

「プラグインを有効化」をクリックして、Browser Shotsが使えるようにしてください。

WordPressプラグイン Browser Shots プラグイン有効化

スポンサーリンク

Chrome拡張機能 Create Link

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

https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja

Chrome ウェブストア – Create Link

右上の青いボタン「無料」をクリックすると、Create Linkのインストールが始まります。

Chrome拡張機能 CreateLinkインストール

「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 Shotsのシェア用リンクが表示されるようになりました。

スポンサーリンク

Create Link 使い方

では、さっそくWordPressの投稿画面にBrowser Shotsのシェア用リンクを反映させてみましょう。シェアしたい記事を表示させて、右上の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/>

実際はこんな感じで表示されます。

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

ブログ記事をサムネイル画像付きで紹介 Browser ShotsとCreate Link | ウィンドミル いわしブログ

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

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

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

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

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

これからの記事紹介リンクは、サムネイル画像付きで決まりですね!

コメント

タイトルとURLをコピーしました