Browser Shotsの使い方ーWordPressプラグイン【初心者向け】

WordPressのプラグイン【Browser Shots】の使い方を初心者向けに解説した記事です。キャプチャを自動生成し、サイトに反映することができます。ショートコードで挿入するだけで表示できるので、やり方を紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回は、簡単にキャプチャ画像を挿入できるプラグイン、Browser Shotsの使い方を紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター・・・

田島悠介

どうしたの?なんか疲れてるね!!

大石ゆかり

Webツールを紹介する記事を書いているんですけど、キャプチャ取る作業がとても面倒で・・・

田島悠介

あぁ、それなら便利なプラグインがあるよ!

大石ゆかり

え!?本当ですか!?

 

Browser Shotsとは

画面キャプチャを自動生成し、サイトに反映することができるプラグインです。

ハウツー系の記事を作成したり、ポートフォリオサイトを作成したりするときにWebサイトの画面をキャプチャとして使うことが多いと思います。ただし、キャプチャして、サイズを変更してと手間がかかりますよね。

このプラグインを使えば、WebサイトのURLと画像の横幅をショートコードを使って指定するだけでもキャプチャ画像を挿入できるので便利です。

また、このプラグインはキャプチャ画像が自動生成されるため、WordPressのために使っているサーバーに負荷をかけることもありません。

Browser_Shots9

 

 

プラグインをインストールする

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

やり方がわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

インストールができたら早速使ってみましょう。

キャプチャ画像の挿入方法は、「ショートコードを使う方法」と「ビジュアルエディタを使う方法」があるので、自分の好きな方法で使ってみてください。

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

キャプチャ画像をショートコードで挿入する

まずは1つ目の方法を紹介します。

記事投稿画面を開き、キャプチャ画像を挿入したい箇所に以下のショートコードを入力するだけです。

[browser-shot url=”http://techacademy.jp/magazine/” width=”500″]

Browser_Shots
赤字部分のURLとサイズを変更することで、簡単にキャプチャを作ることができます。

url=”●”にURLを、width=”●”にサイズを入力します。

 

実際に、WordPressの記事の投稿で入力してみましょう。

必ず、テキストモードになっていることを確認してから入力してください。

Browser_Shots3

 

このようにショートコードを入力するだけです。

Browser_Shots2

 

入力が完了したら、サイト上で確認してみましょう。

Browser_Shots4

これで1つ目の方法は完了です。

 

 

キャプチャ画像をビジュアルエディタから挿入する

続いて2つ目の方法を紹介します。こちらはWordPressのビジュアルエディタを使います。

プラグインのインストールが完了すると、ビジュアルエディタにカメラのアイコンが追加されています。

Browser_Shots5

 

このボタンをクリックすると、画像の横幅を設定するポップアップが表示されます。今回は600pxとしました。

Browser_Shots7

 

「OK」をクリックすると、キャプチャするWebサイトのURLの入力が求められますので入力します。

Browser_Shots6

 

さらにOKをクリックすると、自動でショートコードが入力されます。

Browser_Shots8

やっていることはどちらも同じですが、ショートコードの扱いに慣れていない方は、2つ目の方法の方が簡単かもしれません。
今回の記事は以上です。

他のプラグインの使い方を学びたい場合は、All in One SEO Packの使い方も合わせてご覧ください。

ぜひ、WordPressの使い方を覚えましょう!
 

大石ゆかり

URLを指定するだけでキャプチャをとってくれるなんて、楽ですね〜

田島悠介

そうだね、いちいちメディアに保存したりする必要もないから、いいよね!

大石ゆかり

はい!

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。