[WordPress]URLからスクリーンショットを取得する「BM Shots」プラグインの使い方+おまけ ※追記有

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

【20121107追記】——————–

2012年10月15日より、BM Shotsプラグインは
WordPress公式ディレクトリから、Browser Shots という名前で配布されています。

公式版プラグインでは、スクリーンショット取得のショートコードが変更されたようです。
公式版プラグインのショートコードは

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

です。

BM Shotsをお使いの方は、公式ディレクトリから配布されている「Browser Shots」に乗り換えられることを強くお勧めいたします。

以下の記事は非公式版の解説記事となります。
記事内のショートコードは、非公式版のものです。
記事内のスクリーンショットは、公式プラグインを使用して取得しています。

公式版プラグイン「Browser Shots」の解説記事は
【改訂版】URLからスクリーンショットを取得する「Browser Shots」プラグインの使い方+おまけ
こちらをご覧ください。

———- 追記ここまで ———-

当ブログの過去記事

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

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

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

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

「BM Shots」プラグインとは

WordPressの隠れ機能を使って、URLのスクリーンショットを取得するプラグインです。

例えば、Googleにリンクを貼りたいときに

http://www.google.co.jp/

こんなふうにサムネイルつきのリンクを貼ることができます。

ただし、先に述べたとおり「隠し機能」を使っているため、WordPressの仕様が変われば、突然使えなくなってしまうプラグインです。
そして公式のプラグインではないため、インストールおよびご使用は自己責任でお願いいたします。

【20121107追記】
2012年10月15日より、BM Shotsプラグインは
WordPress公式ディレクトリから、Browser Shots という名前で配布されています。

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

ダウンロードは以下のリンクからどうぞ。(2012.10.03現在/リンク先英語サイト)
※WordPress公式ディレクトリからBrowser Shotsをダウンロードすることを強くお勧めします。

http://www.binarymoon.co.uk/projects/bm-shots-automated-screenshots-website/
BM Shots
「Download BM Shots here.」というリンク先をクリックすると、zipファイルのダウンロードが始まります。

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

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

「BM Shots」の使い方

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

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

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

[browsershot url="http://miso0nok.net/" width="400"]

 ↓

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

http://miso0nok.net/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

おわりに

すごく長い記事になってしまいました。まとめるのが下手ですみません。
間違いがありましたらこちらのページ内問い合わせフォームからご連絡いただけると嬉しいです。

某方のお役にたてば幸い。
タダヤス(miso0nok)でした。

[WordPress]URLからスクリーンショットを取得する「BM Shots」プラグインの使い方+おまけ ※追記有” への1件のフィードバック

コメントを残す

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

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