リンク先の画面キャプチャ(スクリーンショット)を自動で取得し表示してくれるWordPressのプラグイン「Browser Shots」がかなり便利だ

My FMZ Camera
My FMZ Camera / camerakarrie

 あるサイトを紹介する時に、リンクだけではなくそのサイトの画面キャプチャ(スクリーンショット)も掲載したい時があるだろう。そんな時、いちいち画面キャプチャ(スクリーンショット)を取得して加工してアップロードして・・・・・・とやるのはすごく面倒だ。

 そこで「Browser Shots」というプラグインの登場だ。

 この「Browser Shots」は、そんな手間を解消してくれる。なんと、URLを入力するだけで、自動で画面キャプチャ(スクリーンショット)を取得し表示してくれるのだ。もちろん無料、使い方や使用回数に制限はない。

■「Browser Shots」のインストール方法

 ダッシュボードのサイドバーから、「プラグイン」、そして、「新規追加」を選択する。「Browser Shots」で検索だ。検索結果に「Browser Shots」が表示されるので、「いますぐインストール」をクリックする。「プラグインを有効化」して、インストール完了! これですぐに使うことが可能だ、設定なんか必要ない。

■「Browser Shots」の使い方

 「投稿の編集」画面で、エディタを「ビジュアル」にする。すると、以下の「カメラアイコン」が追加されているのに気が付くはずだ。

browser_shots01

 この「カメラアイコン」をクリックすると、ウィザード形式のダイアログが表示される。まずは、表示したい画像の大きさ(300pxの場合300)を入力する。

browser_shots02

 次に、取得したい画面のURLを入力する。「このページでこれ以上ダイアログボックスを生成しない」のチェックボックスはGoogle Chromeの機能なのでこのプラグインには関係ない。

browser_shots03

 「OK」を押せば完了。以下のコードが記事に埋め込まれる。これだけの簡単な操作で画面キャプチャが表示できてしまう優れものだ。

browser_shots04

 私のようにエディタで「ビジュアル」ではなく「テキスト」を使っている人は、上記のコードを直接記事に書けば良いだけだ。以下のように。

[[browser-shot width="600" url="http://www.kevinleary.net"]]

ちなみに、上記の場合、以下のような表示になる。

[browser-shot width=”600″ url=”http://www.kevinleary.net”]

 記事を公開してすぐは読み込み中の黒い画像になっているが、しばらくしてリロードすればちゃんと表示される。とにかく、自分でわざわざ画面キャプチャ(スクリーンショット)を取得して、それをアップロードして・・・・・・といった手間が必要なくなるので、とても便利なプラグインだ。

■リンクが新しいウィンドウ(タブ)で開かないのがイヤ?

 このプラグインには設定がない為、リンクをクリックした時に新しいウィンドウで開かないことが煩わしい人は、プラグインを修正する必要がある。当サイト(Materialize)では実施済みだ。

 その方法だが、プラグインの編集画面で「browser-shots」→「browser-shots.php」の編集画面を開く。中ほど(56行目くらい)にある以下のソース部分に、「target=”_blank”」を追加する。以上、これだけだ。

【変更前】
[php firstline=”54″ highlight=”56″]
if ( !empty( $image_uri ) ) {
$image = ‘<img src="’ . $image_uri . ‘" alt="’ . $alt . ‘" width="’ . $width . ‘" class="alignnone" />’;
return ‘<div class="browser-shot"><a href="’ . $url . ‘">’ . $image . ‘</a></div>’;
}
[/php]

【変更後】
[php firstline=”54″ highlight=”56″]
if ( !empty( $image_uri ) ) {
$image = ‘<img src="’ . $image_uri . ‘" alt="’ . $alt . ‘" width="’ . $width . ‘" class="alignnone" />’;
return ‘<div class="browser-shot"><a href="’ . $url . ‘" target="_blank">’ . $image . ‘</a></div>’;
}
[/php]

(平成25年8月15日 アシベズヘア@ashibehair_m

リンク先の画面キャプチャ(スクリーンショット)を自動で取得し表示してくれるWordPressのプラグイン「Browser Shots」がかなり便利だ」への1件のフィードバック

  1. ピンバック: Jetpackの「共有ボタン」に「はてなブックマーク」を追加する方法(「Evernote」「mixiチェック」「mixiボイス」もついでに追加) | www.materialize.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です