ブログカスタマイズ

ブログカードを「はてなブログカード」から「Embedly」に変えてみた

投稿日: 更新日: 2017年11月21日

リンクはテキストよりもカード型リンクで表示するのが好きなでででーさん(@d3_dayo) です!

 
先日、もう何年も前から有名な機能なんですが、はてなブログでなくてもChrome拡張機能の「Create Link」を使えば簡単操作ではてなブログカード風のリンクが作れることを書きました。
 
はてなブログカード風のカード型リンクを右クリック一発で生成できるChrome拡張機能「Create Link」 | カキタクナッタラ
ただ、簡単操作と言ってもはてなでリンクを挿入する時と比べれば一手間はかかります。
 
でも私ははてなでブログをやる前に数年やっていたGoogleのBloggerでも、上記の「Create Link」でカード型にしてリンクを表示していたんですよね。なので、もう…この一手間に慣れていたし、自分にとって一番違和感のないリンクの表示方法として馴染んでいたけど、今回WordPressへ移行したことを契機に、このはてなブログカード風のリンク表示にも少し飽きがきていました。
 
 

スポンサーリンク

Embedlyとは

EmbedlyのサイトにアクセスしてURLを入力すると自動で以下のようなブログカードを生成してくれる外部サービスです(枠線はCSSで追加しているので後ほど解説します)
 
Embed Code Generator | Embedly
上記のサイトにアクセスするとURLを入力する欄があります。
 

 
ここにブログカードとしてリンク表示したいURLを入力し、入力欄右側の「EMBED」ボタンをクリックすると…
 

 
このようなブログカードを表示するコードを生成してくれて、それを記事に貼り付けるだけで、このように…なんだかとてもいい感じのブログカードを記事で表示することができるのです。
 
カキタクナッタラ
 

個人的に良いと思う点

はてなブログカードよりもこっちがいいなと思った点はいくつかあります。
 

アイキャッチが正方形以外で表示できる

こういうところ、無駄に細かい性格なので、自分の記事に設定するアイキャッチ画像は全て正方形の表示でも切れて見えないよう、タイトルテキストや挿入している画像は中央に寄せて正方形の中にも収まる16:10の画像を作成しています。
 
が、しかし、皆さんがそうしているわけではないので、記事にはてなブログカードでリンクを貼ると…けっこうアイキャッチの文字が見切れてしまっていたり、はてなブログカードはアイキャッチ部分が正方形表示のためカッチョ悪くなってしまうことがあります。
 
しかし、Embedlyならアイキャッチ画像を長方形で表示するのでアイキャッチ作者が意図していない比率では表示されず、綺麗に記事のアイキャッチを表示することができますので、どんな記事なのかもわかりやすくなりますよね。
 

抜粋文を非表示にすることができる

デフォルトではブログカードを生成すると記事の抜粋文はこのように表示されるようになっています。
 
誕生日プレゼントとしてダサうぇぶろぐ。さんから頂戴した「世界に一つだけのマグカップ」 | カキタクナッタラ
しかし、ブログカードのコードを設定する時点で設定画面から抜粋文などを非表示にもすることができるので(後ほど手順は解説します)このようにスッキリと?ブログカードを表示することもできるのです。
 
誕生日プレゼントとしてダサうぇぶろぐ。さんから頂戴した「世界に一つだけのマグカップ」 | カキタクナッタラ
 

Embedlyブログカードの設定

先ほど上の項でも紹介したEmbedlyのサイトにアクセスをして…
 
Embed Code Generator | Embedly
URLを入力するとこのようにブログカードのプレビューが表示されます。
 

 
赤枠で囲った右側のメニューからも表示に関する設定を一部することができます。
 

 


スポンサーリンク


アイキャッチ画像のサイズ変更

デフォルトでは要素の幅一杯に大きなアイキャッチ画像が表示されますが、個人的にはスマホならまだしも…PC表示ではさすがにちょっとお大きすぎるので、アイキャッチ画像のサイズは小さくして表示しています。
 
小さくするには画像の右側に表示されているシェアボタンの一覧下に表示されているこのボタンをクリックします。
 

 
クリックするとブログカードを編集する画面がオーバーレイで表示されるので、画像の上にマウスオーバーして画像左下に表示される縮小ボタンをクリックすると、画像の表示がデフォルトの大きな状態から正方形を維持したまま小さな表示へと切り替わります。
 

 

抜粋文の非表示

抜粋文を非表示にしたい場合は、同じく上記のブログカードを編集する画面で抜粋文にマウスオーバーすると右上に「☓」ボタンが表示されるのでクリックすれば非表示になります。
 

 
 

取得したコードの一部をheadに追加する

この項目は絶対にやらなければいけないというわけではないので、読んでよくわからないという場合には無視しちゃっても全然大丈夫です!
 
Embedlyで取得したブログカードのコードには、毎回このスクリプトがくっついてくるのですが…

このスクリプトはheadに一つ貼っておけば、ブログカードごとに毎回読ませる必要はないのでWordpressなら管理画面から「外観」→「テーマの編集」→header.phpの中に、はてなブログなら管理画面から「設定」→「詳細設定」→headに要素を追加に上記コードを記述しておくことで、以降はブログカードを記事に貼る時に、コードからこの部分は削除してしまってもブログカードが正常に読み込まれます。
 
 

CSSで枠線追加とカードの幅を変更する

デフォルトでははてなブログカードのように枠線が表示されず、幅も記事幅一杯に表示されて、ちょっと大きすぎる感じがしたので、私は以下のCSSを記述して枠線の追加とカード幅を少し調整しました。

 

ブックマークレットが便利

こちらの記事で紹介されていたブックマークレットを私は使っていますが…
 
はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。
ブックマークレットをブラウザのブックマークバーに登録しておけば、ブログカードを生成するたびにEmbedlyのサイトへとアクセスする手間もかからず、リンクにしたいページを開いている状態でブックマークバーからブックマークレットをクリックするだけなので、作業が非常に楽ちんになります。もちろん、ブックマークレットからでも画像の縮小表示や抜粋文の非表示を設定することができます。
 
 

おわりに

はてなブログカードは、もう散々使ってきたのでちょっと飽きているというのが個人的にはあります(笑)
 
なので、このEmbedlyをメインのブログカードとして使っていこうと思っていたのですが、記事によってはアイキャッチじゃなくて記事内の画像がカード内のアイキャッチとして吸われてしまう場合もあるんですよね(ちゃんとアイキャッチを設定していても…)
 
それがなければ一択でいきたいところなんですが…今のところはEmbedlyとはてなブログカードを並行して使っているような感じです!

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ