【WordPress】超簡単にキャプチャとサイト名を一緒に表示する方法

 2014/09/19

簡単にリンク先のスクショ画像を埋め込めるプラグイン[Browser Shots]。ショートコードを投稿内に記述するだけで簡単にキャプチャを表示してくれる訳ですが、サイト名は吐き出してくれません。

今回はBrowser Shotsのスクショ画像とChormeの拡張機能の合わせ技でキャプチャと、サイトタイトルを一緒に表示する方法をご紹介します。しかもキャプチャを作成するのが超簡単になります。

※プラグインアップデートにつき、思うようにいかなくなったので最新記事を書きました。


スポンサーリンク

Browser ShotsとChormeの拡張機能Create Linkを使用する

こんな感じのサイトリンクになります。レスポンシブに対しようする応しているのでPCで見ている方は画面の幅を小さくしてみてください。

画像部分はBrowser Shots、タイトル部分はChormeの拡張機能Create Linkで生成しています。それでは設定の手順です。

Browser Shotsのインストール

Browser Shotsを利用されていない方はプラグインをインストールしてください。プラグイン→新規追加で[Browser Shots]と入力、有効化。もしくはインストールする場合はこちらから。

Browser Shotsの画像を別ウィンドウで開くようにする

2015.1.30追記 プラグインアップデートによりこちらも別窓では開かなくなりました。

Browser Shotsで生成されるキャプチャ画像のコードにtarget=”_blank”を追加します。functions.phpに以下を追記します。

function browser_shot_target_blank( $content){
return str_replace( '<div class="browser-shot"><a href="', '<div class="browser-shot"><a target="_blank" href="', $content);
}
add_filter( 'the_content', 'browser_shot_target_blank', 9999);

プラグイン内のphpファイルを直接書き換えるやり方もありますが、プラグインのアップデート時にまた書き直さなければならなくなるので、functions.phpに記載した方がよさそうです。

こちらの記事を参考にさせていただきました。

style.cssに記述

Browser Shotsで作られる画像にはbrowser-shotというクラス名が自動で付いているのでそれを利用しスタイルを記述していきます。

以下はレスポンシブテーマSTINGER5への記述例です。

/*--------------------------------
キャプチャ Browser Shots
---------------------------------*/
.share_link {
width:85%;
margin: 30px auto;
padding: 20px;
border:double #CCC;
overflow: hidden;
}
.browser-shot{
text-align:center;
}
.browser-shot img{
box-shadow:0px 2px 4px #CCCCCC;
}
.link_title{
text-align:center;
line-height:150%;
overflow: hidden;
padding-top:20px;
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*--------------------------------
780px キャプチャ Browser Shots
---------------------------------*/
.share_link {
margin:30px auto;
}
.browser-shot{
margin:0 15px 0 0;
float:left;
text-align:left;
}
.share_link .link_title{
margin:0;
text-align:left;
}
/*-- ここまで --*/
}

このような感じでモバイル部分とPC表示部分に2か所スタイルを記述してください。ボーダーやバックグラウンドなどはお好みでどーぞー!

スポンサーリンク

2015.1.29追記 Browser Shotsのアップデートにより勝手に高さが指定される

プラグインのアップデートにより高さが450pxで指定されてしまいます。functions.phpに書き込むコードが良くわからなかったので取り急ぎプラグインファイルを直接編集する方法を記載しておきます。

プラグイン→インストール済みプラグイン→Browser Shots→編集→browser-shots/browser-shots.php

下記の部分を探してください。(だいたい一回スクロールしたあたりです)

  // Get attributes as parameters
extract( shortcode_atts( array(
'url' => '',
'width' => 600,
'height' => 450,
'alt' => '',
'link' => '',
'target' => '',
), $attributes ) );

この部分の‘height’ => 450,  を削除→ファイルを更新としてください。

この方法ですとプラグインがアップデートのたびに同じことをしていただかないといけません。functions.phpに記述するコード、どなたか教えてください。。。

いっそプラグインのバージョンを元にもどすという手もあります。下記のサイトが参考になります!

GoogleChromeの拡張機能Create Linkのインストール

カスタマイズ系のエントリーを見ていただいているような方はChrome使っている率が多いのではないでしょうか?もし使っていなければChromeをインストールしてください。

https://www.google.co.jp/chrome/browser/

Create Linkは下記URLをクリックし、「CHROMEに追加」

https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm

そうすると下図のようなマークのCreate LinkがChromeに追加されますので、【Configure】をクリック。

capture2

設定画面が出てきます。【+】をクリックすると入力欄が追加されますので、【Name】と【Format】を入力していきます。

capture3

【Name】は任意のものでOK。【Format】は下記をコピペします。

STINGER5の場合

<div class="share_link"[browser-shot url="%url%" width="150"]<div class="link_title"> <a href="%url%" target="_blank">%title%</a> <div class="clear"></div></div></div>

[]は半角にしてください

STINGER5でなければ< div class="clear" >< /div >のところを

<div style="clear:both;"></div>

としていただくか、cssにclear:bothを指定してください。

以上で設定は終わりです。次に使い方のご説明です。

キャプチャ画像の生成のしかた

まずはキャプチャしたいサイトを開きます(もちろんChromeで)。次にChromeのCreate Linkのアイコンをクリック。先ほど入力した【Name】が追加されていますのでそれを選択。

capture4

これで、コードがコピーされている状態になるのです。

あとは投稿の画面のキャプチャをいれたいところで、貼り付け(winだとCtrl+V)で一発で入力されます!超簡単!

capture5

Create Linkでサイト名を吐き出す方法はこちらの記事を参考にさせていただきました。

まとめ

Chromeの拡張機能ってほんと便利ですね!いろいろ勉強してみたい!

WordPress

Please comment!

  

Messege




10件のトラックバック