insert-card-link_ecmg

ワードプレス

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

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

 

例えば今、【厳選】WEBサイトの外観に手を抜くな!その理由とイメージアップ方法5選
なんていうテーマで記事を書いているとしましょう。
そしていざ、自分の過去記事へのリンクを挿入します 

 

▼イメージアップのために、まず設定しておきたいのはこちら!
ファビコンでサイトをリッチに。WordPressプラグインRealFaviconGeneratorで簡単設定

 

、、、これでは内容に興味があっても、『本当にイメージアップ、できるんすか?』なんて無意識に思われてしまいそうです。もしかすると記事リンクだということにさえ気づいてもらえないかもしれません。せっかくおすすめ記事を紹介したいのに、単純にテキストリンクを挿入するだけではどうもパッとしないものです。

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

 『すごく影響を受けたブログ記事を、うまく伝えたい』

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

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

これらをまとめて解決してしまう方法があります。

こんなカード型のリンクはいかがでしょう?

ファビコンでサイトをリッチに。WordPressプラグインRealFaviconGeneratorで簡単設定

ファビコンの存在は知ってるけど、どうやって設定するの? スマートフォン用のファビコン設定は、また別のやり方で設定が必要なんでしょ? 出来るだけHTMLソースはいじりたくないんだけど、、 - – – プラグインでまとめて解決。

 

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

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

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

 

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

 

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

『ブックマークレットって何?』という人も、気にせず進みましょう。

Bookmarklet: instantly generate a Card for any web page. | 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

 

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

ここでは実際に貼り付けてみます↓

WordPressサイトを丸ごとバックアップ!「BackWPup」で丸投げタイマー設定

せっかく作ったWEBサイトが、突然真っ白になったら困る! バックアップの仕方って、どんな方法があるの? どのくらいの頻度でバックアップするものなの? あんまり大変だと、メンドクサくて続けられなくなりそう、、 - – – 自動化プラグインで丸投げタイマー設定をしましょう。

 

いい感じですね!

 

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

 クリックで拡大

YouTube

Vimeo

TED

 

テキストだけだとスルーしてしまいがちなリンクも、センスのいいカードリンクだと視聴してみたくなるものです。

 

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

 

ブックマークレットをクリックするだけ。重宝するので、ぜひ取り入れてみてください。

 合わせて読みたい記事

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

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  4. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体
  5. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

関連記事

  1. LightShot-Screenpresso_ec

    WEBデザイン

    辿り着いたキャプチャーツール、LightShotとScreenpresso。その機能比較と併用の魅力…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

  2. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  3. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  4. screenpresso-initial-setting_ec
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

  6. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. retina_ecmg
  2. todoist_ec
  3. tcd-theme-selection_ecmg
  4. improvement-flow_ecmg
  5. business-books_ecmg
  6. tcd-theme-user-review_ecmg
  7. extension-tools-for-bloggers_ec
  8. todoist-tips_ecmg
  9. todoist-extension_ecmg
  10. tcd-mag_ecmg

ピックアップ記事

  1. chrome-font_ecmg
  2. like-button-card_ecmg
  3. quicktag_ecmg
  4. todoist-advanced_ec
  5. child-theme_ecmg
  6. todoist-constitution_ec
  7. todoist-routine_ecrt
  8. media-setting_ec
  9. widgetoon-js-count-jsoon_ecmg
  10. original-share-button_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプ…
  2. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…
  3. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  4. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  5. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…
  2. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  3. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  4. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…
  5. 目指せ軽量化!今から始める、WordPressサイトの表示ス…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  5. tcd-theme-selection_ecmg

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP