ワンクリックで綺麗なブログカードリンクを作成する方法(FirefoxのMake Linkアドオン使用)

シェアする

昨日、Wordpressの投稿エディターにURLを貼り付ければ、はてな風のブログカードが自動的に表示される方法を紹介しました。

以下がURLからWordpressによって自動生成されたブログカードです。

9月にはてなブログがリリースしたブログカード、かっこいいですよね。

ただ、この方法は、Wordpressで運営している自サイト内のURLでしか表示されません。

ブログでは、内部リンク以外にも他のサイトを紹介することは多々あります。なので、出来れば外部リンクも、はてな風の綺麗なブログカードで紹介したくなってきました。

そこで、外部リンク紹介用ブログカードを、FirefoxのMake Linkアドオンを使ってクリック一発でブログカードを作成できるようにするコードを作成してみることにしました。

で、作ってみたら、なかなか小奇麗なのが出来たので、作成方法を紹介したいと思います。

photo by Oliver Propst

スポンサーリンク
レクタングル(大)広告

外部リンク紹介ブログカード

今回作成した、外部リンク紹介をブログカードの見た目は、以下のようになります。

12436288584_94d6bc46d2_b.jpg
初級者向けのシンプルな無料Wordpressテーマ。SEO最適化済みで、アドセンスなどからすぐに収益化できるような作りになっています。

以前、僕が使用していた紹介用リンクは、こんなだったので、以前よりは、多少見た目も良くなったかと思います。

一応、はてなと同じになるよう右にサムネイルが来るバージョンも作成しました。

12436288584_94d6bc46d2_b.jpg
初級者向けのシンプルな無料Wordpressテーマ。SEO最適化済みで、アドセンスなどからすぐに収益化できるような作りになっています。

もちろん、外部リンクだけではなく内部リンクにも使うこともできます。

12436288584_94d6bc46d2_b.jpg
WordPressテーマを作成するときに利用すると作業効率が大幅に変わってくる役立つツールのまとめです。

サイトの説明部分は、ウェブページのメタディスクリプション(HTMLのヘッダーに書き込まれるページ概要)を利用して取得しています。

レスポンシブにも対応しています。

スポンサーリンク
レクタングル(大)広告

Make Linkでブログカードの作成方法

では、上記のようなページ紹介用のブログカードをFirefoxアドオンのMake Linkで作成する方法を紹介します。

主な手順は以下の3手順です。

  1. Make Linkのインストール
  2. Make Linkの設定
  3. Make Linkで目当てのページのリンクを作成

Make Linkのインストール

まずは、FirefoxにMake Linkアドオンをインストールする必要があります。

Firefoxで、Make Linkを開いてMake Linkのインストールを行ってください。

Make Linkのインストール

インストールしたらFirefoxを再起動してください。

Make Linkの設定

Make Linkの設定は、Firefoxでウェブページの何もないところを右クリックして「Make Link→設定」から設定を行います。

Make Linkの設定

すると「Make Linkオプション」ダイアログが表示されるので、「新規」ボタンを押してください。

新規ボタンを押す

「新しいリンク形式」を作成するダイアログが表示されます。そこに設定を記入します。

新しいリンク形式の作成

それぞれの入力項目には以下のように記入します。

名前

名前には、自分が使いやすい名前を記入します。

今回は、「ブログカード(左サムネイル)」という名前にしました。

フォーマット

フォーマット部分には、以下のコードをコピペして貼り付けます。

このコードを元にブログカードリンクを一発作成します。

HTMLエンティティを使用する

HTMLエンティティは、チェックをつけておきます。

サムネイルが右のブログカード設定

一応サムネイルが右側になるブログカード設定方法も以下に記しておきます。

設定方法は、先程と同様です。

右サムネイルブログカードの作成

フォーマット部分は、以下のコードを利用します。

Make Linkのその他の設定方法

Make Linkのその他の設定方法や、利用サンプルは以下に詳しく書いてあります。

Firefoxアドオンの「Make Link」は、右クリックメニューから気軽にaタグやimgタグなどのHTMLタグの生成をしてくれる...
ブログ記事の生産能力向上にタグ作成ツールの存在は欠かせません。 僕は主にHTMLタグの作成ツールとしてFirefoxアドオンの「Make ...

Make Linkからブログカードの作成

あとは、Firefoxで紹介リンクを作成したいページに移動し、ページ上の何もないところを右クリックして「Make Link→(作成したメニュー)」を選択すればクリック一発でクリップボード上にブログカード紹介リンクが作成されます。

Make Linkの利用

メニューを選択した時点で、クリップボードにタグが格納されているので、あとはエディターなどに貼り付けるだけです。

このような動作で、ページ上からサイトタイトル、サイトURL、サイト概要が取得され以下のようなブログカード風のリンクが作成されます。

12436288584_94d6bc46d2_b.jpg
日本最大級のポータルサイト。検索、オークション、ニュース、天気、スポーツ、メール、ショッピングなど多数のサービスを展開。あなたの生活をより豊かにする「課題解決エンジン」を目指していきます。

注意しなければいけないのは、テキストなどが選択されていたり、リンク上で右クリックしたりすると、違った情報を取得してしまうので、必ずページの何もないところを右クリックして作成してください。

詳しい仕様は、以下を参照してください。

Firefoxアドオンの「Make Link」は、右クリックメニューから気軽にaタグやimgタグなどのHTMLタグの生成をしてくれる...
スポンサーリンク
レクタングル(大)広告

まとめ

今回の方法で、見た目が小奇麗なページ紹介用リンクが作成できるようになりました。

内部リンクで、サイト内を巡回してもらうのも大切です。しかし、記事で紹介したリンク先に跳んでもらうのも、どちらも大切です。

良い記事などを見つけたら、こういったブログカードで紹介して、少しでも多くのアクセスをリンク先に送る。そうすることで、自分のサイトをリンク先の運営者に認知してもらうのも、なかなか良いブログの営業活動になると思います。

『ワンクリックで綺麗なブログカードリンクを作成する方法(FirefoxのMake Linkアドオン使用)』へのコメント

  1. 名前:タモリ 投稿日:2016/08/28(日) 09:51:14 ID:d8234d8f6

    こんにちわ。
    いいですねこれ。

    「あとは、Firefoxで紹介リンクを作成したいページに移動し、ページ上の何もないところを右クリックして「Make Link→(作成したメニュー)」を選択すればクリック一発でブログカード紹介リンクが作成されます。」

    何も起きないのですが、どこに作成されるんでしょうか?(;´д`)
    ワードプレス利用者でないと動かないとかではないですよね。
    新しいタブも現れないし新しいウィンドウも現れないんですが
    自分がとんでもない勘違いしてるんですかね?

  2. 名前:タモリ 投稿日:2016/08/28(日) 10:14:33 ID:d8234d8f6

    ブックマークレットというのがややこしいのでこちらなら手軽かと思ったのですが、お手数かけるのもあれなので諦めることにしました。
    コメント消して頂いても結構です。
    お手数かけます。

  3. わいひら 名前:わいひら 投稿日:2016/08/29(月) 08:10:10 ID:0120098c8

    何も起きないのですが、どこに作成されるんでしょうか?(;´д`)

    クリップボード上に作成されます。
    あとは、「貼り付け」を行うと、タグが貼り付けられます。

    記事の本文には、クリップボードのことは書いてなくて、わかりづらかったですね。
    修正しておこうと思います。

  4. 名前:タモリ 投稿日:2016/09/10(土) 18:26:21 ID:fec0866aa

    お久しぶりです。
    ご回答ありがとうございました。
    今やってみたところ無事できました。
    どうもありがとうございます。

    ところで
    私のブログ(fc2で独自ドメイン)、共有数が結構あったりするのでカウント数付きの共有ボタンがどうしても設置しくていろいろやってみたのですが知識が無かったりで苦労して半分諦めています。
    お忙しいので助けて頂く事はできませんよね?

    もしお時間あるならメール頂いても結構ですのでお助けいただけるのであればよろしくお願い致します。

    では失礼致します。

  5. わいひら 名前:わいひら 投稿日:2016/09/13(火) 13:09:59 ID:be2062334

    それは、仕事としての依頼ということでしょうか?
    ただ、申し訳ないですが現在は仕事としてもそういったカスタマイズ依頼は、他の仕事が忙しく受けていないので、ご協力するのは難しいです。

  6. 名前:moo 投稿日:2017/01/28(土) 06:05:54 ID:537a5e674

    有難く使わせて頂いております。
    便利なものを作って頂き本当に助かっています。ありがとうございます。

  7. わいひら 名前:わいひら 投稿日:2017/01/29(日) 06:06:57 ID:b75456b29

    この記事がお役に立てたのであれば嬉しいです!

  8. 名前:まどかひろし 投稿日:2017/04/17(月) 10:01:53 ID:2c39b126d

    こんにちわ。お世話になります。

    このカードリンク作成の際に、取得文字数を増やしたりという調整はできないんでしょうか?

  9. わいひら 名前:わいひら 投稿日:2017/04/18(火) 15:42:11 ID:28d3a6df7

    こんにちは。
    現在のMake Linkの仕様ではできないと思います。
    この記事の方法では、サイトのメタディスクリプションタグから説明文を取得しています。
    当記事のソースコードで言えば以下の部分です。

    この、content属性の値以上のものは取得できないようになっています。