koblog

高校生のWEBデザインブログ

自動でリンクカードを作ってくれる「Embed Code Generator」

サムネイル

先日、このような記事を書きました。 

今思い返してみると自作では限りがあります。いくらカスタマイズし放題といってもなかなか難しので、メリットはJavascriptを使っていないことぐらいになってしまします。

 

そこで今回は、自動でリンクカードを作ってくれるサービス「Embed Code Generator」を紹介したいと思います。はてなブログ以外にBloggerWordPressでも使えるので興味があったら使ってみてください。

 

Embed Code Generatorとは?

Embed Code GeneratorURLを入力するだけで自動でリンクカードを作ってくれるサービズです。使い方は簡単で入力欄にURLを入力すると下のような画面になるので、あとは簡単なカスタマイズをするだけです。 

キャプチャー1
 

僕も試しに作ってみました。

上の画像のようにカスタマイズをすると、こんな感じなります。

koblog

高校生のWEBデザインブログ

 

 

「Embed Code Generator」はこちらからどうぞ。

Embedly makes your content more engaging and easier to share | Embedly

Embedly delivers the ultra-fast, easy to use products and tools for richer sites and apps.

 

メリット

メリットはとにかく簡単におしゃれに仕上がるということです。しかしデメリットでも紹介しますがデザインが良い反面、Javascipt を使っているので使いすぎると重くなります。

 

デメリット

メリットの部分でも触れましたが、Javascriptを使っているので動作が重くなりがちです。しかしこのことについてははてなブログ純正のリンクパーツでもjavascriptを使っているので大して変わらないと思います。

 

もう一つのデメリットですが、目次に表示されてしまうことです。リンクカードのタイトルに<h4>タグを使っているので、はてなブログWordPressの目次プラグインを使っている場合は下のように目次に表示されてしまいます。

キャプチャー2
 

対策として目次を自作するなどがありますが、そこまで手間を掛けるほどのものでは無いと思います。それでも使える人にはとても便利なサービスなので、興味があったら使ってみてください。

 

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる