好きな事を好きな時に好きなだけする

そんな人生最高じゃないですか。

サイトの画面キャプチャを表示させるWordPressプラグイン「Browser Shots」

   

当サイトはWordPressのテーマとしてStingerを利用させて頂いているのですが、今日『もはやStingerには見えない!参考にしたいWordPressカスタマイズブログ集』という記事を見ていたとき、あることに気が付きました。

キャプチャ画像の表示がおかしい・・・

明らかにサイトが表示されていないキャプチャ画像なんですよね。
でも、わざわざそんなキャプチャ画像を載せるはずがないと思い調べて見ました。

Browser Shots

このプラグインを使っているようです。
Browser Shotsを利用することで、いちいちキャプチャ画像を取って保存してアップロードするという作業が必要なくなります。

特徴

  • ショートコードを読み込むだけでOK
  • キャプチャの横幅の指定が可能

導入方法

「プラグイン⇒新規追加」で「Browser Shots」と検索

インストールして有効化するだけでOKです。

使い方

先ほども言ったように、ショートコードを入れるだけで大丈夫です。

[browser-shot width="横幅" url="サイトURL"]

[browser-shot width="500px" url="http://rasukasasu.com/"]

実際に入れてみると

完全なキャプチャにはならないようなので、そこが気になる方はまた別の方法を考える必要がありそうです。

それと、このままでは味気ないので、少しカスタマイズしたいと思います。

デザインのカスタマイズ例

まずはどのようなhtmlが出力されるか知る必要があります。

[browser-shot width="500px" url="http://rasukasasu.com/"]

このショートコードの場合、出力されるのは下記になります。

<div class="browser-shot">
		<a href="http://rasukasasu.com/">
			<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Frasukasasu.com%2F?w=500&amp;h=450" alt="http://rasukasasu.com/" width="500" height="450" class="alignnone">
		</a>
</div>

このhtmlソースが出力されることを念頭に置いてhtmlとcssを加えていきます。

HTML例

<div class="capturebox">
       <div class="image">
             [browser-shot width="500px" url="http://rasukasasu.com/"]
       </div><!--/image-->
       <p><a href="http://rasukasasu.com/" target="_blank" title="好きな事を好きな時に好きなだけする">好きな事を好きな時に好きなだけする</a></p>
</div><!--/capturebox-->

CSS例

.capturebox{
        width:100%;
        background-color:#eaeaea;
}
.capturebox .image{
        margin:20px auto 0;
}
.capturebox .image .browser-shot{

}
.capturebox .image .browser-shot img{
	width:90%;
	padding:5%;
}
.capturebox p{
        text-align:center;
}

カスタマイズ結果

まとめ

サイト紹介の記事を書くときに重宝するプラグインになると思います。私も紹介するときには使わせて頂きたいなと。
ただ、キャプチャ画像が完璧に取得できていないことと、そのまま使うだけではどうしても味気ないという側面があるので、使い方に工夫は必要だと思います。
当サイトでもカスタマイズ例なんかを出していけると良いですね☆

 - WordPress

adsensepc

adsensepc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

サイト修正で使える!メンテナンス中の表示をしてくれるプラグイン”WP Maintenance Mode”

私の毎日の日課はネットサーフィンなんですが(笑)、今日いつものようにネットサーフ …

バズ部のブログが更新されないと思ったら、リニューアルしていた件について

バズ部はWEB周りの仕事をしている人なら知らない人がいないのではないかと思えるほ …

WordPressテーマをStinger3に変更した理由

目次1 以前使っていたテーマ1.0.1 アーカイブ、タグ、検索結果ページなどはN …

よくみかける「この記事を書いた人」を表示させるプラグイン “Fancier Author Box”

最近よくみかける「この記事を書いた人」の表示。 最初はそれほど気にならなかったの …

no image
少しだけレンタルサーバーについて話してみる

こんにちは。 今日はサイトの運営で欠かすことのできないレンタルサーバーについて話 …

【WordPressカスタマイズ】ブログをプチリニューアルしました

この記事でも紹介しているように、ワードプレスのテーマにSTINGERを使わせて頂 …

【永久保存版】Amazonアソシエイトのプラグイン「AmazonJS」導入の忘備録

ブログをやっている人でアマゾンアソシエイトのリンクを貼っている人は多いと思います …

WordPressの引越しをするなら「Duplicator」しかないでしょ!

WordPressのドメイン・サーバー移行を試みて諦めた人は多いのではないでしょ …

【忘備録】wa-track.comが出てきた!!その対処法とは

「運営しているサイトが急に表示されなくなり、wa-track.comが出てきた! …

【忘備録】WordPressで寄稿者でも画像をアップロードできる方法

セキュリティーの面を考慮して寄稿者としてユーザーを追加したのですが、その場合、デ …