昨日、Wordpressの投稿エディターにURLを貼り付ければ、はてな風のブログカードが自動的に表示される方法を紹介しました。
以下がURLからWordpressによって自動生成されたブログカードです。
ただ、この方法は、Wordpressで運営している自サイト内のURLでしか表示されません。
ブログでは、内部リンク以外にも他のサイトを紹介することは多々あります。なので、出来れば外部リンクも、はてな風の綺麗なブログカードで紹介したくなってきました。
そこで、外部リンク紹介用ブログカードを、FirefoxのMake Linkアドオンを使ってクリック一発でブログカードを作成できるようにするコードを作成してみることにしました。
で、作ってみたら、なかなか小奇麗なのが出来たので、作成方法を紹介したいと思います。
photo by Oliver Propst
目次
外部リンク紹介ブログカード
今回作成した、外部リンク紹介をブログカードの見た目は、以下のようになります。
以前、僕が使用していた紹介用リンクは、こんなだったので、以前よりは、多少見た目も良くなったかと思います。
一応、はてなと同じになるよう右にサムネイルが来るバージョンも作成しました。
もちろん、外部リンクだけではなく内部リンクにも使うこともできます。
サイトの説明部分は、ウェブページのメタディスクリプション（HTMLのヘッダーに書き込まれるページ概要）を利用して取得しています。
レスポンシブにも対応しています。
Make Linkでブログカードの作成方法
では、上記のようなページ紹介用のブログカードをFirefoxアドオンのMake Linkで作成する方法を紹介します。
主な手順は以下の3手順です。
- Make Linkのインストール
- Make Linkの設定
- Make Linkで目当てのページのリンクを作成
Make Linkのインストール
まずは、FirefoxにMake Linkアドオンをインストールする必要があります。
Firefoxで、Make Linkを開いてMake Linkのインストールを行ってください。
インストールしたらFirefoxを再起動してください。
Make Linkの設定
Make Linkの設定は、Firefoxでウェブページの何もないところを右クリックして「Make Link→設定」から設定を行います。
すると「Make Linkオプション」ダイアログが表示されるので、「新規」ボタンを押してください。
「新しいリンク形式」を作成するダイアログが表示されます。そこに設定を記入します。
それぞれの入力項目には以下のように記入します。
名前
名前には、自分が使いやすい名前を記入します。
今回は、「ブログカード（左サムネイル）」という名前にしました。
フォーマット
フォーマット部分には、以下のコードをコピペして貼り付けます。
<div class="blog-card" style="padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:474px;width:auto;border-radius:5px;"><div class="blog-card-thumbnail" style="float:left;"><a href="%url%" class="blog-card-thumbnail-link" target="_blank"><img src="http://capture.heartrails.com/120x120/shorten?%url%" class="blog-card-thumb-image wp-post-image" alt="12436288584_94d6bc46d2_b.jpg" style="width:100px;height:100px;"></a></div><div class="blog-card-content" style="margin-left:110px;line-height:120%;"><div class="blog-card-title" style="margin-bottom:5px;"><a href="%url%" class="blog-card-title-link" style="font-weight:bold;text-decoration:none;color:#111;" target="_blank">%text%</a></div><div class="blog-card-excerpt" style="color:#333;font-size:90%;">%title%</div></div><div class="blog-card-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><span class="blog-card-hatena"><a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"><img border="0" src="https://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a></span></div></div>
このコードを元にブログカードリンクを一発作成します。
HTMLエンティティを使用する
HTMLエンティティは、チェックをつけておきます。
サムネイルが右のブログカード設定
一応サムネイルが右側になるブログカード設定方法も以下に記しておきます。
設定方法は、先程と同様です。
フォーマット部分は、以下のコードを利用します。
<div class="blog-card" style="padding:12px;margin:15px 0;border:1px solid #ddd;word-wrap:break-word;max-width:474px;width:auto;border-radius:5px;"><div class="blog-card-thumbnail" style="float:right;"><a href="%url%" class="blog-card-thumbnail-link" target="_blank"><img src="http://capture.heartrails.com/120x120/shorten?%url%" class="blog-card-thumb-image wp-post-image" alt="12436288584_94d6bc46d2_b.jpg" style="width:100px;height:100px;"></a></div><div class="blog-card-content" style="margin-left:0;margin-right:110px;line-height:120%;"><div class="blog-card-title" style="margin-bottom:5px;"><a href="%url%" class="blog-card-title-link" style="font-weight:bold;text-decoration:none;color:#111;" target="_blank">%text%</a></div><div class="blog-card-excerpt" style="color:#333;font-size:90%;">%title%</div></div><div class="blog-card-footer" style="font-size:70%;color:#777;margin-top:10px;clear:both;"><span class="blog-card-hatena"><a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"><img border="0" src="https://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a></span></div></div>
Make Linkのその他の設定方法
Make Linkのその他の設定方法や、利用サンプルは以下に詳しく書いてあります。
Make Linkからブログカードの作成
あとは、Firefoxで紹介リンクを作成したいページに移動し、ページ上の何もないところを右クリックして「Make Link→（作成したメニュー）」を選択すればクリック一発でクリップボード上にブログカード紹介リンクが作成されます。
メニューを選択した時点で、クリップボードにタグが格納されているので、あとはエディターなどに貼り付けるだけです。
このような動作で、ページ上からサイトタイトル、サイトURL、サイト概要が取得され以下のようなブログカード風のリンクが作成されます。
注意しなければいけないのは、テキストなどが選択されていたり、リンク上で右クリックしたりすると、違った情報を取得してしまうので、必ずページの何もないところを右クリックして作成してください。
詳しい仕様は、以下を参照してください。
まとめ
今回の方法で、見た目が小奇麗なページ紹介用リンクが作成できるようになりました。
内部リンクで、サイト内を巡回してもらうのも大切です。しかし、記事で紹介したリンク先に跳んでもらうのも、どちらも大切です。
良い記事などを見つけたら、こういったブログカードで紹介して、少しでも多くのアクセスをリンク先に送る。そうすることで、自分のサイトをリンク先の運営者に認知してもらうのも、なかなか良いブログの営業活動になると思います。
こんにちわ。
いいですねこれ。
「あとは、Firefoxで紹介リンクを作成したいページに移動し、ページ上の何もないところを右クリックして「Make Link→（作成したメニュー）」を選択すればクリック一発でブログカード紹介リンクが作成されます。」
何も起きないのですが、どこに作成されるんでしょうか？(;´д｀)
ワードプレス利用者でないと動かないとかではないですよね。
新しいタブも現れないし新しいウィンドウも現れないんですが
自分がとんでもない勘違いしてるんですかね？