Browser Shotsのサムネイルが縦長になっちゃった

2015/07/08

Browser Shotsについてはワードプレスでサムネイル付きリンクを表示するのにやったことという記事に書きましたが、簡単にサムネイル付きのリンクが作成できるワードプレスのプラグインということで重宝していましたが、そのサムネイルがいつの間にか縦長に表示されていて･･･だいぶ前にプラグイン編集からbrowser-shots.phpを書き換える方法で対策したんですが、バージョンアップでそのphpファイルも更新されてしまったみたいです。

同じ方法で対策したらバージョンアップのたびにphpファイルを書き換えなくてはいけないし、面倒くさいので対策してみましたというお話。

Browser Shotsのサムネイルが縦長になってしまうことの対策

Create Linkの設定

今でのCreate Linkの設定は、サムネイルの幅を「width=”150″」などと設定していましたが、縦サイズは指定していませんでした。これを指定すればそのサイズのサムネイルが表示されるらしいので、Create Linkに新たなフォーマットを作成します。

上の画像がCreate Linkに新たに追加したフォーマットのキャプチャです。

コードはこちら↓

<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>

<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>

Create Linkの設定はこれで完了です。

参考サイト

Browser Shotsを使って今回の対策の参考にしたサイトを紹介します。

『Browser Shots』サイトのサムネイル付リンクを記事に貼れるWPプラグイン | タモレねっと

Create Linkの使い方やCSSの設定などは過去記事で触れていますので参考にしてみてください。

ワードプレスでサムネイル付きリンクを表示するのにやったこと | Webノートデス

いい感じで表示されるようになって一安心ですが、プラグインのアップデートって油断なりませんな。

- WordPress　プラグイン

Message コメントをキャンセル

: 記事タイトルの後ろにサイトタイトルを表示しない設定方法

記事タイトルの後ろにサイトタイトルが表示されてしまうのは嫌？ All in On …

: Crazy Lazyの使い方｜画像読み込み遅延プラグインは数あれど…

「画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます …

: YouTube埋め込み動画が重いのでYoutube SpeedLoadというプラグインを使ってみる

ワードプレスを使用している別ブログで、YouTube動画を埋め込んだまとめ記事を …

: 初心者がAll in One SEO Packを使う時の設定はどうする？

ブログやサイト運営をやっていく中で、検索経由のアクセスアップを狙うならばSEOは …

: WPXユーザーにおすすめ｜ShortPixel Image Optimiserで画像圧縮

「画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます …

: All in one SEO packでXMLサイトマップを作成したときに出た警告

このサイトにAll in one SEO packでXMLサイトマップを作成した …

: All in One SEO PackのXML Sitemap設定

Googleウェブマスターツールにサイトを登録したら、サイトマップを送信します。 …

: 記事投稿時のAll in One SEO Packの設定の方法

All in One SEO Packをインストールすると、投稿の編集画面に以下 …

: All In One WP Security & Firewallでワードプレスのセキュリティ強化

このブログも立ち上げて数ヶ月が経過、まだ記事数も少ないですがポツポツとコメントが …

: ワードプレスの記事をツイッターにランダム投稿したくてやったこと

ワードプレスの記事をツイッターに投稿すればちょっとアクセスが増えるんじゃね？なん …

PREV: FasebookページのURLを変更する方法
NEXT: ワードプレスにFacebookのPage Pluginを設置したときの備忘録

Browser Shotsのサムネイルが縦長になっちゃった

Browser Shotsのサムネイルが縦長になってしまうことの対策

Create Linkの設定

参考サイト

ad

ad

Message コメントをキャンセル

関連記事