ブログ記事の生産効率を上げるFirefoxアドオン「Make Link」の設定例まとめ

PR Firefox 0

FirefoxアドオンMake Link設定例集

ブログ記事の生産能力向上にタグ作成ツールの存在は欠かせません。

僕は主にHTMLタグの作成ツールとしてFirefoxアドオンの「Make Link」を使用しています。

このアドオンに、他のブログ記事にリンクを貼る設定などを登録しておくのですが、かなり溜まってきたのでまとめてみることにしました。

「Make Link」の詳しいことについては以前記事に書いたFirefoxアドオン「Make Link」の使い方を参照してください。

photo by Francesco Lodolo

スポンサーリンク
レクタングル（大）広告

普通にサイトやブログ記事などのリンクを作成する

フォーマット例

A（デフォルト）

<a href="%url%">%text%</a>

A（新しいタブで開く）

<a href="%url%" target="_blank">%text%</a>

A（新しいタブで開く＋このリンクをたどらない）

<a href="%url%" target="_blank" rel="nofollow">%text%</a>

使い方1

  1. WEBページの何もないところを右クリックしてMake Linkメニューから選択。
  2. ページのタイトルとURLからリンクが作成されます。

使い方2

  1. リンクテキストにしたいテキストを選択してMake Linkメニューから選択。
  2. 選択したテキストとURLからリンクが作成されます。

表示例

Yahoo! JAPAN

Yahoo! JAPAN

Yahoo! JAPAN

タイトルとサイトの説明を取得してリンクを作成する

meta要素のdescriptionの値を利用して、ページの説明文付きリンクを作成します。

フォーマット例

<a href="%url%" target="_blank">%text%</a><br />%title%

使い方

サイトトップページなど、対象ページの何もないところを右クリックして作成します。

表示例

Google

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

WEBページのサムネイル画像とリンクを作成する

WordPressのサムネイルサービスを利用してWEBページのキャプチャ画像を表示させています。

フォーマット例

<div style="overflow:hidden; margin: 20px 0;">
<a href="%url%" target="_blank">
<img style="margin-bottom: 20px; float: left; margin-right: 0.5em;" src="https://s0.wordpress.com/mshots/v1/%url%?w=120&h=120" alt="" width="120" height="120" />
</a>
<a href="%url%" target="_blank">%text%</a>
</div>

使い方

WEBページの何もないところを右クリックしてMake Linkメニューから選択します。

表示例

WEBページのサムネイル画像とリンクを作成＆はてブ数表示

WordPressのサムネイルサービスを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示させます。

フォーマット例

<div style="overflow:hidden; margin: 20px 0;">
<a href="%url%" target="_blank">
<img style="margin-bottom: 20px; float: left; margin-right: 0.5em;" src="https://s0.wordpress.com/mshots/v1/%url%?w=120&h=120" alt="" width="120" height="120" />
</a>
<a href="%url%" target="_blank">%text%</a>
<a href="https://b.hatena.ne.jp/entry/%url%" target="_blank">
<img src="https://b.hatena.ne.jp/entry/image/%url%" alt="" /></a>
</div>

使い方

WEBページの何もないところを右クリックしてMake Linkメニューから選択します。

表示例

サムネイル画像とリンクを作成＆はてブ数表示＆説明文

WordPressのサムネイルサービスを利用してWEBページのキャプチャ画像を表示させ、はてなブックマーク数も表示、meta要素のdescriptionから取得した説明も表示させます。

フォーマット例

<div style="overflow:hidden; margin: 20px 0;">
<a href="%url%" target="_blank">
<img style="margin-bottom: 20px; float: left; margin-right: 0.5em;" src="https://s0.wordpress.com/mshots/v1/%url%?w=120&h=120" alt="" width="120" height="120" />
</a>
<a href="%url%" target="_blank">%text%</a>
<a href="https://b.hatena.ne.jp/entry/%url%" target="_blank">
<img src="https://b.hatena.ne.jp/entry/image/%url%" border="0" alt="" /></a><br />
%title% 
</div>

使い方

WEBページの何もないところを右クリックしてMake Linkメニューから選択します。

表示例

ぱくたそ-フリー写真素材・無料ダウンロード
写真素材ぱくたそは、「使って楽しい！見て楽しい」をキャッチコピーに11300枚のフリー素材を配布しています。会員登録なしで簡単ダウンロード可能、すべてレタッチ済みの高品質/高解像度です。

引用文を作成する

フォーマット例

引用文（簡易版）

<blockquote>
%text%
</blockquote>
引用：<p><a href="%url%">%title%</a></p>

引用文（HTML5のセマンティック上正しい書き方）

<figure>
  <blockquote>%text%</blockquote>
  <figcaption>
  引用：<cite><a href="%url%">%title%</a></cite>
  </figcaption>
</figure>

使い方

引用したい文章を選択して、右クリックからMake Linkメニューを選択してください。

表示例

引用とは、広義には、他人の著作を自己の作品のなかで紹介する行為、先人の芸術作品やその要素を自己の作品に取り入れること。

引用：引用 – Wikipedia

クリエイティブ・コモンズの画像利用した時の著作権表示

Flickrなどのサイトの画像を利用した時など。

フォーマット例

photo by xxxx（写真のとき）

photo by <a href="%url%" target="_blank">%text%</a>

image by xxxx（イラストなど）

image by <a href="%url%" target="_blank">%text%</a>

credit: xxxx（クレジット表記）

credit: <a href="%url%" target="_blank">%text%</a>

使用例

以下のように著作者の名前や、作品のタイトルをテキスト選択した後、右クリックしてMake Linkメニューを選択してください。

Francesco Lodolo

表示例

photo by Francesco Lodolo

image by Francesco Lodolo

credit: Francesco Lodolo

画像タグを作成する

自分のブログのアイキャッチ画像の再利用なんて時にはいいかも。

フォーマット例

ALT属性を自動取得する場合

<img src="%imgurl%" alt="%text%" />

ALT属性を自分で入力する場合

<img src="%imgurl%" alt="%input%" />

使い方

画像の上で右クリックをしてMake Linkメニューを選択してください。

表示例（このページのアイキャッチ画像から作成）

アイキャッチ画像の再利用

一括設定

Firefoxアドオン「Make Link」の設定情報を移行する方法を参考に、prefs.jsファイルの一括設定用のコードを置いておきます。prefs.jsファイルの編集方法分かっていて、直接エディターで一括設定したい人向けです。

編集前には必ずprefs.jsファイルをバックアップしてから編集してください。何が何だかわからない場合は、一つ一つ手打ちでの入力をお勧めします。

user_pref("net.soylentred.makelink.types.1.title", "サムネイルはてなつきリンク");
user_pref("net.soylentred.makelink.types.1.useentities", true);
user_pref("net.soylentred.makelink.types.10.format", "<img src=\"%imgurl%\" alt=\"%input%\" />");
user_pref("net.soylentred.makelink.types.10.title", "IMG（alt属性は自分で入力する）");
user_pref("net.soylentred.makelink.types.10.useentities", true);
user_pref("net.soylentred.makelink.types.11.format", "%text%\n%url%");
user_pref("net.soylentred.makelink.types.11.title", "TEXT（ページタイトル＋URLのテキスト）");
user_pref("net.soylentred.makelink.types.11.useentities", false);
user_pref("net.soylentred.makelink.types.12.format", "%text% %url%");
user_pref("net.soylentred.makelink.types.12.title", "TEXT（ページタイトル＋URLの一行テキスト）");
user_pref("net.soylentred.makelink.types.12.useentities", false);
user_pref("net.soylentred.makelink.types.13.format", "<div style=\"overflow:hidden;\">\n<a href=\"%url%\" target=\"_blank\">\n<img style=\"float:left;margin-right:.5em;\" src=\"http://capture.heartrails.com/120x120/shorten?%url%\" alt=\"\" width=\"120\" height=\"120\" />\n</a>\n<a href=\"%url%\" target=\"_blank\">%text%</a>\n<a href=\"http://b.hatena.ne.jp/entry/%url%\" target=\"_blank\">\n<img border=\"0\" src=\"https://b.hatena.ne.jp/entry/image/%url%\" border=\"0\" alt=\"\" /></a><br />\n%title%\n</div>");
user_pref("net.soylentred.makelink.types.13.title", "サムネイルはてな説明文つきリンク");
user_pref("net.soylentred.makelink.types.13.useentities", true);
user_pref("net.soylentred.makelink.types.14.format", "<blockquote>\n%text%\n<p style=\"text-align: right;\"><a href=\"%url%\">%title%</a></p>\n</blockquote>");
user_pref("net.soylentred.makelink.types.14.title", "引用文（引用元右寄せ）");
user_pref("net.soylentred.makelink.types.14.useentities", true);
user_pref("net.soylentred.makelink.types.15.format", "<blockquote>\n%text%\n<p><a href=\"%url%\">%title%</a></p>\n</blockquote>");
user_pref("net.soylentred.makelink.types.15.title", "引用文");
user_pref("net.soylentred.makelink.types.15.useentities", true);
user_pref("net.soylentred.makelink.types.4.format", "<a href=\"%url%\">%text%</a>");
user_pref("net.soylentred.makelink.types.4.title", "A（デフォルト）");
user_pref("net.soylentred.makelink.types.4.useentities", true);
user_pref("net.soylentred.makelink.types.5.format", "<a href=\"%url%\" target=\"_blank\">%text%</a>");
user_pref("net.soylentred.makelink.types.5.title", "A（新しいタブで開く）");
user_pref("net.soylentred.makelink.types.5.useentities", true);
user_pref("net.soylentred.makelink.types.6.format", "<a href=\"%url%\" target=\"_blank\" rel=\"nofollow\">%text%</a>");
user_pref("net.soylentred.makelink.types.6.title", "A（新しいタブで開く＋このリンクをたどらない）");
user_pref("net.soylentred.makelink.types.6.useentities", true);
user_pref("net.soylentred.makelink.types.7.format", "<a href=\"%url%\" target=\"_blank\">%text%</a><br />%title%");
user_pref("net.soylentred.makelink.types.7.title", "A（サイトの説明文付き）");
user_pref("net.soylentred.makelink.types.7.useentities", true);
user_pref("net.soylentred.makelink.types.8.format", "photo by <a href=\"%url%\" target=\"_blank\">%text%</a>");
user_pref("net.soylentred.makelink.types.8.title", "A（写真素材を利用した時のクレジット表示）");
user_pref("net.soylentred.makelink.types.8.useentities", true);
user_pref("net.soylentred.makelink.types.9.format", "<img src=\"%imgurl%\" alt=\"%text%\" />");
user_pref("net.soylentred.makelink.types.9.title", "IMG");
user_pref("net.soylentred.makelink.types.9.useentities", true);

 

まとめ

このように、よく利用するHTMLタグはブラウザからクリック一発で直接取得出来るようにすることで、ブログ記事の作成時間を短縮することができます。

Firefoxには、その他に同様の機能を持ったアドオンとしてCoLTが。Google Chromeには、Create Linkがあります。

これらのアドオン（拡張）は、書式がまた違うので、またいずれまとめたいと思います。

参考 寝PCユーザーの僕が使っている「Firefoxアドオン」と「同機能Chrome拡張」まとめ