2016-05-23_09h17_18

ブログ内で他の記事を紹介する時、サムネイル画像があると目立っていいよね。

SPONSORED LINK


こんにちは、赤ペソ先生(@spinf60 )です。

わたしは今までブログで他の記事を紹介する時に、はてなブログカードというものを使っていました。

こんな感じのリンクです↓

上のリンク記事でも書いていますが、はてなブログカードを使う前は、shareHtmlというリンクを作っていました。

はてなブログカードだとスマホでも見た目が同じだし、サムネイル画像がスクリーンショットではなく自分で設定した物が表示されるのが好きで、自分のブログ内リンク(内部リンク)もこの形式で作ってたんです。つい最近まで。

けど、はてなブログカードはどうも内部リンクに向かないらしい。


はてなブログカードは内部リンクに向かない?

はてなブログカードは、iframeというもので四角く枠を作って表示されています。

このiframeというのが曲者で

iframeとは、HTMLのタグの一つで、Webページ内に矩形の領域を設け別のページなどを読み込んで表示するもの。別のWebページや画像などをあたかもページの要素の一つのように埋め込んで一体的に表示することができる。

出典:IT用語辞典

見た目よく、自分のブログに他のウェブページを埋め込むことができるけど、別のページなんです。自分のブログ内のリンクなのに別のページとみなされるので、ページ同士がリンクされていない。つまりリンクを貼ってもページ同士はつながってないとみなされて、Googleからの評価は全然あがらない!ということなのです。(違ったら誰かツッコミ入れてください)

せっかくブログを書いてGoogle神に評価してもらって検索上位に行きたいのに、iframeのはてなブログカードを使ってたら全然ダメじゃないですか(;´Д`)

そんなわけで何かよい代替案はないか?と探して見つけたのがEmbedlyです。


Embedly

2016-05-23_09h17_18

shareHtmlがアイキャッチで設定したサムネイル画像を取得してくれれば良かったんですが、どうすりゃイイのか全然わからなかったので他の手段を探していたところ、困った時によく見るブログ、寝ログさんで紹介されていたのがEmbedlyでした。


Embedlyブックマークレット

ブックマークレットを使うことで、紹介したいサイトや自分のページのリンクも簡単に作れるのですが、わたしが実際に使っているブックマークレットは、先ほどの記事のものではなく、コチラのブログのものを使っています。


Embedlyで表示してみた結果

実際にEmbedlyで表示してみた結果がコチラです。


はてなブログカードをライブドアブログに表示する方法


ライブドアブログのスマホ表示だと見づらいので、水平線(hrタグ)を前後に挿入しています。

最近ダイジェスト記事内での内部リンクはコレで表示するようにしています。

powerd by Embedly の部分をクリックするとSNSへのシェアボタンも表示されるし、ナカナカ見た目もいい。何より、いまいましいiframeじゃないのが一番です。

そんなわけで、しばらくはこのEmbedlyで様子を見たいと思いまーす。


Embedlyで画像サイズやコメントを変更する方法

Embedly すごくいいんですけど最初は画像がデカく表示されるんですよ……。

2016-05-23_09h55_55

あと、はてなブログカードと違って、文章も記事本文から持ってくるみたいで、変な感じになる時が多い。

そんな時は画像の上にマウスカーソルを載せると左下に矢印マークが出るのでクリックすると小さくデキます

文章の修正や削除も同様に、文字の上にマウスカーソルをのせると×マークが出て削除できたり、ダブルクリックで変更もできるようになっています。

2016-05-23_09h56_10

わたしは記事本文は削除して、タイトル部分では自分のブログ名を消すようにしています。自分のブログの内部リンクだから必要ないし、そもそも左上にブログ名表示されてるから(笑)

2016-05-23_09h56_36


詳しくは、コチラの記事を参考にさせていただきました。


まとめ

「Embedly使う」って書いてるのに、なぜ『はてなブログカード』も使ってるのかな?と思った方もいるかもしれません。

個人的には、はてなブログカードの方がすっきりしていて好きなんで、自分のブログの内部リンク以外でははてなブログカード形式を使おうと思っています。(腹黒)


あと自分のブログへの内部リンクも、何でもかんでも画像が必要か?っていうとそうでもなくて、テキストのリンクだけで十分な場合もあります。

【関連記事】GetTabInfoを使って一気に、はてなブログカードを作るよ!

みたいな感じでね。あんまり画像だらけでもうざいよね(笑)

こんな時はテキストリンクを作成するブックマークレットを使っています。


あともひとつ、Chromeの拡張機能GetTabInfoで一気にリンク作るためを作ったんで需要あるかわかんないけど貼っておきます。わたしが使うタイプなので画像小さめになってます。


<blockquote class="embedly-card" data-card-type="article"><h4><a href=%%URL%%">%%TITLE%%</a></h4></blockquote><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
<hr>


そんなわけできょうの備忘録はここまで。
最後までご覧いただきありがとうございます。
またどこかの備忘録で(^_^)/~


読者登録すると、ブログ更新した時にLINEでお知らせします♪


【オススメ】▶赤ペソ先生が利用しているサービスまとめ


SPONSORED LINK


この記事が気に入ったら
いいね!お願いします♪

最新情報をお届けします

Twitterで赤ペソ先生をフォローしよう!