サムネイル付きのリンクを簡単に貼る技(別ウィンドウで開くバージョン)

画像つきのリンク

http://soccer-tellrist.net/

サッカー語り人

↑こういうの見たことありますよね。
 WordPress & chromeという環境の人なら、これがめちゃくちゃ簡単に作れます。

必要なもの

①WordPressのプラグイン「Browser Shots」

 WordPress管理画面の左端のプラグイン新規追加を開きます。
browser-shots
 「Browser Shots」で検索すれば出てくると思いますので、インストール有効化して完了。

②chromeの拡張機能「Create Link」

Create Link
↑ここをクリックして、右上の無料という所からCreate Linkをchromeに追加する。

 すると、chromeの右上に「Create Link」のアイコンが出てくると思います。
createlink
 このアイコンをクリックすると、一番下にconfigure…というのがあると思うので、それをクリック。Create Linkの設定画面になります。
createlink2
ここで、をクリックしてformatを追加します。

Nameは何でも良いです。
 ぼくは「thumbnail」にしています。

Formatの欄に、以下のコードを貼り付けます。


[browser-shot url="%url%" width="150"]
%title%

createlink3
 これで設定は完了です。

Create Linkの使い方

 まずchromeで、リンクしたいサイトを開きます。
createlink4 サイトを開いた状態で右上のCreate Linkのアイコンcreatelinkiconをクリックします。
 すると、先ほど設定したやつが一番下にあると思いますので、それをクリックすれば(別に何もならないんですが)、サムネイル付きリンクコードが、クリップボードにコピーされます。

 後はそれを記事にペーストすればOKです。

Browser Shotsをちょっといじる

 Browser Shotsは有効化しさえすれば何もしなくても、OKです。

 が、一つオススメのカスタマイズがあります。
 デフォルトでは、記事に表示されるサムネイルをクリックした時に、リンク先のページが同じウィンドウで開きます。

 できれば別ウィンドウ(タブ)で開いてくれた方がよくないですか?
 別ウィンドウ(タブ)で開いて欲しいという人は、ちょっとだけBrowser Shotsをカスタムしましょう。

Browser Shotsを編集

 WordPress管理画面の左にあるプラグインインストール済みプラグインを開きます。
 Browser Shotsの編集をクリック。
browsershots2

 すると、このプラグインのコードをいじれる画面が開きます。

 変なところをいじるとプラグインがおかしくなるので、慎重にして下さい。
 心配な人は全て選択してどこかにコピペしておくことをオススメします。
browsershots31

 ちょうど真ん中辺りに、こんなコードがあると思います。↓

if ( !empty( $image_uri ) ) {
    $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
    return '<div class="browser-shot"><a href="' . $url . '">' . $image . '</a></div>';
}

 ここに「target=”_blank”」をねじ込みます。

if ( !empty( $image_uri ) ) {
    $image = '<img src="' . $image_uri . '" alt="' . $alt . '" width="' . $width . '" class="alignnone" />';
    return '<div class="browser-shot"><a href="' . $url . '" target="_blank">' . $image . '</a></div>';
}

 「”」とか「.」とか「’」とかをよく見て、場所を間違いないように入れて下さい。
 挿入するのがややこしかったら、まるまるコピペでもいいです。どちらにせよ間違わないように慎重に。

 以上でBrowser Shotsプラグインのカスタムも完了です。

 ではどうぞご自由に、サムネイル付きリンクを簡単に貼りまくってください。

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメント

コメントを残す



CAPTCHA


*

関連記事

iPhone・iPad用、超個性的な本革ケース見つけた!
【WordPress】訪問別PVが増える魔法のコードと、タグの使い方
テーマを自作したい人必見!WordPressの基本的な仕組み
ブログ用Google+ページの作り方と、そのフォローボタンをフォロワー数と共に表示する方法
noimage
AdSenseのクリック率(CTR)が、倍増した理由を大公開
noimage
noimage
noimage
noimage
あなたは解ける?!史上最高のひらめきクイズ!
noimage
全くの初心者がWordPressでブログを始める方法
wp_is_mobile()でAdSenseの表示を制御する
noimage

Menu

HOME

TOP