ブログカード形式のリンク表示をライブドアブログで実現する方法
あるブログで、はてなブログからライブドアブログへ引っ越し作業中です。はてなブログではブログカード形式でリンクをかっこよく表示する機能があり、内部リンクも外部リンクもこの機能を多用していたんですが、ライブドアブログでも同様の表示方法を実現してみようと思います。
はてなのブログカード形式は、ライブドアブログでも実現可能か
ライブドアブログで記事を書いてみて、最初に感じたのははてなブログのリンクをブログカード形式で表示してくれる機能は素晴らしかったなぁということ。
ライブドアブログでは、リンクを挿入する機能はありますが、普通にaタグの表記が簡単にできますよというレベルで、テキストリンクが挿入されるだけです。はてなのブログカード形式って、単にテキストリンクが張られているより、クリックされそうな気がします。
↓ブログカード形式とは、こういうやつです
ライブドアブログにインポートした記事の表示を確認
はてなブログの記事をライブドアブログへインポートしました。
記事内部のソースコードはそのままインポートされているので、表示は崩れて閉まっているかなーとおもったら、ブログカード形式でリンクが表示されているではありませんか！なぜぞ？
iframeタグでブログカードを表示
はてなブログでは、外部のサイトでもはてなブログの記事をブログカード形式で表示させるためのAPIを公開しています。
あと、ブログカードのソースコードを見てみると、iframeタグで記述されております。このへんの絡みで、ライブドアブログでも表示されているのだと思うのですが、
技術的なことは置いておいて、はてなブログ以外でブログカード形式の表示に対応している方がおりました。
この記事を参考に、ライブドアブログでもはてなブログ形式でリンクを貼れるように対応してみました。
定型文登録ではなく、プラグインで対応
ライブドアブログには、定型文登録の機能があってHTMLタグを登録しておけば一発でコピペできるのですが、それだとソース内のURLやタイトルも都度変更しなければいけません。
そこで、なるべくはてなブログで出来ていたこと再現するために下記のブラウザプラグインを導入してみました。
firefox用
Chrome用
これらを使えば、右クリック一発でリンクを挿入できます。
リンクをブログカード形式で表示留守ソースコード
iframeのスタイルとかは、はてなブログのスタイルをそのまま使い、URLなどをプラグインの変数に変えました。変数とは、「%url%」みたいな部分のことで、ここがリンク先のURLに置き換わります。
はてブ数やイイね数なんかも引っ張ってこれそうなんですが、そもそもそんなにないので、とりあえずこれを使ってみることにします。
