【改訂版】URLからスクリーンショットを取得する「Browser Shots」プラグインの使い方+おまけ

Browser Shots プラグインの使い方+おまけ アイキャッチ
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

この記事は、
2012年10月3日に投稿した
[WordPress]URLからスクリーンショットを取得する「BM Shots」プラグインの使い方+おまけ|趣味の半畳
の改訂版です。

「BM Shots」は非公式プラグインだったのですが、
2012年10月15日に WordPress公式プラグインディレクトリより
「Browser Shots」という名前で配布が開始されたようです。

この記事は、旧記事内のプラグインダウンロード先と
スクリーンショットを取得するショートコードを、すべて「Browser Shots」プラグインに対応するものに置き換え、一部内容を修正したものです。

———- ———- ———-

当ブログの過去記事

http://miso0nok.net/2012/03/web/my-bookmark201203/

Web制作関係あたりで個人的にブクマしてるサイトさんまとめ | 趣味の半畳

こちらの記事はじめ、当ブログ内あちこちで多用している、リンク先のスクリーンショット。
このスクリーンショットを取得するWordPressプラグイン、「Browser Shots」の使い方を改めてまとめてみました。

当方のWordPressのバージョンは 3.4.2-ja です。

「Browser Shots」プラグインとは

URLのスクリーンショットを取得するプラグインです。

例えば、

https://evernote.com/intl/jp/
Evernote
こんなふうにサムネイルつきのリンクを貼ることができます。

ダウンロード、インストール方法

ダウンロードは

http://wordpress.org/extend/plugins/browser-shots/
Browser Shots(リンク先:WordPress公式プラグインディレクトリ)
または、
ダッシュボード>プラグイン>新規追加 から、「Browser Shots」で検索します。


管理画面から検索したところ。

zipファイルを保存→解凍して、お使いのWordPressテーマのpluginディレクトリにFTPでアップロードします。

ダッシュボード>プラグイン>インストール済みプラグイン から、有効化します。
有効化したら準備完了。

「Browser Shots」の使い方

WordPressの投稿画面から、
スクリーンショットを取得したい箇所に、以下のショートコードを入力するだけ。

[browser-shot url="ここにスクリーンショットを取得したいURL" width="スクリーンショットの横幅(px)"]

当ブログのトップページのスクリーンショットを、横幅400pxで取得したい場合はこんなふうに入力します。

[browser-shot url="http://miso0nok.net/" width="400"]

 ↓

そのショートコードで表示されるスクリーンショットは、こんな感じ。

http://miso0nok.net/

記事の公開直後は、すぐにスクリーンショットが表示されない場合があります。(キャプチャ画像)

こんな感じにくるくる「読み込み中ですよープレビュー作ってますよー」な表示の場合は、しばらく待つと読み込まれています。

また、記事公開前のプレビュー画面では、読み込み画面も表示されずに空白になることがありますが
これも、記事を公開してしばらくすれば読み込まれるので、大丈夫です。

当記事の公開前プレビュー画面。スクリーンショットのエリアが真っ白に。↓

ちなみに空白のエリアはクリックできます。ちゃんとリンク先にジャンプします。

スクリーンショット表示のカスタマイズ

さて、これで晴れてスクリーンショットが取得できたわけですが
表示がなんだか気に入りません。

左寄り、背景色が同色の場合に埋もれてしまっているので
ここをcssで表示をいじってやります。

対応してるクラスを見つけたので、使用しているテーマの style.css に記述。
こんな風にしてみました。

/* スクリーンショットを中央に */
.browser-shot {
	text-align:center;
}

/* スクリーンショットの画像周りにボーダーを表示 */
.browser-shot img {
	border: 3px dotted #cccccc!important;
}

style.css を上書きしたあとの表示はこんな感じに。

ちょっとはわかりやすくなったかな?と。

おまけ:Browser Shotsを気軽に使う

これでリンク先のスクリーンショットを取得できるようになったわけですが、
いちいちショートコードをがちゃがちゃ打ち込むのは、めんどくさい。
タイプミスとか考えると、そりゃあもうめんどくさい。

なので、ボタン1つでショートコードを勝手に入力してくれるようにします。

使うのは「AddQuicktag」プラグイン。
こちらは公式プラグインなので、ダッシュボード>プラグイン>新規追加 からも追加できます。

有効化したら、ダッシュボード>設定>AddQuickTag から設定をします。


(クリックで拡大)
設定画面はこんな具合になってます。


「ボタン名」に自分がわかりやすいボタンの名前、
「開始タグ」に Browser Shots のショートコードをコピペします。

で、ここで注意すべきところ。
右側チェックボックスにチェックするのを忘れないでください!

これを忘れると、
「あれっ登録したはずなのに投稿画面でボタンが出てこないあれっあれっ」
っていやな汗をかくことになります(体験談)。

「post」 → 投稿記事
「page」 → 固定ページ にチェックを入れると、それぞれのHTMLエディタでボタンが表示されるようになります。
ビジュアルリッチエディタをお使いの方は、「ビジュアルエディタ」へのチェックも忘れずに。

終わりましたら、ページ中ほどの「変更を保存」ボタンをクリックします。

投稿の新規追加、を開いてみると

Browser Shots のショートコードを一発で入力するボタンが追加されました!

これで記事作成がらくちんになりますね。ヤッター。
ついでによく使うhtmlタグなんかも AddQuickTag にまとめて登録しておくと便利です。

おわりに

一部、旧記事の画像を使いまわしています。ごめんなさい。

「BM Shots」プラグインを使われている方がもしこの記事を読まれることがあったら、
ぜひ「Browser Shots」にのりかえることをお勧めします。

プラグインは公式から配布されているものを使うのがいいと思うんだ。

【改訂版】URLからスクリーンショットを取得する「Browser Shots」プラグインの使い方+おまけ” への4件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。