2015/01/08

目次
sponsored link
Browser Shots
いろいろなブログを見ていると、他サイトの紹介に、そのページのスクリーンショットのようなサムネイルがついていることがあります。
でも、自分でPCのPrintScreenを撮って画像ソフトで加工するのは手間が掛かりますよね。
そんなときに、コピペ作業だけでサムネイル付のリンクを作ってくれるのが、このプラグインです。
Google Chromeとの連携になります。
インストールと有効化
ダッシュボード→プラグイン→新規追加を選んでください。
その後、"Browser Shots"で検索→いますぐインストール→有効化します。
Create LinkをGoogle Chromeにインストール
プラグインと連携するGoogle Chrome拡張機能です。
下記リンクよりインストールしてください。
↓このようなサムネイル付リンクを作成するためにインストールが必要になります。
Create Linkの設定
詳しい設定方法は、下記Principle公式サイトで紹介されていますが、Browser Shots Version1.2以降ではheightの設定が必要になります。
指定していないと、やたら縦長のサムネイルになってしまうため、Create Linkのソースと同時に過去記事のソースをすべて直しました(^^;
下のコードは、Principle公式サイトで公開されているソースにheight指定を追加したものです。
サムネイル付きのリンクを簡単に貼る技(別ウィンドウで開くバージョン) | 初心者にもおすすめ!無料 WordPress テーマ Principle
1 2 3 4 5 6 7 |
<style>div.browser-shot a img{border:1px solid #888;}</style> <div style="float:left; margin-right:10px;"> [browser-shot url="%url%" width="150" height="112"] </div> <a style="color:#0070C5;" href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" alt=""> </a> <div style="clear:both;"></div> |
Browser Shotsの設定は不要
有効化したら、あとはコードを貼るだけです。
そのコードも、1度Create Linkに設定するだけ。
紹介したいサイトを開いて、Create Linkをクリックしたら、記事にペーストするだけなのです。
実にお手軽、他サイト紹介にはおすすめのプラグインです!
過去記事にheight指定をするには
これは手作業になってしまいます。
投稿一覧画面の検索欄にbrowser-shotと入れて投稿を検索します。
出てきた一覧の編集リンクをShiftキーを押しながら別窓で開いてください。
Shift+F3でブラウザの検索を開き、同様にBrowser-shotと入力してください。
ヒットしたところの近くにwidth="150"]とありますので、
width="150" height="112"]と修正して更新します。
これを検索一覧に出ている記事1つずつすべてに行います。
後はCreate Linkのソースを先述のコードに修正しておけば今後は問題ありません。