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

公開日: : 最終更新日: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などで画像+タイトル+リンク先などセットで掲載している事が多く、当たり前になってきましたよね。

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

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

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

広告

関連記事

バリューコマースアフィリエイトの登録方法

バリューコマースでアフィリエイトを始めたい方へ はじめに バリューコマースでアフィリエイトを

記事を読む

tinymce advancedに絵文字を増やすTypePad 絵文字 for TinyMCE

ワードプレスでも無料ブログ同様絵文字を使いたいけど、tinymce advancedだと少ないですよ

記事を読む

WEBフォントを無料で使えるタイプスクウェア

日本語の無料で使えるWEBフォントってあまりありませんよね。→見つけました! はじめに クライア

記事を読む

ECキューブで販売する為の最低限の設定その2

その1が終わったら次のこの2を見て下さいね。 はじめに とりあえず、デフォルトで表示して

記事を読む

アフィリエイトBの登録方法

アフィリエイトBはFXとか物販が多い? はじめに 今回は初心者には少し難しいアフィリエイトB

記事を読む

SEO対策で絶対にしてはいけない事

SEO対策をしていく上でしてはいけない事を今回はご紹介させて頂きます。知識があるのと知識がないのとで

記事を読む

SEO対策用文字数カウントを作ってみた

文字数を計算する時にわざわざ計算ボタンを押さなくても自動でカウントしてくれるようなシステムを制作致し

記事を読む

JetpackのWP.me 短縮 URL

ブログ記事を紹介する時、長いURLをコピペするのが面倒な人もいらっしゃるでしょう。そんな人の為の機能

記事を読む

ホームページにパスワードを設置する方法

今回の内容は特定のページに対してパスワード認証を設置する方法です。 はじめに 少し難しくなります

記事を読む

特定のカテゴリー情報一覧をquery_postsで取得する方法

query_postsを使ってランダム表示一覧で取得したところ、特定のカテゴリー情報しか取得されてい

記事を読む

広告

Message

広告

現在の総記事数: 301件

大型らくらくメルカリ便の登録から発送までの流れ

めったにはありませんが、大型メルカリ便を利用してみましたのでその時の流

メルカリで商品購入から評価までの流れ

メルカリで購入したいけど色々不安な人へ はじめに メルカリでは商品

googleの検索結果から特定の言葉を非表示させる方法

googleの検索結果にある特定のサイトを表示させたくない時にお勧めの

WordPressで特定の画像名だとアップされない

画像にバナーサイズを記載してアップする人もいるでしょうが、これアッ

【無料公開】メルカリで月10万以上稼いだテクニック

メルカリに出品しているけど、なかなか売れない人の参考になれば嬉しいです

→もっと見る

  • まだデータがありません。


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