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

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

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

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

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

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

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

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

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

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

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

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

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

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

該当ページで起動!

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

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

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

これが神機能なんです!

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

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

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

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

枠線をつける

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

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

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

浮き立たせる

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

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

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

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

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

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