WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

2014/02/072021/06/21

リンクをスクショ付きで載せるのは面倒だった…

今までリンクを画像付きで紹介する時は、リンク先のスクリーンショットを撮る→Photoshopで画像編集して書き出し→ImageOptimでメタデータを削除して容量の軽量化→完成品をアップしてリンクを書く。というステップを踏んでいたのですが、もっと簡単に見栄えもよくWordPressのブログに掲載する方法があったので備忘録としてここに残したいと思います。お役に立てたら光栄です。

[adsense]

完成後のリンク表示

完成するとこんな風に、

とても見栄え良く載せる事が出来ます。さっそく導入してみましょう。

WordPressのプラグイン「Browser Shots」

名前の通りブラウザのスクリーンショットを撮ってくれるプラグインです。導入はとても簡単です。管理ページ→プラグイン→新規追加→検索から「Browser Shots」と入力。

一番上に出てくる「Browser Shots 作成者: Kevin Leary」をダウンロードして有効化してください。Browser Shotsのバージョンは今日[2014.2.8]時点で1.0です。

[adsense]

Google Chromeの拡張機能にある「Create link」

上記のリンク「Chorome ウェブストアー　Create Link」に飛んで右側の「CHOMEに追加」を押して拡張機能を追加してください。

Create Linkの設定

導入されたCreate Linkにリンクを載せる為の簡単なコードを設定します。

Chrome右上の「Create Link」ボタンを押して一番下の「Configure」を押す。するとCreate Linkのページがブラウザ上に表示されます。

Create Linkのページ上、左下の「＋」をクリックしてください。

クリック後枠が増えるので、左側の小さい窓には「Capture」（名前は好みで）左側に下記のコードをコピペしてください。

<div class="infobox"> <div style="float:left; margin-right:19px;"> 
 </div> <a style="color:#0070C5;" href="%url%" target="_blank">%title%</a> <a href="//b.hatena.ne.jp/entry/%url%" target="_blank"> <img src="//b.hatena.ne.jp/entry/image/%url%" alt="" border="0"> </a> <div style="clear:both;"> </div> </div> <br>

注意：<div style=”float:left; margin-right:19px;”>の中の19pxと云うサイズですが、このサイズは前回のこちらの記事
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法でカスタマイズしたStinger3の記事幅に合うように調整しています。ご自身のブログに合うように調整してください。最終的に下記の様になれば大丈夫です。

これでCreate Linkの設定は終わりです。

注意！　現在はwidth=”150″のあとに height=”100″も追加してあります。画像は修正前です。

[adsense]

スタイルシート（style.css)を編集

現状はこのように表示されます。

この状態でも十分にいい感じなんですが、もう少しだけ「ここはリンクです！」という主張が欲しので、今度はスタイルシート（style.css)に調整のコードを足していきます。

例：ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)
自分は編集にTransmit4を使っています。

style.cssの一番下に以下のコードを張ってください。

/*---------------------------------
Browser Shot
--------------------------------*/
.infobox {
    border: 1px dashed #ccc;
    padding: 15px;
}

.browser-shot img{
  box-shadow:2px 2px 3px #CCCCCC;
}

リンク全体を点線で囲って、スクリーンショットには影を付けて少しファンシーにしました。

どうでしょうか？ちょっとお洒落になったんじゃないかと思います。読んで頂いてありがとうございました。