目次
「Browser Shots」で外部サイトのスクリーンショットを手軽に追加
お役立ちサイトや面白いサイトなどを紹介するときにURLだけでなく、サイトのスクリーンショットがあると、記事の見栄えが良くなります。しかし、他のサイトのスクリーンショットを貼り付けたい場合は、自分でスクリーンショットを撮影し、必要があればその画像を加工し、アップロードし…と手間がかかります。さらに、そのサイトがデザインの更新が多いとそのスクリーンショットを張り替えるかそのままにするかという頭の痛い問題が発生します。
そんな時におすすめのプラグインが「Browser Shots」です。Browser Shotsはウェブサイトのスクリーンショットを撮る手間を解消してくれるプラグインです。ワードプレスの記事の中で他のサイトの紹介する場合にとても嬉しいプラグインです。しかし、Browser Shotsを使用すれば記事の中にショートコードを追加するだけで作業が完了します。
「Browser Shots」のインストール
ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Browser Shots」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。
これでBrowser Shotsのインストールは完了です。
「Browser Shots」の使い方
Browser Shotsの使い方は、画像のスクリーンショットを張りたい場所に次のようなショートコードを張るだけです。
[browser-shot url=”https://next-action.co.jp/ceoblog/blog/magazine/” width=”600″]
「Browser Shots」を使ってみる
先ほど作成したページを表示すると、記事内にサイトのスクリーンショットが表示されます。トリミングやメディアを追加などの手間がなく追加できました。
Browser Shotsでは、横幅以外にも次のパラメータを使用することができます。
- height – 画像の高さ
- alt – 画像の alt テキスト
- link – 画像のリンク先。指定がない場合はスクリーンショットのURL
- target – ブラウザーのターゲット。 新しいウィンドゥで開くには _blank を付ける
また、次のようにショートコードを書くことでスクリーンショットにキャプションをつけることもできます。
[browser-shot url=”https://next-action.co.jp/ceoblog/blog/magazine/” width=”600″]キャプション[/browser-shot]
「Browser Shots」でサイト紹介記事の手間を最小化
このプラグインを使って記事内に貼り付けたスクリーンショットの画像は定期的に更新されます。貼り付けたいスクリーンショットが頻繁に更新されるサイトでも、定期的に新しい画像に変わってくれるのは嬉しいポイントですね。また、スクリーンショットの画像は自分のサーバーに保存されているわけではないので、サーバーの容量が圧迫されることもありません。
Browser Shotsを使えば、手軽に他のサイト紹介のページを作成できるのでぜひ使ってみてください。
