Browser Shotsの使い方ーWordPressプラグイン【初心者向け】
WordPressのプラグイン【Browser Shots】の使い方を初心者向けに解説した記事です。キャプチャを自動生成し、サイトに反映することができます。ショートコードで挿入するだけで表示できるので、やり方を紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、簡単にキャプチャ画像を挿入できるプラグイン、Browser Shotsの使い方を紹介します。
なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。
田島メンター・・・
どうしたの？なんか疲れてるね！！
Webツールを紹介する記事を書いているんですけど、キャプチャ取る作業がとても面倒で・・・
あぁ、それなら便利なプラグインがあるよ！
え！？本当ですか！？
Browser Shotsとは
画面キャプチャを自動生成し、サイトに反映することができるプラグインです。
ハウツー系の記事を作成したり、ポートフォリオサイトを作成したりするときにWebサイトの画面をキャプチャとして使うことが多いと思います。ただし、キャプチャして、サイズを変更してと手間がかかりますよね。
このプラグインを使えば、WebサイトのURLと画像の横幅をショートコードを使って指定するだけでもキャプチャ画像を挿入できるので便利です。
また、このプラグインはキャプチャ画像が自動生成されるため、WordPressのために使っているサーバーに負荷をかけることもありません。
プラグインをインストールする
このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。
やり方がわからない場合はWordPressのプラグインをインストールする方法をご覧ください。
インストールができたら早速使ってみましょう。
キャプチャ画像の挿入方法は、「ショートコードを使う方法」と「ビジュアルエディタを使う方法」があるので、自分の好きな方法で使ってみてください。
[PR] WordPressで挫折しない学習方法を動画で公開中
キャプチャ画像をショートコードで挿入する
まずは1つ目の方法を紹介します。
記事投稿画面を開き、キャプチャ画像を挿入したい箇所に以下のショートコードを入力するだけです。
[browser-shot url=”http://techacademy.jp/magazine/” width=”500″]
赤字部分のURLとサイズを変更することで、簡単にキャプチャを作ることができます。
url=”●”にURLを、width=”●”にサイズを入力します。
実際に、WordPressの記事の投稿で入力してみましょう。
必ず、テキストモードになっていることを確認してから入力してください。
このようにショートコードを入力するだけです。
入力が完了したら、サイト上で確認してみましょう。
これで1つ目の方法は完了です。
キャプチャ画像をビジュアルエディタから挿入する
続いて2つ目の方法を紹介します。こちらはWordPressのビジュアルエディタを使います。
プラグインのインストールが完了すると、ビジュアルエディタにカメラのアイコンが追加されています。
このボタンをクリックすると、画像の横幅を設定するポップアップが表示されます。今回は600pxとしました。
「OK」をクリックすると、キャプチャするWebサイトのURLの入力が求められますので入力します。
さらにOKをクリックすると、自動でショートコードが入力されます。
やっていることはどちらも同じですが、ショートコードの扱いに慣れていない方は、2つ目の方法の方が簡単かもしれません。
今回の記事は以上です。
他のプラグインの使い方を学びたい場合は、All in One SEO Packの使い方も合わせてご覧ください。
ぜひ、WordPressの使い方を覚えましょう！
URLを指定するだけでキャプチャをとってくれるなんて、楽ですね〜
そうだね、いちいちメディアに保存したりする必要もないから、いいよね！
はい！
[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
