カテゴリー
WordPress運営日誌»WP関連古記事»plug-in»

「3」キーを押すだけ！3秒で画像付きリンクを作る3つの方法

  • 作成者: 中川 勉
  • 2015-08-21公開 2019-12-22更新

2015-08-23_0213ブログを書く上で、あると便利なのが、キャプチャ画像のサムネイルが付いたリンクをすぐに作れる仕組み。Google Chrome拡張機能を使えばあっという間に出来ます。

ジェネレータで作ると5秒はかかるのでもっと効率化したい

キャプチャ画像のサムネイルが付いたリンクを作る方法として、最もポピュラーなのが、ジェネレーターの利用でしょう。

以前に、らふらくさんが、ジェネレータを強烈にお勧めされていましたが…

記事によると、以下の手順でキャプチャ画像付きリンクが生成されます。

  1. 紹介したいウェブページを発見
  2. そのウェブページのURLをコピー
  3. はてなブログ記事紹介ジェネレータにアクセス
  4. 紹介したいリンクURLを入力欄にペースト
  5. 「コード出力」をクリック
  6. コードが出力されるのを待つ
  7. コードをコピー
  8. ブログ記事編集画面でコードをペースト

確かに、HTMLを手打ちしてキャプチャ画像付きリンクを作るのに比べれば、はるかに便利です。

でも、今回紹介する方法なら、上の2.～7.までが、キーボードの「3」を押すだけで完了してしまうのです。つまり、

  1. 紹介したいウェブページを発見
  2. キーボードの「3」を押すだけで瞬間コード生成
  3. ブログ記事編集画面でコードをペースト

これでキャプチャ画像付きリンク完成です。

少々準備が必要ですけど、これなら十分取り組む価値があると思いませんか。

準備といっても、この記事に沿って作業するだけですけどね。

WordPressサイト以外でも使える方法

まずは、WordPressサイト以外でも使える、HTMLコード直貼りでリンクを表示する方法から説明します。

まず、Google Chrome拡張機能「Copy URL+」を導入

Copy URL+に行って、Chormeに追加ボタンをポチッと押せば導入完了です。

続いてChorme画面右上の横三本線のアイコンをクリック

2013-06-03_1642

次に、ツール→拡張機能をクリック。
2013-06-03_1645

拡張機能の画面になったら、Copy URL+を探して、「オプション｣をクリックします。

2013-06-03_1650

設定に使う変数の説明

設定画面は以下のような感じです。
2013-06-03_1653赤枠内は変数の表す内容を記述している重要部分です。（青枠は無視して大丈夫。）

  • ${sURL}‥goo.glを利用して短縮したリンク先URL
  • ${URL}‥短縮しないリンク先URL
  • ${title}‥リンク先title
  • ${text}‥選択したテキスト
  • ${n}‥改行

デフォルトでは、3行設定がされています。上から順に、以下のような意味合いになります。

  • （有効）Cキーで、短縮URLをクリップボードにコピー
  • （無効）Vキーで、ページタイトルをアンカーテキストにしたハイパーリンクを作るHTMLをクリップボードにコピー
  • （無効）Vキーで、「ページタイトル-短縮URL」の文字列をクリップボードにコピー

操作キーの設定を変更する

デフォルトのままだとVが2つの設定に使われているので、ダブらないように設定しなおしましょう。

まず、3行目の「V」をクリック
2013-06-03_1725

すると、「V」が「PressKey」に変化します。
2013-06-03_1726

ここで新しい操作キーを押します。（3列目なので3にしました。）これで、操作キーの変更は完了しました。
2013-06-03_1727

ついでに、1行目と2行目も操作キーを数字に変更します。
2013-06-03_1728

「Enable」に全てチェックを入れれば、「1」,「2」,「3」キー（テンキーではダメです）でそれぞれの内容がコピーされます。
2013-06-03_1753

では、試しに当サイトTOPページで、「1」,「2」,「3」キーを押すと、それぞれどうなるか確かめましょう。

1キーを押して貼り付けると短縮URL「http://goo.gl/●●●●」 が入力されます。

2キーを押して貼り付けると「<a href=”https://webshufu.com/”>ウェブシュフ</a>」が入力されます。

「3」キーを押して貼り付けると「ウェブシュフ- http://goo.gl/●●●● 」が入力されます。

キャプチャ画像付きリンク作成コードを設定

さて、動作確認が終わったので、いよいよサムネイルサイズのキャプチャー画像付きリンクをワンタッチで作成する為の設定をします。

個人的に「3」キーの設定はほとんど使わなさそうなので、ここをキャプチャー画像つきリンクコード生成用にしました。

まず、「${title}-${sURL}」をクリック
2013-06-03_1834

すると入力可能になります。

2013-06-03_1842

ここにサムネイルを作成する以下のコードを貼り付けます

<div class="thumb-link"><a href="${URL}"><img src="https://capture.heartrails.com/100x100/?${URL}" width="100" height="100" alt="" class="thumbnail"/>${title}<div style="clear:both;"></div></a></div>

CSSを準備

見た目を整えるために、自分が使っているテーマのstyle.cssに次のコードを入れました。（私の環境では機能しましたが、他の環境ではどうなるか分かりません。）

/****記事本文中のサムネイルリンク**ここから*****/
.thumb-link{
    clear:both;
    line-height: 1.3;
    padding:0px ;
    margin:0;
}
.thumb-link img.thumbnail{
    width:100px;
    height:100px;
    font-size:49px;
   float: left;
   margin: 0 15px 7px 0;
   border: 0px solid #ededed ;
    box-shadow: 4.2px 4.2px 2.8px gray; 
}
.thumb-link a {
    font-size: 17px;    
    margin:0;
    display:block;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
}
.thumb-link a:hover{
    opacity:0.5;
}
.thumb-link a:active{
    opacity:1;
}
/****記事本文中のサムネイルリンク**ここまで*****/

キャプチャ付きリンクを作ってみました

せっかくシステムが出来たので、早速使ってみましょう。

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフに行って「3」キーを押すと、クリップボードに以下のようなコードが生成されます。

<div class="thumb-link"><a href="https://webshufu.com/wordpress-plugin-hammy/"><img src="https://capture.heartrails.com/100x100/?https://webshufu.com/wordpress-plugin-hammy/" width="100" height="100" alt="" class="thumbnail"/>【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフ<div style="clear:both;"></div></a></div>

その後、WordPress投稿画面で、キャプチャ付きリンクを貼り付けたい場所でペーストします。

投稿プレビューをブラウザで確認すると、以下のような画像つきリンクが現れます。

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフ

キャプチャ画像付きリンクを作る仕組みを作っておけば、

  1. 紹介したいウェブページを発見
  2. キーボードの「3」を押すだけで瞬間コード生成
  3. ブログ記事編集画面でコードをペースト

これだけでキャプチャ画像付きリンクが出来ちゃいます。

ブロガーなら入れといて損はない仕組みだと思います。

WordPress利用者ならショートコードで生成しよう

ここまで説明した内容で、所要時間3秒でキーボードの「3」を押すだけでキャプチャ画像付きリンクを作る事は、間違いなく出来ます。

しかし、WordPressをお使いなら、もう一歩先に進みましょう。

メンテナンスのことを考えれば、ショートコードでキャプチャ画像付きリンクを作っておいた方が良いのです。

function.php に以下のコードを書き込みます。

//特定ウェブページへのリンクをキャプチャ画像付きで表示
function image_link_capture($atts, $content = null ) 
{
    extract(shortcode_atts(array(
        'url' =>'',
        'title' =>'',
    ), $atts)); 
    $hyouji.='<div class="thumb-link"><a href="'.$url.'">';
    $hyouji.='<img src="https://capture.heartrails.com/100x100/?'.$url.'" width="100" height="100" alt="" class="thumbnail"/>'.$title;
    $hyouji.='<div style="clear:both;"></div></a></div>';
    return $hyouji;
}
add_shortcode('img-link-capture', 'image_link_capture');

なお、CSSについては、WordPressサイト以外でも使える方法の場合と同じCSSをお使いのテーマのstyle.cssに書き込んでください。

Google Chrome拡張機能「Copy URL+」の設定変更

Chorme画面右上の横三本線のアイコンをクリック→ツール→拡張機能→Copy URL+のオプションと進み、
2015-08-23_0042

「3」キーの設定（赤枠内）をクリックして、下記を入力します。（大カッコは半角で入力し直してください）

［img-link-capture url="${URL}" title="${title}"］

これで、ショートコードでキャプチャ画像付きリンクを作る準備は整いました。

キャプチャ付きリンクをショートコードで作ってみました

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフに行って「3」キーを押すと、クリップボードに以下のようなショートコードが生成されます。（大カッコは、全角で表示していますが、実際は半角で生成されます）

［img-link-capture url="https://webshufu.com/wordpress-plugin-hammy/" title="【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフ"］

任意の場所にペーストして、投稿プレビューをブラウザで確認すると、以下のような画像つきリンクが現れます。

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy

自サイトの記事へのリンクには記事中の最初の画像をアイキャッチ画像として表示するショートコード

さらに一歩進んだショートコードを紹介します。

自サイト内の投稿へのリンクの場合は、以下のような手順で「記事本文で最初に出てくる画像」付きリンクが作られます。

  1. URLから投稿IDを取得
  2. そのIDを利用して「記事タイトル」と「記事本文で最初に出てくる画像のURL」をデータベースから取得
  3. 「記事本文で最初に出てくる画像」をサムネイルサイズにカット
  4. サムネイルサイズの「記事本文で最初に出てくる画像」付きリンク生成

つまり、自サイト内の投稿への画像付きリンクには、記事執筆時に苦労して選んだ画像が使われることになります。

それ以外の場合は、これまで紹介した方法と同様、キャプチャ画像付きのリンクになります。

function.php に以下のコードを書き込みます。

//他サイトへのリンクの場合はキャプチャ画像付きで表示
//自サイト内の投稿へのリンクの場合は、投稿本文の最初にある画像をサムネイルサイズにカットしたものをつけて表示
function my_get_archive_thumbnail($my_str)
{
    $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿に画像があるか調べる
    if ( preg_match( $searchPattern, $my_str, $imgurl )) 
    {//投稿に画像がある場合の処理
         $ogimage=$imgurl[2];
         $ogimage=preg_replace("/-[0-9]+x[0-9]+/","",$ogimage);
         $ogimage=str_replace(".jpg", "-150x150.jpg", $ogimage);//150x150は「設定」⇒「メディア」のサムネイルのサイズに合わせる
         $ogimage=str_replace(".png", "-150x150.png", $ogimage);//150x150は「設定」⇒「メディア」のサムネイルのサイズに合わせる
         $ogimage=str_replace(".gif", "-150x150.gif", $ogimage);//150x150は「設定」⇒「メディア」のサムネイルのサイズに合わせる
    } 
    else 
    {//投稿に画像が無い場合、

         $ogimage=get_stylesheet_directory_uri()."/no_image.png";
    }
    return $ogimage;
}
function image_link($atts, $content = null ) 
{
    extract(shortcode_atts(array(
        'url' =>'',
        'title' =>'',
    ), $atts)); 
    if(url_to_postid($url)==0)
    {   
    $hyouji.='<div class="thumb-link"><a href="'.$url.'">';
    $hyouji.='<img src="https://capture.heartrails.com/100x100/?'.$url.'" width="100" height="100" alt="" class="thumbnail"/>'.$title;
    $hyouji.='<img src="http://b.hatena.ne.jp/entry/image/'.$url.'" alt="" />';
    $hyouji.='<div style="clear:both;"></div></a></div>';
    }
    else
    {
    $id = url_to_postid($url);
    $args = array( 'post__in' => array($id) );
    $myimgposts = get_posts( $args );
    foreach ( $myimgposts as $myimgpost ) : setup_postdata( $myimgpost ); 
    $ogimage=my_get_archive_thumbnail($myimgpost->post_content);
    $hyouji.='<div class="thumb-link"><a href="'.get_permalink($id).'">';
    $hyouji.='<img src="'.$ogimage.'" width="100" height="100" alt=""  class="thumbnail"/>'.get_the_title($id).'｜ウェブシュフ';
    $hyouji.='<div style="clear:both;"></div></a></div>';
    endforeach; 
    }
    return $hyouji;
}
add_shortcode('img-link', 'image_link');

なお、CSSは、WordPressサイト以外でも使える方法の場合と同じCSSをお使いのテーマのstyle.cssに書き込んでください。

Google Chrome拡張機能「Copy URL+」の設定変更

Chorme画面右上の横三本線のアイコンをクリック→ツール→拡張機能→Copy URL+のオプションと進み、

「3」キーの設定（赤枠内）をクリックして、下記を入力します。（大カッコは全角で表示されていますが、入力時は半角に直してください）

［img-link url="${URL}" title="${title}"］

キャプチャ付きリンクをショートコードで作ってみました

早速自サイトの記事へのリンクを作りましょう。

webshufu.com内の投稿【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy｜ウェブシュフで「3」キーを押し、webshufu.com投稿編集画面で任意の場所にペースト・保存すると、以下のようなリンクが現れます。

【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy

リンクについている画像がキャプチャではなく、投稿の一番最初に出てくる画像になっているのがわかるでしょうか。

一方、webshufu.com内であってもトップページやカテゴリページで「3」キーを押した場合は、キャプチャ画像のついたリンクが出来ます。

また、webshufu.com外のページで「3」キーを押した場合も、キャプチャ画像のついたリンクになります。

リンク先を更新⇒リンク元も即時更新

このショートコードの特徴は、自サイト内の別記事に向けて張ったリンクのメンテナンスがとても楽になることです。

リンク先の記事タイトルや「記事本文中の最初の画像」が変更されたら、リンク元の記事にある画像つきリンクの部分も即時自動更新されます。

メンテナンスが行き届きやすくなるので、ユーザビリティーにもSEOにも悪くないはず。

とりあえずジェネレーターより楽な仕組みはあった方がいい

所要時間3秒！「3」キーを押すだけで画像付きリンクを作る3つの方法を紹介しました。

短時間で画像付きのリンクを作れる仕組みはメリットが大きいです。

是非導入を！！



「「3」キーを押すだけ！3秒で画像付きリンクを作る3つの方法」への9件の返信

素晴らしい記事をどうもありがとうございました。
私のブログにこの記事のこと紹介させて頂きました。

これからも楽しく拝読させて頂きます。

Jn様、記事を紹介頂き有難うございます。
これからも頑張ります。

WordPress – プラグイン – サムネイル付きのリンクを表示 Browser Shotsの発言:

[…] 簡単!爆速!5秒!キャプチャ画像付きリンクをWordPressとChrome拡張のコンボで作る｜ウェブシュフ […]

wordpressプラグインBrowser Shotsでサムネイル付きリンクをみんながやっているみたいに表示させる | Free!なランサー3の発言:

[…] 簡単!爆速!5秒!キャプチャ画像付きリンクをWordPressとChrome拡張のコンボで作… […]

[…] 「3」キーを押すだけ！3秒で画像付きリンクを作る3つの方法｜Web Shufu […]

素晴らしい！
この3秒画像つきリンクを導入して自分のブログがとても見やすく、作成も楽になりました！
本当にありがとうございます。
大感謝！！

gekkoさん、お役に立ててうれしいです。

作業が楽になるとブログもはかどりますよね。

WordPress – プラグイン – サムネイル付きのリンクを表示 Browser Shots | ピエールの日記　by pierre　長尾和美の発言:

[…] 簡単!爆速!5秒!キャプチャ画像付きリンクをWordPressとChrome拡張のコンボで作る｜ウェブシュフ […]

コメントを残す

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