プラグインなしでブログカード

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

はてなブログやワードプレスのプラグインではURLを記入する（＋アルファの操作）だけでカード形式の表示ができる機能があるのですが、freoには現状そのような機能やプラグインはありません。そこで、サイト側に機能を持たせることなく比較的簡単にブログカード形式のリンクを生成できる方法を探してみました。要はカード形式表示できるようなHTMLを生成し本文投稿時に記述するというだけなのでfreo以外でも使えます。

ブラウザ拡張機能「Format Link」

「Format Link」は、ウェブページのURLやタイトルをコピーして、設定しておいたフォーマットに組み込んだ形で手軽にHTMLタグなどを生成して貼り付けられます。以前から重宝しているアドオンです。

使い方

ブラウザに「Format Link」を追加するとツールバーボタンとコンテキストメニューが追加されます。

設定

「アドオンマネージャー」→「Format Link」→「オプション」を開くと下図のような設定フォームがあります。そこに自由にタイトルとフォーマットを入力し「Save changes」をクリックし設定します。「Restore defaults」クリックで初期状態にリセットされます。コンテキストメニューへの追加がいらない場合は「Context menus」のチェックを外します。「Context menus」にチェックし「Create submenus」のチェックをしない場合はコンテキストメニュー「Format Link」クリックで設定フォームの一番上のフォーマットがコピーされます。「Create submenus」のチェックを入れた場合はコンテキストメニュー「Format Link」のサブメニューとして設定したフォーマットすべてが表示され、選択したフォーマットでコピーすることができます。

使える変数は以下。

{{title}}：ページのタイトル
{{url}}：ページあるいは選択したURL
{{text}}：選択したテキスト・リンク上で右クリックした場合はリンクテキスト・それ以外はページタイトル

コピーするには

ツールバーボタン左クリック

図のようなポップアップが表示され、実際にコピーされる内容を確認しながらフォーマットを切り替えることができます。

ツールバーボタン右クリック

図のように各フォーマットのメニューが表示され、クリックすると選んだフォーマットでコピーされます。

ページ上で右クリック

コンテキストメニューが図のように表示され、クリックすると選んだフォーマットでコピーされます。

「Format Link」＋「HeartRails Capture」でブログカード

HeartRails Captureはウェブページや PDF ファイル、Office ファイルのサムネイル画像を作成するサービスです。

https://capture.heartrails.com/サムネイルの幅xサムネイルの高さ/shorten?サムネイルを取得したいサイトのURL

でサイトのスクリーンショットのサムネイルを取得できます。こちらのサービスを利用して画像付きカード形式のリンク用HTMLを生成する試みです。

「Format Link」設定フォームに入力するコード一例

Title:リンクカード
Format:

<a href="{{url}}" target="_blank" class="card-link" style="display:block;padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:100%;width:auto;text-decoration:none;border-radius:5px;">\n\t<div class="card-link-thumbnail" style="float:left;"><img src="https://capture.heartrails.com/120x120/shorten?{{url}}" class="card-link-thumb-image" alt="{{title}}" style="border:0;width:120px;height:120px;"></div>\n\t<div class="card-link-content" style="margin-left:130px;line-height:120%;">\n\t\t<div class="card-link-title" style="margin-bottom:5px;font-weight:bold;color:#111;">{{title}}</div>\n\t\t<div class="card-link-excerpt" style="color:#333;font-size:90%;">{{text}}</div>\n\t</div>\n\t<div class="card-link-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><em><img src="https://www.google.com/s2/favicons?domain={{url}}" style="vertical-align:middle;margin-right:6px;">{{url}}</em></div>\n</a>

ファビコンの表示にはGoogleのAPIを利用しています。

コピーされるHTMLタグ・実際の表示

例として当サイトトップの「インフォメーション」の下の文章を選択しFormat Linkでコピーしたとします。

<a href="https://10prs.com/" target="_blank" class="card-link" style="display:block;padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:100%;width:auto;text-decoration:none;border-radius:5px;">
	<div class="card-link-thumbnail" style="float:left;"><img src="https://capture.heartrails.com/120x120/shorten?https://10prs.com/" class="card-link-thumb-image" alt="10press" style="border:0;width:120px;height:120px;"></div>
	<div class="card-link-content" style="margin-left:130px;line-height:120%;">
		<div class="card-link-title" style="margin-bottom:5px;font-weight:bold;color:#111;">10press</div>
		<div class="card-link-excerpt" style="color:#333;font-size:90%;">ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録および実験場です。HTML5・CSS3・Javascriptを使用しています、閲覧は最新のブラウザをお勧めします。</div>
	</div>
	<div class="card-link-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><em><img src="https://www.google.com/s2/favicons?domain=https://10prs.com/" style="vertical-align:middle;margin-right:6px;">https://10prs.com/</em></div>
</a>

10press

ウェブサイト制作、HTML5・CSS3、CMS「freo」についての備忘録および実験場です。HTML5・CSS3・Javascriptを使用しています、閲覧は最新のブラウザをお勧めします。

インラインスタイルにしている理由はサイトデザインを変更したときにもカード形式のリンクのデザインは特に変えなくてもいいかなと思っているからです。class属性を付加しているのでスタイルを上書きすることもできます（要「!important」）。ただ、この方法は以下のような注意点があります。

大規模サイト（月間100万PV以上）での利用は要相談（有償）
リンク先のサイトが設定しているOGP情報の利用はできない

また、上記のコードはaタグの中にdivタグを入れているのですが、freoのデフォルトエディターであるtinyMCEではそのままだとinvalid扱い？になりa要素がdiv要素に書き換えられてしまいます。その回避策については近日書こうと思います。

「Format Link」＋「はてなブログカードAPI」でブログカード

はてなブログカードAPIでは

http://hatenablog.com/embed?url=取得したいサイトのURL

でリンク先のサイトのOGP情報を取得することができます。このURLをiframeで参照するだけではてなブログ以外でもカード形式のリンクを表示することが可能です。

「Format Link」設定フォームに入力するコード一例

Title:はてなブログカード
Format:

<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:100%;" title="{{title}}" src="https://hatenablog-parts.com/embed?url={{url}}" frameborder="0" scrolling="no"></iframe>

コピーされるHTMLタグ・実際の表示

<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:100%;" title="10press" src="https://hatenablog-parts.com/embed?url=https://10prs.com/" frameborder="0" scrolling="no"></iframe>

ただ、この方法は以下のような注意点があります。