昨日、Wordpress内部リンクをブログカード化するカスタマイズ方法を書きました。
で前回、外部リンクもブログカード化出来るようにFirefoxアドオンのMake Linkを利用した方法を書きました。
今回は、外部リンクをブログカード化するのにChromeのCreate Link拡張を利用した方法を紹介します。
photo by Shannon Hauser
目次
外部リンク紹介ブログカード
今回、Create Linkを利用して作成するブログカードのデザインは以下のようになります。
Make Linkアドオンを使用した方法と違って、Create Linkの場合、ページのメタディスクリプション（ページの概要文）を取得できる機能がありません。
ですので、ページの概要文は、xxxxxxxxxxの部分に、自前で記入する必要があります。概要文が不要の場合は、xxxxxxxxxx削除してしまってもOKです。
サムネイルが右のバージョンも作成しました。
もちろん、外部リンクだけではなく、内部リンク紹介用に使用してもOKです。（※ページ概要は、手動で入力）
極端に幅の狭いデバイスない限り、レスポンシブにも対応しています。
Create Linkでブログカードの作成を方法
では、上記のようなページ紹介用のブログカードをChrome拡張のCreate Linkで作成する方法を紹介します。
主な手順は以下の3手順です。
- Create Linkのインストール
- Create Linkの設定
- Create Linkで目当てのページのリンクを作成
Create Linkのインストール
まずは、ChromeにCreate Link拡張をインストールします。
Chromeで、Create Linkを開いてインストールを行ってください。
Create Linkの設定
Create Linkの設定は、Chromeのツールバーにある「Create Linkボタン」をクリックし、「Configure」を選択することで行えます。
「Configure」を選択すると「Options – Create Link」画面が表示されます。
Create Linkに新しく設定を追加するには、テーブルの下の方にある「＋」ボタンをクリックします。
そして、以下の入力項目に次のように入力します。
- Name：任意の名前
- Format：リンク作成用のコード
リンク作成用のコードは以下です。
ブログカード（左サムネイル）のコード
<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%;">xxxxxxxxxx</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 src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a></span></div></div>
ブログカード（右サムネイル）のコード
<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%;">xxxxxxxxxx</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 src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a></span></div></div>
入力し終わると、こんな感じになります。
その他Create Linkの設定例
その他のCreate Linkの設定は以下に詳しく載っています。
Create Linkからブログカードリンクの作成
あとは、Chromeで紹介したいページに移動します。
ページを移動したら、ツールバーをクリックして目当てのメニューを選択し、リンクを作成します。
作成したブログカードリンクは、以下のようになります。（※概要文は、メタディスクリプションをコピペ）
以前、僕が使用していた方法で同様にリンクを作成すると以下のようになるので、多少見た目は良くなったかと思います。
まとめ
僕は、用途に応じてFirefoxとChrome両方のブラウザを使用しています。
ですので、Firefoxを利用してリンクを作成する方法と、今回の方法で、どちらのブラウザでも、ある程度手軽にブログカードリンクを作成できるようになりました。
今後は、この新しく作成したブログカードリンクで、いろいろなサービスや記事を紹介できればと思います。
