ワードプレスでサムネイル付きリンクを表示するのにやったこと
前記事の「ブログ開始でなぜかGIMPを使い始めたことについてのお話」にサムネイル付きのリンクを埋め込んでみたのですが、そこそこ手間取ったので備忘録を。
参考にしたブログはこちら
WordPressにプラグイン「Browser Shots」をインストール
まずはワードプレスにBrowser Shotsというプラグインをインストール。
Browser ShotsはURLの指定でサムネイルを自動で作成してくれるプラグインですが、サムネイルをクリックすると同じウインドウにリンク先が表示されてしまうため、別窓に表示するためにはプラグインの編集が必要。
プラグインの編集画面から
return ‘<div class=”browser-shot”><a href=”‘ . $url . ‘”>’ . $image . ‘</a></div>’;
の記述をさがして
return ‘<div class=”browser-shot”><a href=”‘ . $url . ‘” target=”_blank”>’ . $image . ‘</a></div>’;
と書きかえればOK。
Google Chormeにアドオン「Create Link」をインストール
Create Linkインストールページの右上の緑のボタンをクリックでアドオン追加。
ツールバーの右上にCreate Linkのアイコンが出るので、それをクリックして「Configure…」をクリック、設定画面が立ち上がります。
上の画像が設定し終わった後の画像。
Create Linkの設定
左下の小さな+ボタンからフォーマットを追加、名前は参考にしたブログそのままで「capture」としています。
記述は
<div class=”infobox”><div style=”float:left;”> [○rowser-shot url=”%url%” width=”150″] </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>
としてみました。
このブログの表示がリンクになってしまうのでbrowser-shotのbところを○にしています。
CSSに追加
スタイルシートに追記したのは以下
/* 枠で囲む */
.infobox {
background: #F5F5F5;
border: 1px dashed #ccc;
padding: 15px;
}
/* サムネイル画像 */
div.browser-shot img {
float: left;
margin-right: 15px;
}
/* 右側タイトル内の画像、はてブ */
div.bshotdetail span img{
float: none;
margin-left: 5px;
}
/* 回り込みの解除 */
div.divclear {
clear: both;
冒頭に紹介した2つのブログを参考にいろいろ試した結果これになりました。
実はCSSは苦手…
ここまでで一応の作業は終了。細かいところでいろいろとうまくいかないことがあったので、もし次の機会にはこのページを見れば同じ作業ができるようにしたつもりです。このブログもいつかこんなふうに紹介されるといいんですけどね。
ちなみにいままでブラウザはFirefoxを主に使用していましたが、Google Chormeの方が簡単そうだったのでこっちを使いました。