Chrome拡張機能Create Linkでブログカードリンクを作成する方法

シェアしてもらえると励みになります!

Apr 14 2015createlink

みっきぃ(@miki73_m)です。最近リンクを張る時にブログカードを使い始めました。

今回はChromeの拡張機能「Create Link」を使ってリンクをブログカード化する方法を説明します。

ブログカードとは?

その前にブログカードについて説明します。

はてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまった ブログカード の形式で埋め込むことができます。

「ブログカード」とは、ブログに掲載する記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて、次のように表示する埋め込み形式です。

via ブログカード – はてなブログ ヘルプ

こんな感じになります↓

はてなブログを使っている人にはお馴染みだと思いますが、私が使っているWordPressでもChrome拡張機能「Create Link」を使ってブログカードを作ることが出来ます。

Create Linkの場合、上のリンクのようにページの概要文を取得することは出来ないため、xxxxxxの部分に自分で入力する必要があります。必要ない場合は削除してもOKです。

12436288584_94d6bc46d2_b.jpg
こちらの記事を参考にしました。サムネイルを右に表示することもできます。

Create Linkでの設定する方法

Apr 14 2015createlink1

Chromeを開いてCreate Linkをインストールします。

Create Link – Chrome ウェブストア
Apr 14 2015createlink2

ChromeツールバーにCreate Linkのボタンが表示されるので、クリックし、「Configure」をクリックします。

Apr 14 2015createlink3

「Formats」の表の下の「+」をクリックし、「Name」に任意の名前、「Format」にコードを入力します。はてなブログカード風のコードは以下にようになります。

ブログカード(左サムネイル)のコード

<div class="blog-card" style="padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:474px;width:auto;border-radius:5px;"><div class="blog-card-thumbnail" style="float:left;"><a href="%url%" class="blog-card-thumbnail-link" target="_blank"><img src="http://capture.heartrails.com/120×120/shorten?%url%" class="blog-card-thumb-image wp-post-image" alt="12436288584_94d6bc46d2_b.jpg" style="width:100px;height:100px;"></a></div><div class="blog-card-content" style="margin-left:110px;line-height:120%;"><div class="blog-card-title" style="margin-bottom:5px;"><a href="%url%" class="blog-card-title-link" style="font-weight:bold;text-decoration:none;color:#111;" target="_blank">%text%</a></div><div class="blog-card-excerpt" style="color:#333;font-size:90%;">xxxxxxxxxx</div></div><div class="blog-card-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><span class="blog-card-hatena"><a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a></span></div></div>

ブログカード(右サムネイル)のコード

<div class="blog-card" style="padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:474px;width:auto;border-radius:5px;"><div class="blog-card-thumbnail" style="float:right;"><a href="%url%" class="blog-card-thumbnail-link" target="_blank"><img src="http://capture.heartrails.com/120×120/shorten?%url%" class="blog-card-thumb-image wp-post-image" alt="12436288584_94d6bc46d2_b.jpg" style="width:100px;height:100px;"></a></div><div class="blog-card-content" style="margin-left:0;margin-right:110px;line-height:120%;"><div class="blog-card-title" style="margin-bottom:5px;"><a href="%url%" class="blog-card-title-link" style="font-weight:bold;text-decoration:none;color:#111;" target="_blank">%text%</a></div><div class="blog-card-excerpt" style="color:#333;font-size:90%;">xxxxxxxxxx</div></div><div class="blog-card-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><span class="blog-card-hatena"><a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a></span></div></div>

Apr 14 2015createlink4

入力し終わるとこのようになります。

Apr 14 2015createlink5

リンクを貼りたいページで、Create Linkのボタンを押し、作成したいリンクのメニューを選択すると、リンクを張ることができます。

あとがき

profile

WordPressでもブログカードリンクを張ることができます。見た目もカッコイイのでお気に入りです。Chromeを使ってリンクを張るときに試してみてはいかかがでしょうか?

以上、みっきぃ(@miki73_m)でした。