Webノートデス

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

      2015/05/19


前記事の「ブログ開始でなぜか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の方が簡単そうだったのでこっちを使いました。

 

 - WordPress

ad

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

無料のワードプレステーマ”STINGER5″を選んだ理由

STINGERを選んだ理由、それは… なんて大げさな理由は何もなくて、いろいろな …

ワードプレスにFacebookのPage Pluginを設置したときの備忘録

ワードプレスにFacebookのPage Pluginを設置 このブログではない …

ロリポップでWordPressログイン画面へのアクセス制限

ロリポップにインストールしていたワードプレスにログインしたら、いきなりこんなペー …

コアサーバーにワードプレスをインストールするのが簡単になった

コアサーバーにワードプレスをインストール コアサーバーのPHPのセーフモードが解 …

ヘディングタグに背景をつけたくて苦悩した俺の一日

Chill (tcd016)というワードプレステーマを使って完全趣味で運営してい …

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

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

さくらサーバーにワードプレスをクイックインストールしてみた

さくらサーバーでワードプレスをクイックインストール さくらサーバーのクイックイン …

WordPressインストール後、最初に設定したプラグイン

WordPressをインストールしてまず考えるのは、最初に何のプラグインを使えば …