• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
「きょうものびてます。」ブログロゴ

きょうものびてます。

デバイスハウツーとレビュー

  • Android
  • Chromebook
  • iPhone
    • iPhoneの使い方
    • iPhoneのトラブルシューティング
    • iOSアプリ
  • Mac
    • Macの使い方
    • Macのトラブルシューティング
    • macOSアプリ
  • Apple Watch
    • Apple Watchの使い方
    • Apple Watchのトラブルシューティング
  • Netflix
  • 洋楽
現在の場所:ホーム / WordPress / Embedlyブックマークレットの使い方とカスタマイズ方法

Embedlyブックマークレットの使い方とカスタマイズ方法

2018年1月29日 2020年11月16日

embedlyの使い方とカスタマイズ方法

Embedlyは外部リンクのブログカードを作成できることから、大人気のサービスですが以下の理由から、私はここ最近利用していませんでした。

  • 画像を任意の大きさに変更できない場合がある
  • タイトル以外の文字を消せない
  • タイトルコードにh4タグなどが使われていると目次として読み込んでしまう
たちばな泣き顔
たちばな

やはり無料だとここが限界なのかな・・・

諦めかけていたとき、私の不満を取り除いてくれる方法を見つけたんです。それが“ブックマークレット”でした。

Embedlyのブックマークレットを使うことで、不満は見事に解消され更に便利に使用することができます。具体的には以下の通りです。

  1. ワンクリックで即座にカードが作成できる
  2. 画像を任意の大きさに変更できる
  3. タイトル以外の文字を消せる

ではそんな便利なEmbedlyのブックマークレットの使い方を、備忘録も兼ねて解説していきます。

スポンサーリンク

Embedlyブックマークレットの使い方

ブックマークレットというのは、ブラウザのブックマークから起動するちょっとしたプログラムのことなんですが、言葉では伝わりづらいので実際に以下の手順でやってみてください。

プログラムをブックマークする

プログラムと聞くと身構えるかもしれませんが、実際にはご自分のブックマークバーにドラッグ&ドロップするだけです。

Bookmarklet: instantly generate a Card for any web page. | Embedly

まずは上記リンクをクリックします。

次にブックマークレットをそのままブックマークバーにドラッグ&ドロップします。画像はFirefoxですが、GoogleChromeやInternetExplorerでも同じ操作です。

該当ページで起動!

Embedlyブックマークレットを起動

リンクカードにしたいページで、先ほどのブックマークをクリックするだけ。ワンクリックでできてしまうなんて、簡単でしょ?

イメージに合うように微調整する

ブックマークレットでカードを微調整

起動できたら調整していきましょう。画像の大きさを変更したり、タイトル以外の文字を非表示にすることもできます。

たちばな笑顔
たちばな

これが神機能なんです!

完成したEmbedlyカード

あとは出来上がったリンクカードのHTMLコードを、貼り付ければ完成です。上記をみても分かるように文字のみのリンクよりカード型の方がより多くの情報を読者に伝えられますよね。

Embedlyカードをさらにカスタマイズする方法

お気づきかもしれませんが、Embedlyで作成したリンクカードは非常にシンプルなものですので、物足りないと感じるかもしれませんね。

そこで私はさらにCSSで見た目をカスタマイズしています。

枠線をつける

Embedlyブックマークレットで調整したリンク

シンプルにカードを線で囲むだけのデザインです。スタイルCSSに一度書き込んでしまえば、都度入力する手間を省けます。

See the Pen Embedlyで作成したカードにCSSで枠線をつける by Ukyo TACHIBANA (@monobi) on CodePen.

上記をWordpressの外観>カスタマイズ>CSSの追加から記入すればOKです。

浮き立たせる

浮き立つようにカスタマイズされたEmbedlyカード

この方法は生成したソースコードに付け加えるという方法ですので、一手間増えますが強調したい特定のリンクだけに適応させたいときに重宝します。

See the Pen Embedlyで作成したカードに浮き立つような効果を付け加える by Ukyo TACHIBANA (@monobi) on CodePen.

「ここにコードを挿入」に出来上がったソースコードを丸っとコピペして貼り付けます。

スポンサーリンク

ブログカスタマイズを楽しもう!

今回はEmbedlyブックマークレットで簡単にカード型のリンクを作成する方法と、さらにそれをカスタマイズする方法をご紹介しました。

私もまだまだ勉強中のため、もしかしたらもっとスマートな方法があるのかもしれませんが、少しでも参考になれば嬉しいです。

こちらもおすすめ:

  •  Embedlyの3種類の使い方を動画付きで詳しく解説
  •  WordPressをWebP化するために必要な準備と具体的な手順

Categories: WordPress

About Ukyo TACHIBANA

美味しいものと家族をこよなく愛するパパブロガー。デバイスの使い方や映画、洋楽についてまったり書いています。

最初のサイドバー

スポンサーリンク

人気の記事

iPhoneのアプリを削除する 2019年10月25日【iOS13】iPhoneのアプリを履歴もろとも完全に削除する方法

Genesis Frameworkとは 2020年11月9日Webシェア世界第3位を誇るGenesis Frameworkとは

Javaスクリプトを修正中のMacbook 2019年12月8日なぜMacアプリはXボタンを押しても起動したままなのか?

2020年9月11日Netflix「Work It〜輝けわたし!〜」レビュー:ダンスも人生も諦めない

iPhoneとAirpodsをペアリングする 2019年6月26日なくしたAirPodsを探す方法【オフラインでも見つかります】

カテゴリ

  • Amazon (3)
  • Android (9)
  • Apple Watch (5)
    • Apple Watchの使い方 (4)
  • Chromebook (5)
  • Genesis Framework (1)
  • iPad (1)
  • iPhone (51)
    • iOSアプリ (1)
    • iPhoneのトラブルシューティング (3)
    • iPhoneの使い方 (46)
    • iPhoneアクセサリ (1)
  • Mac (4)
    • macOSアプリ (2)
    • Macの使い方 (2)
  • Netflix (7)
  • WordPress (3)
  • ゲーム (4)
  • 商品レビュー (12)
  • 料金プラン (5)
  • 洋楽 (14)
  • 雑談 (36)

人気のキーワード

GRERLLD ポケモン剣盾

スポンサーリンク

Footer

CONTACT

  • お問い合わせ
  • 特定商取引法に基づく表記

ABOUT

  • プロフィール
  • サイトポリシー
  • プライバシーポリシー

CONNECT ME

  • Facebook
  • Instagram
  • Pinterest
  • Twitter

Copyright © 2021 · きょうものびてます。 · ALL RIGHTS RESERVED.