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

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

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

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

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

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

Headline

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

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

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

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

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

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

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

これが神機能なんです!

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

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

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

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

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

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

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

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

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