記事を書く人は、ブログを書く時に外部リンクや内部リンクをキレイなブログカードにして表示したいと考えたことはあるはず。

MediumやNoteなどは、リンクをコピーしエディタにペーストすると勝手に変換されるが、WordpressといったCMSでは純正でリッチメディアには対応していない。筆者はfunctions.phpにPHPコードを書きこみリンクをブログカードへ変更するよう設定しているが、ぶっちゃけコードなんか見たくない人が大多数だと思う。

そこで、本記事ではHTMLコードを貼り付けるだけで、見栄えの良いリッチメディアに変換してくれる『iframely』というサービスを紹介する。

このツールを使うだけで、記事の質やオシャレさがグンと上がるはずだ!

iframelyの使い方

使い方といっても非常に簡単。

高度なカスタマイズをする場合は登録しないといけないが、URLを単純に書き込むだけで十分に綺麗なリッチメディアにしてくれる。したがって、特に登録はしなくても良いだろう。

まずは、このURLにアクセスしてほしい。

iframely

iframelyにアクセスしたら、「Just Get A Code」をクリックしよう。

リンクをペーストするフォームが表示されるので、任意のURLを入力する。

iframely

今回は、筆者のブログである「https://keisukekuribara.com」を打ち込んでみる。

iframely

「Check it」をクリックし、2秒程待つ。

すると、以下のようにリッチメディアが自動的に生成される。左側がコード、右側がプレビューとなっており、コードをコピーし任意の場所へペーストするだけでプレビューと同様のスタイルが埋め込むちゃうのだ。

iframely

CSSやJSのスタイルは、iframelyのCDNより配信されるためウェブサイトへコードを追記する必要はない。

サンプル

筆者のブログ

実際に、iframelyで作成したリッチメディアを以下に貼り付けてみた。

Amazonのリンク

Instagramのリンク

Tedのリンク

Tableauのリンク

スマートフォンだと途中で途切れます。

価格

なお、リッチメディアを作成するだけの場合は永久に無料で使用できるが、

  • カスタマイズしたり
  • APIを利用したり
  • CDNから配信したり
  • AMPに対応したり

するなどの場合には、課金が必要になる。といってもさほど高価ではなく、1時間に1回URLがカウントされ、そのカウント数に基づき料金形態が変わる。

iframelyの場合、1時間に1回ヒットしたURLをカウントし、そのカウントに基づき価格が決定される点が、よくある1コールによる従量課金制の他サービスとは異なる。

まとめ

手軽にリッチメディアを作成できるiframelyの利用方法を解説してきた。

iframelyはカナダのオタワに拠点をおくItteco Software社が運営しており、オープンソースバージョン(OSS)もあるなど、何ともDeveloperファーストなプロダクト。

例えば、ブログを書いている人は、何かプラグインを使用しなくてもAmazonアソシエイトのリンクを綺麗に表示できる。YoutubeやInstagram、Twitter、Pinterest、Ted.comといった主要ウェブサイトは全てカバーしている。

何の知識がなくてもリッチメディアを使用できるので、初心者のみならず誰にでもオススメできるサービスだ。

『つい』、使ってみて頂ければなと思う!

You May Also Like