ぼくのあしあと

ゲームやネット小説など、日々興味や関心をもったことを綴る

【WordPress】サイトの紹介に便利なプラグイン「Browser Shots」のおすすめな使い方

      2015/11/10

browser_shots01

サイトを紹介するときって、いかに魅力的に紹介するかが難しいですよね。

文章でそのサイトの魅力を100%引き出せればいいのですが、そんなに簡単ではありません。

しかし、サイトのスクリーンショットを貼るだけで簡単にそのサイトの雰囲気を伝えることが出来ます。

文章を使って伝えるよりもよっぽど楽ですし、何より記事の見栄え自体も良くなります。

本日はサイトを紹介するときに、簡単にスクリーンショットを撮ってくれるWordpressプラグインを紹介しようと思います。

「Browser Shots」の使い方

ブログの記事を書くときに他人のサイトを紹介したい時ってありますよね。テキストリンクだけではちょっと味気ないですし。

はてなブログのようなサムネイル形式で紹介したい、というとき便利なプラグインが「Browser Shots」です。

「Browser Shots」というプラグインはキャプチャーしたいサイトのURLを指定するだけで、自動的にスクリーンショットを撮ってくれる便利なプラグインです。

 

 

細かいオプションの指定によって自分の好きなように表示させることも出来ます。

試しに僕のサイトで使ってみると下のようになります。

僕の軌跡~ぼくのあしあと~

使い方はとっても簡単で、「Browser Shots」をインストールすると記事投稿画面のメニューに新しいボタンが追加されます。

赤く囲ったボタンから

赤く囲ったボタンが追加される

そのボタンを押すと、下のようなオプション画面が開かれます。

オプション画面

オプション画面

オプション画面ではスクリーンショットについて様々な細かい設定ができます。

一番重要なのは一番上のImage Urlで、ここにキャプチャーしたい画像のURLを指定します。

基本はURLさえ指定すればスクリーンショットは表示されるのですが、もっと細かい指定も出来ます。

例えば、デフォルトのスクリーンショッサイズが600×450というのは結構大きいので、サイズを変えたい方はここを任意のサイズに変更しましょう。

以下、他の項目の説明です。

  • Image Link Url (optional):スクリーンショットとは違う画像を使いたい時に、その画像のUrlをここで指定します。
  • Image Width:スクリーンショットの横幅を指定
  • Image Height:スクリーンショットの縦幅を指定
  • Image Caption:スクリーンショットの説明を指定
  • Image Alt Text:スクリーンショットが表示されない時に表示するテキストを指定
  • Open Link in new Window?:新しいウィンドウで開くかどうかを指定

オプションを指定してOKボタンを押せば、マウスカーソルの位置に下のようなショートコードが挿入されます。

[browser-shot url=\"http://lang-8.com\" width=\"280\" height=\"210\" alt=\"「Lang-8」 公式サイト\" target=\"_blank\"]「Lang-8」 公式サイト[/browser-shot]

 

これで終了です。ね、簡単でしょ?

「Browser Shots」のおすすめの使い方、注意点

オプション項目が多すぎてどうすればいいかわからない!という方のために、おすすめのオプション設定を紹介します。

あくまで一例ですので、自分のサイトに合うように最適化しましょう。

まず、一番悩ましいのがスクリーンショットのサイズです。大きすぎると主張が激しすぎるし、小さすぎると細かくて見難い。

デフォルトのサイズは600×450となっていますが、これは明らかに大きすぎます。

縦横の比が4:3であることを考慮していろいろ試してみたところ、280×210が一番無難に思えます。

280×210はこんな感じ

280×210はこんな感じ

CaptionとAltについては、紹介したいサイトのタイトルが良いでしょう。

ここで注意して欲しいのは、Altは必ず設定してください。

リンクが画像となっているのでAltで書かれた内容がアンカーテキストとなります。

検索エンジンはAltで書かれた内容をリンク先の内容だと判断するので、設定している方がSEO的に良いと考えられます。

まとめ

「Browser Shots」にもっと早く気がついていれば、今まで書いてきた記事でも使用していたのにと後悔するほど便利です。

めんどくさいですが過去記事を修正するときに、順次リンクを画像に置き換えていこうと思っています。

リンクが文字か画像かどうかで記事の見栄えが全然異なるので、みなさんもサイトを紹介するときはぜひ「Browser Shots」を使ってみてください。

 

The following two tabs change content below.
XZ

XZ

ゲームとWeb小説が何よりも好き。自分の趣味を共有、共感できたらと思いブログをはじめた。

 - ブログ