サイト紹介のサムネイルをかっこ良く表示してくれるWPプラグイン「Browser Shots」用のブックマークレット作りました。

大分前に、男子ハックさんにBMShotについて聴いたのを思い出しました。えーすけです。

その時、使い方について記事にしたのですが、消えてしまったものですのでもう一度。そしてショートコードを作成するブックマークレットを作ったので公開します。

「Browser Shots」とは？

「Browser Shots」とは、サイトのリンクをサムネイル付きで生成してくれるプラグインです。サムネイルにはWordPressの何かが使われているようなのですが、いまいち理解出来てません。

まぁ、簡単にこんな感じです。

MasterPeace21

男子ハック

Gori.me

導入方法

プラグイン新規追加から検索で出てきます。

コードの書き方(ショートコード)

widthは自由に決めて問題ありません。結構簡単ですね。

いちいち書くのは面倒だからブックマークレット作った

JavaScriptを勉強し始めて2日目です。ブックマークレット作りましたｗ超カンタンなやつですけど、BrowserShotsを使う場合はあると便利だと思います。

widthは550pxで設定してあります。コードから直接変更可能ですのでご自由にどうぞ。

ShotHTML (直リンク)

ShotHTML (iPhoneなどよう)

直リンク用は、そのままブックマーク登録してくだせい。
iPhoneとかようは、お決まりのパターンで登録後にURL最初の「http://masterpeace21.com?」を削除してください。

コード修正について

基本的に、widthくらいしか変えるところはないと思います。

簡単なコードなので、widthを変えたい場合は「550px」で検索を掛けて好きな数字にしてください。

CSSについて

そのまま貼り付けても、CSSを適用していないとダサイです。

良くわかってないですが、一応、CSS例を下記に示しますので参考にどうぞ。

//PC
.browser-shot img{
     width:550px;
     margin:20px auto 20px;
}
//SmartPhone (PCとスマートフォンでThemeを使い分けてる場合)
.browser-shot img {
     width: 95%;
     margin: 20px auto 20px;
     display: block;
}

終わりです。大したものでは無いですが、使ってくれる方いましたら嬉しいです。

あと、なにか不具合ありましたらご連絡ください。

追記・・・

まてよ。よく考えたらShotHTMLじゃおかしいか。ショートコード生成してるんだもんな。ShotShortになるのか？ShotCode？

• 
• ツイート
•