ブログやサイトを運営しているなら、常に情報提供のソース元リンクや内部関連記事の参考リンクを貼る必要がありますね、近年はブログカードが大いに流行しているので、殆どのサイトでカード型のリンクを見かけるようになりました。

    カード型リンクは実際スタイルが良く見栄えがしますので、クリック率が上がるとの評判があります。カード型リンクのパイオニアは、はてなブログの開発チームによるブログカードに由来しています。はてなブログカードについては、以前詳しく紹介しましたので、選択肢の一つとして、一覧をお勧めします。

Blogger でも使えるはてなブログカード | 学んで実践するサイト運営とSEO対策
ブログカードは、見た目がスタイリッシュで、営業マンが取引先でさっと名刺を差し出す、そんな WEB ページの名刺のような、かっこいいイメージがあります。リンク先の記事概要もなんとなく理解できるし、タッチ式 PC やモバイルでも、リンクをクリックし易いです。


    ブログカードはとても簡単に使えますが、上記記事の中でも触れた様に、幾つかの杞憂が存在しますので、筆者はずっとブログカードのようなカード式リンクの解決方法を探していました。


    ShareHtml ?もっと綺麗にしたメーカーとは?今回見つけたこの「ShareHtmlを、もっと綺麗にしたメーカー」と言うカード式リンクをテストしながら、経過報告と感想を記録したいと思います。

    題名からの推測ですが、ShareHtml と言うプログラムありきのものらしいです。先ず、ShareHtml を筆者は知りませんでしたので、調べて見るとブックマークレットでしたね。フォームスタイルがカード式リンクとよく似ていました。カード式リンクを探しているので、今回ブックマークレットの ShareHtml はこれ以上調べる事はしません。

    「ShareHtmlを、もっと綺麗にしたメーカー」の HP はアイキャッチ画像通りのイメージです。元のページはこちら↓

ShareHtmlを、もっと綺麗にしたメーカー
より美しいHTMLをシェアしよう

     HP タイトルのすぐ下にあるテキストボックスに、当サイトのあるページの url を入力して、テストをしました。すると、下の方にプレビューが現れました。

    アイキャッチの取得とタイトル、descriptionの取得で、見た目ははてなブログカードにかなり近いです。ところで、プレビューの下にあるのは、埋め込み用 html だけでなく、CSS コードもありました。と言う事は、テンプレートの CSS の書き換え若しくは追加が必要になると言う事です。

    CSS の追加はたった一回だけで済みます。あとはリンク毎にhtmlを取得するだけです。開発者のブログでは、開発環境と github に公開されてコードも確認できます。

【作りました】ShareHtmlを、もっと綺麗にしたメーカー【開発方法まとめ】manablog
『ShareHtmlを、もっと綺麗にしたメーカー』という何ともやる気のない名前のサービス(?)を作りました。アイキャッチ画像付きのサイトリンク生成ツールです。


    ただ、それぞれのサイトのテンプレートに追加が必要なのと、毎回「ShareHtmlをもっと綺麗にしたいメーカー」を開いて、リンク毎に URL を貼り付けて、html コードを取得する、投稿ページに戻って、取得した html を貼る、この一連の作業も繰り返すと、実は面倒くさいです。もっとシンプルにリンクできる方法はないでしょうか、テキストリンク並みの操作でできるカード式リンクとか・・・・・・

    保守的な思考かも知れませんが、テキストリンクは当然基本にありますが、画像取得はわざわざ必要ですか?アイキャッチ画像が提唱されてから、あまり長くはないですよね、しかも目的が目立たせる、注意を引くと言う事で、殆どのサイトでは、アイキャッチが本分の内容とマッチしていないのが現状です。寧ろ目立たせる為に、とんでもない画像にとんでもない煽り文句を書いてるとか、かなりうざいサイトが増えていましたよ。

    しかし、ただのテキストリンクより、カード式リンクの方が確かに魅力はあります。説明文があると、より記事の内容が欲しい情報に近いかどうかを確認できますし、枠付きで立体的なイメージがあり、名刺交換に慣れているビジネススタイルでスマートにも感じられます。気持ち的には、自分の運営サイトで使いたいですよね~w

    まだまだ情報不足な気がするので、引き続き類似情報を探して行きたいと思います。