Browser Shotsでサイトの紹介ページを手間なく作成

「Browser Shots」で外部サイトのスクリーンショットを手軽に追加

お役立ちサイトや面白いサイトなどを紹介するときにURLだけでなく、サイトのスクリーンショットがあると、記事の見栄えが良くなります。しかし、他のサイトのスクリーンショットを貼り付けたい場合は、自分でスクリーンショットを撮影し、必要があればその画像を加工し、アップロードし…と手間がかかります。さらに、そのサイトがデザインの更新が多いとそのスクリーンショットを張り替えるかそのままにするかという頭の痛い問題が発生します。

そんな時におすすめのプラグインが「Browser Shots」です。Browser Shotsはウェブサイトのスクリーンショットを撮る手間を解消してくれるプラグインです。ワードプレスの記事の中で他のサイトの紹介する場合にとても嬉しいプラグインです。しかし、Browser Shotsを使用すれば記事の中にショートコードを追加するだけで作業が完了します。

「Browser Shots」のインストール

ワードプレスの管理画面で、プラグインの追加画面を開きます。左上の検索フォームでキーワードに「Browser Shots」と検索します。検索結果が表示されたら、[今すぐインストール]ボタンをクリックしてインストールし、次に有効化をします。

これでBrowser Shotsのインストールは完了です。

「Browser Shots」の使い方

Browser Shotsの使い方は、画像のスクリーンショットを張りたい場所に次のようなショートコードを張るだけです。

<p> </p> <p><img class="alignnone size-large wp-image-73613" src="https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2-1024x270.png" alt="" width="680" height="179" srcset="https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2-1024x270.png 1024w, https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2-170x45.png 170w, https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2-300x79.png 300w, https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2-320x84.png 320w, https://next-action.co.jp/wp-content/uploads/2018/01/821bb338fd947827b39623633c531d93-2.png 1361w" sizes="(max-width: 680px) 100vw, 680px" /></p> <p> </p> <h2>「Browser Shots」を使ってみる</h2> <p>先ほど作成したページを表示すると、記事内にサイトのスクリーンショットが表示されます。トリミングやメディアを追加などの手間がなく追加できました。<br /> <img class="alignnone size-large wp-image-73614" src="https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1-1024x695.png" alt="" width="680" height="462" srcset="https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1-1024x695.png 1024w, https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1-170x115.png 170w, https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1-300x204.png 300w, https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1-320x217.png 320w, https://next-action.co.jp/wp-content/uploads/2018/01/21b7d43a9a294704ccded62e4adcc02c-1.png 1361w" sizes="(max-width: 680px) 100vw, 680px" /></p> <p> </p> <p>Browser Shotsでは、横幅以外にも次のパラメータを使用することができます。</p> <ul> <li>height – 画像の高さ</li> <li>alt – 画像の alt テキスト</li> <li>link – 画像のリンク先。指定がない場合はスクリーンショットのURL</li> <li>target – ブラウザーのターゲット。 新しいウィンドゥで開くには _blank を付ける</li> </ul> <p>また、次のようにショートコードを書くことでスクリーンショットにキャプションをつけることもできます。<br /> [browser-shot url=”https://next-action.co.jp/magazine/” width=”600″]キャプション

「Browser Shots」でサイト紹介記事の手間を最小化

このプラグインを使って記事内に貼り付けたスクリーンショットの画像は定期的に更新されます。貼り付けたいスクリーンショットが頻繁に更新されるサイトでも、定期的に新しい画像に変わってくれるのは嬉しいポイントですね。また、スクリーンショットの画像は自分のサーバーに保存されているわけではないので、サーバーの容量が圧迫されることもありません。

Browser Shotsを使えば、手軽に他のサイト紹介のページを作成できるのでぜひ使ってみてください。

投稿者プロフィール

FUJI
FUJI
WEBライター/コーダー@クリエイティブセンター柏。
お気軽にご連絡ください
ワードプレスやWebマーケティングにおける様々な課題(集客向上、成約向上、費用削減、運営改善)をお聞かせください。初回のお打合せは無料です。こんな事できるかな?こんな小さな仕事も頼めるかな?と迷われている方もお気軽にお問合せ下さい。
お申込み・お問合せ
トップへ戻る