Browser Shotsのサムネイルが縦長になっちゃった
Browser Shotsについてはワードプレスでサムネイル付きリンクを表示するのにやったことという記事に書きましたが、簡単にサムネイル付きのリンクが作成できるワードプレスのプラグインということで重宝していましたが、そのサムネイルがいつの間にか縦長に表示されていて・・・だいぶ前にプラグイン編集からbrowser-shots.phpを書き換える方法で対策したんですが、バージョンアップでそのphpファイルも更新されてしまったみたいです。
同じ方法で対策したらバージョンアップのたびにphpファイルを書き換えなくてはいけないし、面倒くさいので対策してみましたというお話。
Browser Shotsのサムネイルが縦長になってしまうことの対策
Create Linkの設定
今でのCreate Linkの設定は、サムネイルの幅を「width=”150″」などと設定していましたが、縦サイズは指定していませんでした。これを指定すればそのサイズのサムネイルが表示されるらしいので、Create Linkに新たなフォーマットを作成します。
上の画像がCreate Linkに新たに追加したフォーマットのキャプチャです。
コードはこちら↓
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> |
Create Linkの設定はこれで完了です。
参考サイト
Browser Shotsを使って今回の対策の参考にしたサイトを紹介します。
『Browser Shots』サイトのサムネイル付リンクを記事に貼れるWPプラグイン | タモレねっと
Create Linkの使い方やCSSの設定などは過去記事で触れていますので参考にしてみてください。
ワードプレスでサムネイル付きリンクを表示するのにやったこと | Webノートデス
いい感じで表示されるようになって一安心ですが、プラグインのアップデートって油断なりませんな。
ディスカッション
コメント一覧
まだ、コメントがありません