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

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

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

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

 

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

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

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モードにして

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

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

 

まとめ

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

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

 

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

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

 

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

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

 

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

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

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

 

それではまた、 

自己紹介

こんにちは、とらのすけと言います。

 

40台半ばの2児の父です。

仕事は、20年ぐらいITエンジニアをやっています。

プログラミングが好きで始めた仕事ですが

最近ではプログラムからはちょっと離れてしまっています。

 

このブログでは、キャリアアップのために

学習したことや、資格取得の勉強に使用した参考書

オススメの学習方法などを、自分が体験したことを

ベースに紹介していきたいと思います。

等を紹介していきたいと思います。

 

よろしくお願いします。