WordPress でリンク先サイトのキャプチャはこの方法にすれば幸せ〜w

ちょっとしたことなんですけど…

リンク先を紹介するのにキャプチャを使ったりするじゃないですか?Twitter でその話になりまして意外と知られていないようでしたのでポストしてみます!

※ Twitter より情報をいただけましたので一番下の「追記です!」をはじめにご覧ください。

わたしはこの方法をいつから使っているか不明ですけど、結構前から活用させていただいています!ブログはじめて何が苦痛だったかって言うとプレビューで何回も確認するのと、このリンク先のキャプチャ画像を用意する作業です!これだけですごく時間費やすし意外と疲れます><っ

まずこれらをやっつけないとブログなんて継続できないと思い、勢いで探してやっつけた記憶だけありますー!プレビューを何度も確認する方法は以前 WordPress でプレビューを何度も押しまくるそこのキミぃー で書かせていただきました。

で、本題のリンク先キャプチャのイメージを用意する方法なんですけど、今からご紹介する方法以前は普通にコマンドキー + シフトキー + 4 (Mac なので) などでキャプチャしてそれをフォトショップなどでリサイズして保存して WordPress にアップロードって感じでやっていました。数枚程度なら全然平気なんですけど、ウェブサービスの使い方説明とかだと十枚以上になったりして苦痛でした。

まず WordPress のプラグイン!

http://www.binarymoon.co.uk/projects/bm-shots-automated-screenshots-website/
WordPress Website Screenshot Plugin

こちらで配布されている「BM Shots」を使わせていただいています!これがないともうブログは出来ないって程、わたしは使っています〜w
使い方は簡単で、まずプラグインをダウンロードして WordPress に入れて有効にしてくださーい!
有効にしたらもう終わりです。あとは普通に投稿画面でこういう感じのショートコードを記入してみてください。

[browsershot url="http://www.google.co.jp/" width="300"]

このコードだと http://www.google.co.jp/ のキャプチャリンクを横幅 300 ピクセルで表示してくれます。

http://www.google.co.jp//
実際に表示するとこんな感じ

http://www.google.co.jp/
400 ピクセルとかでも OK!

1
2
3
<a href="http://www.google.co.jp/">
<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.google.co.jp%2F%2F?w=300" alt="http://www.google.co.jp//" width="300"/>
</a>

WordPress 側で出力してくれるソースはこんな感じです!
自動で URL エンコードしてくれているので便利w
かなり大きいサイズまで OK なので試してみてください!

もう少し便利に!

毎回ショートコード手書きも面倒なので AddQuicktag などのプラグインを使って手抜きすると良いです!

http://bueltge.de/wp-addquicktags-de-plugin/120/
WP – AddQuicktag (Plugin) – bueltge.de [by:ltge.de] 

AddQuicktag は有名なのでみなさん WordPress に入れられているんじゃないですか〜?
オロジナルでタグ登録したりショートコード登録したり便利ですよね!

AddQuicktag の設定
わたしの AddQuicktag の設定

300 の部分が BM Shots のショートコードです。
これ見て、「なんだよ、あまり活用してないんじゃない?」と思われた方、正解です〜w 正直 AddQuicktag は便利なんですけどわたしはあまり活用できていません〜w 意外と 投稿画面で URL 貼りつけてそれを選択して AddQuicktag で作ったボタンを押すのも面倒だったりしますw

もっともう少し便利に!

わたしはブログの更新は Google Chrome 使っていますので、Chrome のエクステンションでさらに手抜きしています〜w ブログの文章考えたりするだけで時間がかかるので、他のことには極力時間を消費したくありません〜w

Create Link - Chrome ウェブストア
Create Link – Chrome Web Store

さらに Create Link で手抜きします〜w
Chrome をお使いでしたら導入してみてください〜w
Create Link は今開いているページから情報を取得して事前に登録している型に整形してクリップボードにコピーしてくれます。

Create Link の設定
わたしが使っている設定です!

Create Link

とりあえずは真似して使って理解して変更してみてくださいw
上から説明します!

%title% %url%

↑ Title & URL: ページの タイトルと URL をコピー!

<a href="%url%" target="_blank" title="Link to %htmlEscapedText%">%htmlEscapedText%</a>

↑ Link: aタグでページのリンクをコピー!

[browsershot url="%url%" width="300"] %title%

↑ 300: BM Shots のショートコードをコピー!
 

以上ですー!

特に出し惜しみとかしてる訳ではなく、もう自分では当たり前で何が便利とか分からないのが正直なところです。他にも何か便利なことをしているのかもしれません自分では分かりません〜>< またこうゆう機会があったら書いてみたいと思いますー!色々試して便利に時間節約してみてくださーい!

追記です!

Twitter より情報いただけましたので追記させていただきます。 今回ご紹介させていただきました、WordPress の BM Shots のお話なんですが、この BM Shots は WordPress.com のサービスを使ってこのキャプチャを実現させています。ただ、このサービスが WordPress.com のオフィシャルなサービスではないみたいでいつまでも継続される保証も無いみたいなんです。詳しくはこちらの 秋元@サイボウズラボ・プログラマー・ブログ : WordPress.comの隠しAPIでスクリーンショットを撮る をごらんください。