読者です 読者をやめる 読者になる 読者になる

ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

キャプチャー画像付きでリンクを作成できる「Browser Shots + Create Link」の表示がおかしくなった。

SPONSORED LINK

f:id:gadgerepo:20151124225926j:plain

岡田斗司夫、どうするんだろ……。@gadgerepoです。こんにちわ。

拙著ブログでは記事紹介などでリンクを貼るとき、キャプチャー画像付きリンクにしています。
その方法は@dmgadget_さんのコチラの記事

dmgadget.info

を拝見し、参考にさせていただきました。
WordPress のプラグイン「Browser Shots」と、Chrome の拡張機能「Create Link」を併用し、スタイルシートでいい感じに装飾した仕上がりとなっており、大変重宝しています。

wordpress.org

【追記】 現在、当ブログは WordPree ではなく「はてなブログ」で運用しております。ご了承ください。

m(__)m

〜WordPressカスタマイズ備忘録 その12〜

ところが最近、何かの拍子に突然リンクのキャプチャー画像が縦に長くなるようになってしまいました。

f:id:gadgerepo:20151124230056p:plain

wser Shots のアップデートによる仕様変更か、Create Link の問題なのか原因はわかりませんが、ともかく見栄えがよくありません(´・ω・`)
あれやこれやと試行錯誤した結果、Browser Shots のキャプチャー画像のサイズを、縦横ともに指定してあげると問題は解決しました。
具体的には、Create Link の「Configuration」画面で

f:id:gadgerepo:20151124230129p:plain

今までは

<div class="infobox"><div style="float: left; margin-right: 19px;"> [browser-shot width="150" url="%url%"] </div><a style="color: #0070c5;" href="%url%" target="_blank">%title%</a><div style="clear:both;"></div></div>

としていたところを、browser-shot width="150"の後ろに height="150" を追加して

<div class="infobox"><div style="float: left; margin-right: 19px;"> [browser-shot width="150" height="150" url="%url%"] </div><a style="color: #0070c5;" href="%url%" target="_blank">%title%</a><div style="clear:both;"></div></div>

に変更しました。縦、横のサイズは数値を調節してお好みに合わせてください。

f:id:gadgerepo:20151124230248p:plain

まとめ

一時はどうなることかと思いましたが、何とかなりました。
自分への備忘録として、また同様にお困りの方への参考までに、ここに書き記します。
さぁ、筆者はこれから全ての記事を修正する作業が……。