wordpress 「ブログカード」をEmbedlyで作る方法メモ

スタッフBLOG, ワードプレス


ブログカードをwordpressの投稿にかっこよく表示させる

正式名称を知らないので便宜上「ブログカード」と書きます。

ブログカードとはなんぞ?

私もつい昨日ぐらいに知ったんですけどね。

 

「こっちのページを参考にして下さいね」ってリンクがかっこいいカード型になってるのを「ブログカード」と呼ぶみたいです。

 

文字にリンク設定するより、なんかかっちょいいです。


ブログカード-Google Serch結果


比べてみると普通のリンクが古くさくてかっこ悪く感じてしまいます。

私もかっこいいのやってみたい!!と思い立ちなんとかできたので、やってみた事を順番に説明します。

Embedlyブックマークレットをブックマークに追加する

Embedlyというサービスで簡単にブログカードが作れます。

自分でスクリプトを作る方法もあるようですがわたしには敷居が高いので今はやめておきます。

 

さて、まずは上記リンクからEmbedlyのサイトへ行って、ブックマークレットをブックマークに登録します。
ブックマークの登録のしかたは、下のをブックマークバーにドラッグ&ドロップするだけでOK。

または、①を右クリックで「リンクアドレスをコピー」して、ブックマークに登録してもいいです。

Embedlyの使い方

ブックマークレットを登録したら準備は完了です。ブックマークしたいページでブックマーク【+Embed 】をクリックします。

今回はworepressのページ。

ブックマークバーに登録していない場合は、ページを表示した状態でブックマークをクリックします。

すると、こんな画面が出てきます。

①サイトの画像

②投稿のタイトル

それぞれクリックすると縮小したり、表示を消したりできます。

投稿本文もクリックして本文を削除や短くしたりなどの編集が可能です。

編集をしたらソースをコピーして投稿に貼り付ければ完了です。

 

WordPress.com:無料のサイトやブログを作成

 

ちょっと満足。ちょっと不満。

投稿との境が分かりづらいので枠をつけてみたいと思います。

Embedly のリンクカードをカスタマイズする

 

自分の記事との境目がわかりずらいのでブログカードを浮き立たせるようにします。

囲みのCSSコードにEmbedlyのコードをはさむと下のような状態になります。

 

 

こちらの記事のソースコードを使わせていただきました。

 

コードを「AddQuicktag」というプラグインに登録しておくと投稿画面で挿入できるので便利です。

 

つ ぶ や き  

  • 10月1日から「スズキ愛車無料点検」始まります!
  • 運動会は雨かなぁ(T-T)
  • apple watch3買っちゃった。