カスタムフィールドを使ってリンク先のスクリーンショット画像を掲載させる方法

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方

ワードプレスにはスクリーンショットをキャプチャして画像にするプラグインは出ていますが・・・。

はじめに

ワードプレスではBrowser Shotsと言うプラグインを使えばリンク先のサイトのスクリーンショットを画像にして表示させる事が出来ますが、ショートコードでしか掲載出来ないので、知識のない人に触ってもらう場合はかなり使いにくいプラグインだなと感じました。

そこで私がスクリーンショットのキャプチャ画像を掲載させた方法をご紹介させて頂きます。

注意事項

  • heartrails.com自体が古いサイトなので、将来的に使えなくなる可能性がございます。
  • 一度画像を取得してしまうとリニューアルしても前のデザインが残ってしまいます。

今回やりたい事

今回私がやりたかったのは

  1. クライアントがURLを入力する
  2. そのURLのリンク先のスクリーンショット画像が表示される

たったこの2つの内容です。ただ、知識のない人でも簡単に出来ると言う点を考えるとショートコードを入力させるのは、ハードルが上がったり、上手く表示されない恐れがあったので、URLのみを入力する形になりました。

スクリーンショットを表示させる方法

私はワードプレスのAPIやプラグインなどは使わずに「HeartRails Capture」と言うサイトを利用させて頂きました。

http://capture.heartrails.com/

使い方は簡単です。

http://capture.heartrails.com/free?任意のURL

この形で画像を取得するだけで簡単にスクリーンショットを表示させる事が出来ます。試しに「yahoo」で試してみましょう。

http://capture.heartrails.com/free?http://www.yahoo.co.jp/

上記URLはyahooのキャプチャを取得している状態です。クリックするとどういった物が表示されるか一度確認してみましょう。

free

このようにyahooが取得できました。

ただ、よく見てみると現在のyahooと少しデザインが違っていませんか?

そうなんです。欠点としては一度キャプチャを取得してしまうとそのURL=この画像と言う形になってしまうのでデザイン変更やリニューアルには対応していないのです。

もし画像として表示させたい場合は

<img src="http://capture.heartrails.com/free?http://www.yahoo.co.jp/" />

このように入力すると表示させる事が出来ます。

サイズを指定しよう

「HeartRails Capture」で画像を取得する場合、取得する画像サイズを指定する事が出来ます。

<img src=" http://capture.heartrails.com/123x123?http://www.yahoo.co.jp/">

先程freeと表示されていた部分に画像サイズを入力しています。

123×123
123x123
200×300
200x300

こんな感じで最大400×300の画像サイズまで取得が出来ます。

カスタムフィールドに組み込もう

ここまで説明すると、もうわかるかと思いますがカスタムフィールドに組み込む場合は

<img src="http://capture.heartrails.com/300x300?<?php echo $cfs->get('url'); ?>" >

こんな感じです。
私が使っているカスタムフィールドは「Custom Field Suite」でurlの値を取得しています。

どうでしょうか?これなら簡単にキャプチャしたスクリーンショット画像をホームページ上に組み込む事が出来ましたよね。

以上でワードプレスでカスタムフィールドを使ってリンク先のスクリーンショット画像を掲載させる方法の説明を終了いたします。

さいごに

印象が違ってきます

今まではURLだけを掲載していたのですが、最近facebookなどで画像+タイトル+リンク先などセットで掲載している事が多く、当たり前になってきましたよね。

今回の方法は新しく稼げる副業用で考えているホームページで利用している内容なので、実際の動作なども確認済みです。

やっぱりキャプチャしている画像があるのと、ないのとではパッと見た時の印象に差がつきますね。リンク先だけだと味気ないですし。

最近は直感的に触れるサイトと言うのが非常に多くなってきているので、やっぱり画像関係は必須条件でしょう。

広告

関連記事

カスタムフィールドで入力したfeed情報を表示させる方法wordpress

ポータルサイトを作成する際に各店舗のブログ記事の新着情報を表示させたいなぁって事ありますよね?できち

記事を読む

Jetpackの通知機能

Jetpackのプラグインを導入する際に一つづつどういった機能なのかを調べてみています。最初は通知機

記事を読む

no image

cssのハックと確認方法

自分のホームぺージは見る人によってブラウザが異なります。表示が崩れている場合の事も考えて確認方法とc

記事を読む

カスタムフィールドの値も検索できるSearch Everything

カスタムフィールドを導入したものの、検索してもひっかからないですよね。 はじめに ワードプレスで

記事を読む

カスタムフィールドを全ページに表示させる方法

カスタムフィールドって特定のページにしか表示出来ない物だと思っていましたが、全ページに反映する方法を

記事を読む

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた! WEBフォントでttfはあるのに、それ以外がない事って多

記事を読む

スプレッドシートで見積書を作る時に役立つテクニック

スプレッドシートでもエクセルと同様に計算が出来ました はじめに googleの提供してい

記事を読む

管理画面でお問合せメールの確認が出来るTrust Form

ワードプレス内でお問合せフォームからのメールの内容を確認出来るプラグインがございます。 はじめに

記事を読む

投稿一覧にカスタムフィールドの情報を追加

カスタムフィールドを作ったものの、投稿画面側でどの記事にどの情報が入っているのかわからないので管理画

記事を読む

無料のFC2ショッピングカートの登録方法

今回は、ショッピングカートを利用したいけど月額費用が気になる方向けのFC2ショッピングカートの登録方

記事を読む

広告

Message

広告

現在の総記事数: 274件

gmailの裏技発見したったったwww

gmailの裏技発見したったったwww 登録したサイ

windows10でone driveを無効にする方法

こゆ意図せずに出てこられるのは非常に腹立たしい はじめに on

no image
WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう

ttfをwoffに簡単に変換できた!

ttfをwoffに簡単に変換できた! WEBフォントでttfはあ

ツイッターの最初に固定した内容を表示させる方法

ツイッターの初めに固定されたツイートと言う内容があると思いますが、これ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑