WebService

 

 / 最終更新日: 2020.04.25

【iframely】紹介したいブログ記事を簡単にカード型リンク(ブログカード)にしてくれるサイト


こんにちは。
@OfficeTAKUです。

ブログで他のサイトの記事を紹介したい時に、ただURLや文字列にリンクを貼るよりも、ブログカードと呼ばれるカード型のリンクの方がおしゃれで見栄え良いですよね。

現在、このサイトで利用しているTCDさんのテーマMAGは、自サイト内の記事であれば、簡単にカード型のリンクを作成できるショートコードが用意されています。

上記のリンクを作成するときには下記のようなショートコードにURLを入れるだけです。

[clink url=”ここに記事のURLをはりつける”]

しかし、自分の管理するサイトであっても、ドメインが違えばそのショートコードは利用できません。

そこで、Web上でURLさえコピペすれば簡単にカード型リンクを作成してくれるサービスをご紹介します。

iframely

iframely(https://iframely.com/) というサービスを利用すれば、URLを貼り付けるだけで、簡単にコードを作成してくれます。

iframelyでコードを取得する手順

  1. iframelyにアクセスします
  2. [JUST GET A CODE]というリンクをクリックします
    iframely で作成するブログカード
  3. コードを生成する画面が開きます
    iframely で作成するブログカード
  4. リンクを作成したい外部ページを開きURLをコピーします
    iframely で作成するブログカード
  5. 中央のテキストボックスにURLを貼りつけます
  6. [CHECK IT]ボタンをクリックします
    iframely で作成するブログカード
  7. 埋め込み用のコードが作成されます
  8. [COPY CODE]ボタンをクリックするとコードがコピーされます
    iframely で作成するブログカード
  9. 小さいカードにするには、[Make it a small card]のチェックボックスにチェックを入れます
    iframely で作成するブログカード
  10. コピーしたコードを自分のブログなどに貼り付けます

以上で作成は完了です。

実際に生成されたコードと結果

下記が今回作成したものになります

ブログカード大

コード:ブログカード大
<div class="iframely-embed"><div class="iframely-responsive" style="padding-bottom: 56.3843%; padding-top: 120px;"><a href="https://okyouduka.com/202004/winds/7762.html" data-iframely-url="//cdn.iframe.ly/idCXrc6"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

ブログカード小

コード:ブログカード小
<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://okyouduka.com/202004/winds/7762.html" data-iframely-url="//cdn.iframe.ly/idCXrc6?iframe=card-small"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

参考にさせて頂いたサイト

iframelyはまだ他にも機能がたくさんあります。
なんのせ英語サイトなので、まだしっかりと読めていません。
今回は、下記の「Takumon Blog」さんの記事を参考にさせていただきました。感謝。

まとめ

以上、iframely を利用したカード型リンクの作成方法でした。

WordPressに限ればプラグインもあります。
embedly というWebサービスもあります。

しかし、このiframely が一番シンプルで使いやすいと思います。
しばらくはこちらを利用していこうと思っています。

じんわりおすすめ!癒やされるシンプルなデジタル時計サイト「いまなんじ?」前のページ

【世界天文月間イベント】月と金星が接近!2020年4月26日と27日写真を撮って投稿しよう!次のページ

ピックアップ記事

  1. 記憶と記録をデジタル化しておくことの重要性と検討すべき項目を整理してみた
  2. 【Google】Chrome 拡張機能「Password Checkup」導入翌…
  3. 法定相続情報一覧図の作成や申出のポイントについてまとめ
  4. [iPhone] Safariでブラウズ中に表示される、「警告! あなたのApp…
  5. 3.11復興とは?問うドキュメンタリー:メディアが語らない真実「被災地の水産加工…

関連記事

  1. オンライン書店e-hon http://www.e-hon.ne.jp/

    WebService

    ネットで注文して地元の書店で受け取れるオンライン書店e-honを利用してみました。

    こんにちは。普段はAmazonで本を購入することが多い@Offic…

  2. Web

    吹奏楽部はあります!新聞部はありませんorz あなたの部は?Amazonに部活動ストアオープン

    こんにちは。中学は吹奏楽部、高校は新聞部だった @OfficeTA…

  3. WEB会議などで使える「スタジオジブリ壁紙」
  4. Web

    Instagramの写真を日ごとのカレンダー表示にしてくれる「1/365gram」

    こんにちは。夕陽をみるといつも「夕陽が泣いている」か「夕暮れ時はさびし…

  5. 国立天文台市民天文学プロジェクトGALAXY CRUISE

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

日比谷花壇_毎月楽しむお花のある暮らし特集

人気の記事

  1. 日商PC検定
  2. ロジクール MX KEYS(MAC用)
  1. ネット詐欺専用セキュリティソフト「詐欺ウォール」

    ソフトウェア

    ウイルス対策ソフトでは防ぎきれないネット詐欺に対応!ネット詐欺専用セキュリティソ…
  2. 書籍

    集中して仕事がしたい、自分で時間をコントロールしたい、と思い、読んでためになった…
  3. WebService

    Amazonプライム・ビデオで今見ておくべき作品
  4. Security

    【注意】不在通知を装う詐欺メールがでまわっています!
  5. MOS対策テキスト

    Microsoft Office Specialist

    [MOS] Microsoft Office Specialist 試験 自力合…
PAGE TOP