insert-card-link_ecmg

ワードプレス

クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

記事を書いていると、「以前に自分が書いた記事」や「他のサイトで見つけたすごくいい記事」などを文章中で紹介したくなる時があります。そんな時、どうしていますか?

例えば、記事作成に役立つツールのまとめ記事を書いているとしましょう。そしていざ、自分の過去記事へのリンクを挿入します。

▼クオリティーアップのために、チェックしておきたい記事はこちら!
【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個のツール

・・・どうでしょう。これでは内容に興味があっても、『本当にクオリティーアップ、できるんすか?』なんて無意識に思われてしまいそうです。もしかすると記事リンクだということにさえ気づいてもらえないかもしれません。

せっかくおすすめ記事を紹介したいのに、単純にテキストリンクを挿入するだけではどうもパッとしないものです

もっとインパクトのあるリンク挿入がしたい

すごく影響を受けた記事を、うまく紹介したい

自分の過去記事をセンスよく紹介したい

執筆に集中したいから、簡単にリンク挿入したい

これらをまとめて解決してしまう方法があります。こんなカード型のリンクはいかがでしょう?

これは、先ほどテキストリンクで紹介した同じページへのリンクです。

テキストリンクと比べ、リンク先の記事の印象がずっと伝わりやすくなりましたし、同時に”今執筆している記事”の印象も、ぐっと上がります。パソコンで閲覧している人はマウスオーバーしてみてください。画像の右側にシェアボタンも現れてくれます。

モバイル環境では記事内容を抜粋しているテキスト部分をタップすると出現します。

また、ブログなどの記事だけでなく「YouTube」「Vimeo」「TED」などの動画ページの紹介にも使えてしまいます。極めつけにレスポンシブ対応。スマートフォンなどのモバイルデバイスでも、きれいに表示されます。なかなかの”至れり尽くせりっぷり”ですよね。

今回は、このカードリンクを作成する【Embedly】というサービスを使って、投稿に挿入するまでの方法をお伝えします。あまりにも簡単なその設定方法を見ていきましょう。

ブックマークレットを取得する

『ブックマークレットって何?』という人も、気にせず進みましょう。
まず、公式サイト→【Embedly 】からブックマークレットを取得します。

下図のように、『+Embed』アイコンをブラウザのブックマークバーにドラッグ&ドロップ。

 Before

Bookmarklet_2

 After

Bookmarklet_after

ブックマークバーに『+Embed』というブックマークレットが登録されました。
これだけで、ブックマークレットの取得は完了です

ブックマークレットを使用する

早速、紹介したいページを表示します。もちろん、他の人の記事だけでなく、自分のサイトの記事でもOKです。ページを表示した状態で、先ほど取得したブックマークレット『+Embed』をクリック。すると・・・

 クリックで拡大

Embed_1

あっという間に完成図がプレビューされます。

「サイトタイトル」「画像」「記事タイトル」「本文の抜粋」が自動的に生成され、この見栄えのまま、記事内に挿入することができます。『この記事を○○で読む>』の表記も、安心感があって嬉しいですね。

プレビューで見栄えを好みに変更する

そしてこのプレビュー画面では、見栄えをさらに追い込むことが出来ます。

本文抜粋部分をマウスオーバーすると背景色が変わるので、この状態で右上のバツボタンを押すと、本文抜粋をまるまる消すことが出来ます

Embed_2

バツボタンではなくテキストをクリックすると、文章を変更することも出来ます。これは嬉しい!

Embed_3

今回は文章を変更してみます。

 クリックで拡大

Embed_4

デフォルトでピックアップされてきた文章よりも、記事の内容が伝わりやすくなりました。

また、画像部分をマウスオーバーすると左下に矢印マークが現れます。マークをクリックすると、画像サイズを小さくすることが出来ます

Embed_5

Embed_6

少しバランスが悪いので、本文テキストを消してみます。

Embed_7

記事によってはこのほうがスッキリして、うまくハマることも多そうですね。
さらに画像も消して・・・

Embed_8

ここまでシンプルにすることも出来ます。このパターンがほしい時もありそうですね。

WordPressに貼り付ける

挿入したいレイアウトが決まったら、プレビュー下部にあるHTMLソースを全選択してコピーし、WordPressの投稿画面に貼り付けます。

Embed_9

ここで注意です。WordPress側には必ず『テキスト』モードで貼り付けてください。『ビジュアル』モードで貼り付けてもうまく反映されません。

 クリックで拡大

Embed_10

任意の場所に貼り付けたら、プレビューで確認してみましょう。
ここでは実際に貼り付けてみます↓

いい感じです。

動画ページも同様に引用可能

YouTube、Vimeo、TEDなどの動画ページを紹介したい場合も、同様の手順で簡単にカードリンクを挿入できます。

 クリックで拡大

YouTube

Vimeo

TED

余談ですが、万が一『Embedly』のサービス提供が終わってしまった場合も、記事にはテキストリンクとして表示される仕様になっているそうなので、その点も安心できます。

テキストだけだとスルーしてしまいがちなリンクも、センスのいいカードリンクだと視聴してみたくなるものです。ブックマークレットをクリックするだけ。重宝するので、ぜひ取り入れてみてください。

おまけ – TCDテーマならクリックひとつ。

ちなみに、このサイトでも利用しているTCDテーマであれば、「デフォルトの状態で、クリックひとつで」カード型リンクが作成できます。こんな感じに。

この反則ギリギリの「クイックタグ機能」では、他にも囲み枠・ボタン・世にも美しい見出しなどなど、全てクリックひとつで済ますことができます

こちらもとってもオイシイので、あわせて覗いてみてください。

 クイックタグ詳細

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  3. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  4. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  5. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…

関連記事

  1. chrome-full-screen-capture-ecmg

    ブログ

    ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

  2. theme-manual-update-ecmg
  3. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個のツール

    知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時の…

  5. screenpresso-initial-setting_ec
  6. dash_ecmg

    マネジメント

    あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方法と使い方

    「ズバッと入力」でラクしよう。HTMLの入力、メールの文言、署名・…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. adjust-the-button_ecmg
  3. valuable-content-from-image_ec
  4. todoist-extension_ecmg
  5. extension-tools-for-bloggers_ec
  6. tcd-mag_ecmg-ps

タスク管理で、自己管理。

todoist

ピックアップ記事

  1. widgetoon-js-count-jsoon_ecmg
  2. like-button-card_ecmg-ps
  3. sns-count-cache_ecmg2
  4. firefox-full-screen-capture-ecmg
  5. facebook-page-plugin_ecmg-ps
  6. dash_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

掘り出し記事

  1. screenpresso-initial-setting_ec
  2. todoist-re-schedule_ec
  3. meta-seo-inspector_ecmg
  4. retina-text-widget-ecmg
  5. mailbox-goodbye-newapp_ec
  6. todoist-share_ec

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. customized-theme-update_ecmg-1-ps
  2. firefox-full-screen-capture-ecmg
  3. todoist-routine_ecrt
  4. original-share-button_ecmg-ps
  5. simple-image-sizes_ec-ps
  6. tcd-css-customize_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. todoist-class_ecrt
  2. quicktag_ecmg
  3. chrome-full-screen-capture-ecmg
  4. blog-theme-mag_ecmg-ps
  5. facebook-page-plugin_ecmg-ps
  6. customized-theme-update_ecmg-1-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. valuable-content-from-image_ec
  2. retina_ecmg
  3. todoist-tips_ecmg
  4. extension-tools-for-bloggers_ec
  5. improvement-flow_ecmg
  6. tcd-theme-selection_ecmg-ps

ピックアップ記事

  1. compress-jpeg-png-images-ecmg
  2. facebook-page-plugin_ecmg-ps
  3. tcd-theme-options_ecmg
  4. child-theme-mechanism_ecmg-ps
  5. todoist-advanced_ec
  6. media-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  2. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  3. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  4. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP