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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

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

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」の使い方と設定例
Firefoxアドオンの「Make Link」は、右クリックメニューから気軽にaタグやimgタグなどのHTMLタグの生成をしてくれるツー...
ブログ記事の生産効率を上げるFirefoxアドオン「Make Link」の設定例まとめ
ブログ記事の生産能力向上にタグ作成ツールの存在は欠かせません。 僕は主にHTMLタグの作成ツールとしてFirefoxアドオンの「Mak...

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

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

Make Linkの利用

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

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

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

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

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

リンクダグを一発で作成するFirefoxアドオン「Make Link」の使い方と設定例
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

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