ライブアブログで、見栄えのいいページリンク(はてなブログカード)を使う方法

ライブドアブログで記事を書いてるときに

記事中のリンク表示をブログカードで

表示したいと思ったことはありませんか?

 

ブログカードというのは、こういう感じに

記事内でリンクを貼るやつです。  

learningdiary.hatenablog.com

 

 

最初に使い始めたのがライブドアブログなんですが、

残念ながらライブドアブログには、このブログカード

形式でリンクを作る機能がありません。

 

普通にリンクを作るとシンプルな

<a>タグでリンクを作る機能しかないです。

 

その後、別テーマのブログも作りたいな~と思って

はてなブログで始めたところ

この形式のリンクが簡単に作れることがわかりました。

 

見栄えもいいし、クリックもされやすそうな

ので、ライブドアブログでもできないかな~?

 

と思って調べてみましたところ、結構簡単に

できることがわかりました。

それでは、やり方を解説したいと思います。

 

環境準備

Chrome にCreate Link 拡張機能をいれる

ブログカードを手軽に作るために

Create Link という拡張機能を追加します。

 

Chromeで以下のリンクを開き

追加ボタンを押せば簡単に追加できます。

chrome.google.com

 

Create Linkの設定をする

Chrome拡張機能の設定を開いて

Create Linkから、「詳細」-「拡張機能のオプション」を開きます。

 

開いた画面で、Formatsという項目の下に表があるので

表の下にある+ボタンを押して行を追加します。

 

Nameは、Blogカードのリンクを作ることが

分かれば何でもいいので、任意の名前を入れてください。

 

Formatには、以下のソースを入れてください。

 

<iframe style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="%title%" src="http://hatenablog.com/embed?url=%url%" frameborder="0" scrolling="no"><a href="%url%" data-mce-href="%url%">%title%</a></iframe>

 

 これで環境準備は終わりです。

 

リンクの作り方

リンクの作り方はとても簡単です。

 

リンクを取得

ブログカード化したいページをChromeで開きます。

ページ内のどこでもいいので、右クリックをします。

 

右クリックメニューに「Create Link」という

メニューが追加されているので、「Create Link」の

サブメニューにある、環境設定でNameに入れた

名前のメニューを選択してください。

 

すると、ブログカードを作る用のHTMLコードが

クリップボードにコピーされます。

 

ライブドアブログの編集画面で貼り付け

後は、ライブドアブログの記事編集画面で

編集モードをHTMLモードにして

クリップボードのコードを、ブログカードを

入れたい箇所に貼り付けるだけです。

 

まとめ

 ライブドアブログで、ブログカードを挿入する

方法をまとめてみました。

 

すごく簡単に出来て、見栄えもいいので

記事内のリンクを作るのにオススメです。

 

っていうか、なんでライブドアブログには

デフォでこの機能ないんだろうか…

 

これまで、ライブドアブログにで書いた記事の

リンクを作り直すのはとても面倒ですが

地道に作業をしたいと思います。

 

それではまた、