WordPressにサムネイル付きリンクを貼る「Browser Shots」の使い方。と、CSSでちょこっとデザイン変更

WordPressの記事内でWEBサイトを紹介する時、リンク先のサムネイルがあったほうが見栄えが良くなりますよね。
でも、毎回スクリーンショットを撮ってphotoshopでリサイズして…とやっていると、どうしようもなく手間がかかります。

そんな時に使えるプラグインが「Browser Shots」です。
突然ですが新サービスのおしらせです ちびキャラ おまちしてます!

簡単なコードを書くだけでOK!

使い方は、説明の必要もないくらい簡単です。
  1. プラグイン新規追加で「Browser Shots」を検索
  2. 「いますぐインストール」して、有効化
  3. 記事の中のサムネイルを表示したい箇所に、以下のコードを書きます
    [browser-shot url="リンク先のURL" width="横幅"]
これだけ!

テトラクローマのサイトを、横幅300pxで貼りたいなーと思ったら、
[browser-shot url="http://tetrachroma.co.jp" width="300"]
と書くと、このようにリンクがはられたサムネイルが表示されます。

CSSでちょこっとデザインを変えてみる

コードを貼り付けたところには、以下のようなHTMLが記述されて、画像が表示されます。
<div class="browser-shot">
  <a href="http://tetrachroma.co.jp">
    <img width="300" alt="http://tetrachroma.co.jp" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Ftetrachroma.co.jp?w=300">
  </a>
</div>
外側のdivに、browser-shotというclass名が付けられていますので、 「.browser-shot」「.browser-shot a」「.browser-shot img」にCSSを適用すれば、 デザインもいろいろ変えることができちゃいます。

※今後のプラグインの仕様変更などによって、できなくなる可能性もあります。

CSSデザインのサンプル

それでは、簡単なCSSでちょこっと試してみましょう。

中央よせしてみる

.browser-shot{
  text-align:center;
}

borderをつけてみる

.browser-shot img{
  border:3px solid #43DBDB;
}

影をつけてみる

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

全部合わせて適用してみる

.browser-shot{
  text-align:center;
}
.browser-shot img{
  border-width:10px 10px 30px 10px;
  border-style:solid;
  border-color:#FFFFFF;
  box-shadow:0px 1px 4px #CCCCCC;
}

最後はなんとなくポラロイド風にしてみました。

CSSでのデザインはしなくても別に良いのですが、工夫次第でいろいろおもしろい表現ができそうです。