外部サイトのスクリーンショット付きリンクを自動で作成できるWordPressプラグイン – Browser Shots

ブログの記事を書く際に外部ホームーページのスクリーンショット付きのリンクを作成しようと思ったことはありませんか?

外部サイトを紹介する際にただ単にリンクを張り付けただけではなんか味気ないと思い、ホームページの運営者なら誰でもスクリーンショット付きのリンクで紹介したいと考えた事があると思います。自分でスクリーンショットを作るには自分で画面のハードコピーを作る作業が必要なので、こういったツールは非常に役に立ちます。

ここでは、「Browser Shots」という外部サイトのリンクをWordPressのビジュアルエディタ(投稿画面)から簡単に追加するプラグインのご紹介です。

Browser Shots – 簡単にスクリーンショットサムネイル、リンクを作成できるプラグイン

上のリンクはBrowser Shotsを使って作成したスクリーンショットです。これはテキストエディタからURLを入力するだけで作成したサムネイル画像です。特に自分で画面コピーを取って作成したわけではありません。

それでは、実際にBrowser Shotsをインストールする所から、実際に使用するところまで説明していきます。

Browser Shotsのインストールから使用方法まで

それでは具体的なインストール方法から、使い方まで説明していきます。

まずは、WordPressへのインストールですが、これは管理画面の「プラグイン-新規追加」から検索窓に「Browser Shots」と入力することで、該当プラグインが出てきますので、そこから追加インストールすることができます。
プラグインのインストール方法がわからない方はこちらのページで詳しく書いています

さて、インストールが終わったら次は使用方法ですが、実際にスクリーンショットを作成するのはビジュアルエディタ(投稿画面)から行います。

edit_browser-shots01

実際のサムネイル作成は新規投稿画面を開きエディタから行います。

プラグインを追加する事により、上の写真のように「Browser Shots」のボタンが追加されていますので、ボタンを押します。

edit_browser-shots02

ボタンを押したら、URL、サムネイル画像のサイズ等を入力する画面が開きますので、入力していきます。入力項目は以下の通りですが、サムネイルリンクを作成するには最低限以下の4項目を設定すれば問題ありません。

Image Url:サムネイル画像を作成したいリンク先のURL
Image Width:サムネイル画像の幅
Image Height:サムネイル画像の高さ
Open Link in new Window:リンク先のページを別ウィンドウで開きたい時はチェックを入れます
※Image Caption:サムネイル画像の下に文字を表示したい時はこの項目に文字を記入します

edit_browser-shots04

実際にはビジュアルエディタに上記のようなコードが表示されますが問題ありません。この状態で公開すれば投稿ページにリンク付のスクリーンショット画像が表示されます。

ためしにグールルのホームページでスクリーンショットを作ってみた

以下のような設定でスクリーンショットを作って見ました。

edit_browser-shots03

表示結果はこんな感じになります。↓

グーグル検索エンジン

どうでしょうか、とても簡単にスクリーンショット画像を作成できました。

流れは以上となりますが、ページのレイアウトをスタイルシートやテーブルを使用する事により、見た目のレイアウトを変更する事ができます。

このページの最初に使ったサムネイルが左にあり、右にテキストリンクがあるものはテーブルを使用しています以下に実際に使ったコードを記載しますので、参考にして使用してみて下さい。

Browser Shotsサムネイル画像設定例

実際にテーブルレイアウトで作ったものが以下のものです。

グーグル検索エンジンへのリンク

先ほどのものと比べてレイアウトが整い、見えやすくなったかと思います。

では実際のコードを以下に記載します。あくまでも以下の設定は一例ですので、自分の好きなレイアウトなどを考えて、いろいろと試してみるのもいいのではないでしょうか。

HTMLコード

<table class="type01">
  <tbody>
   <tr>
    <th scope="row">Browser Shotsのコード</th>
    <td><a href="http://HTTPS://WWW.GOOGLE.CO.JP/">右側のテキスト</a></td>
   </tr>
  </tbody>
</table>

スタイルシート(CSS)

table.type01 {
 border-collapse: collapse;
 text-align: left;
 line-height: 1.5;
 border-top: 1px solid #ededed;
 border-bottom: 1px solid #ededed;
}
table.type01 th {
 width: 30%;
 padding: 10px;
 vertical-align: top;
}
table.type01 td {
 width: 70%;
 padding: 10px;
 vertical-align: top;
}

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です