Bloggerで簡単にブログカードを表示させる方法

トランプカード

はてなブログでよく見かけるブログカード。Bloggerでも出来たらいいなーと、いろいろやり方を探していました。コード云々系は全然理解出来ませんでしたが、とっても簡単な方法があったので紹介も兼ねていろいろブログカード作ってみたいと思います。((o(´∀`)o))ワクワク

ちなみに出来たブログカードはこれです。

キウイ人間のブログ


きっかけ~出来るまで

たまたま遊びに行ったブログに、ブログカードがありました。その右下に見慣れないリンクが・・・(下の画像は例なので当ブログのものです)

ブログカード

embedly?なんだろう??早速、embedlyのHPにアクセス。

Cards are a clean, responsive, and shareable way to display any embed. | Embedly

ブログカード

全部英語だよ。゚(゚´Д`゚)゚。私はMAKE A CARD FOR FREE(訳:カードを無料で作りなさい)したいから、そのボタンをクリック。

ブログカード説明

ここの入力スペースに、ブログカードを作りたいURLを入力すればコードが作成されます。そのコードをhtml編集モードで記事中に貼り付ければOK。かんたーん!それで出来たのがこれ。

ニンテンドー2DS(緑)がおもちゃみたいで可愛い 感想|キウイ人間のブログ

・・・で、でかいな(^ω^;)記事によってはありだけど、これじゃカードと言ってもポストカードレベル。名刺サイズにする方法は無いのかなーといろいろ調べて試しても上手くいかず。(なぜ!)その後、とっても簡単にやる方法を見つけました。

「Embedly」のブログカードを小さく表示したい時の使い方

それで出来たブログカードが上のもの。こちらのブログにとても丁寧に紹介されてて、わかりやすかったです。


毎回embedlyにアクセスするのが面倒くさい

そういう場合は、こちらの

Embedlyで一風変わったブログカードをクリック一発で作成する方法

ブックマークレットのでの作成方法が簡単でした。(このページの『Make Linkでタグを作成する』は私は出来なかった(^^;))


終わりに

【旅行記】佐賀県立博物館・美術館

↑こうやって本文の一部も表示させることも可能。でもちょっと長すぎるので、私はタイトル+画像(小)のブログカードをメインで使っていこうと思います。大きすぎる物も、場所によっては使ってみたいです。

sappari

あと、左上に表示されるコレが結構お気に入りです。このブログのURLが『sappari.blogspot.jp』だからSAPPARIって表示されます。左の画像はブログのファビコンです。今は独自ドメインに変えたので、『SOUKURUKA』に変わりました。

スポンサーリンク
スポンサーリンク