ブログに便利！class指定もできるリンクを素早く生成できるChrome拡張機能「Create Link」

記事でリンクを使う際、エディターの「link」ボタンやコード（<a href="URL"></a>）で作成しますよね。特にリンクにclass指定して装飾をつける場合もあるかと思います。

そんな時、リンクを何十個も多用する記事の場合だと、大変手間がかかってしまいます。より簡単に早くリンクをつくるには、Chromeエクステンション（拡張機能）の「Create Link」が便利です。

例えば、当ブログでリンクを使う際よくこういうコードを書きます。ただ、このコードを毎回書くのはなかなか骨が折れます。

<p class="align1"><a href="URL" class="button">ページタイトル</a></p>

それが「Create Link」によって、「URL」と「ページタイトル」が挿入された状態でコードが生成されるので非常に便利です。

本記事では「Create Link」で具体的にどういうことができるのか解説していきます。

「Create Link」の機能概要

「Create Link」を使うと、Webページのテキストリンクをワンタッチで作成できます。

見ているページを右クリックすると下記のようなメニューが表示され、ページタイトルとURLのコピーはもちろん、登録した形式でクリップボードにコピーできます。

Create Linkの使用イメージ

主な機能は下記の通りです。

シンプルにページのタイトルとURLをコピペして共有することはもちろん、ワンタッチでHTMLのリンクタグ（<a href="URL"></a>）としてペーストできるので、ブログやサイトにそのまま貼り付けて使えるわけです。

さらにオリジナルのコピー形式を登録できるので、ペーストした際にリンクボタンとして表示されるように、ボタンのclassを含んだHTMLタグごと登録しておくことなども可能です。

基本的な使い方と、オリジナルのコピー形式を設定する方法をご紹介いたします。「Create Link」は下記の公式ページからインストールいただけます。

Chrome拡張機能「Create link」のページ

任意のページで右クリックすると、お好みの形式でクリップボードにコピーできます。

ちなみにページだけでなく、ページ内に設置してあるリンクにも有効です。リンク箇所にカーソルを合わせて右クリックすると、ページを開かずともリンク先ページのタイトルやURLを取得できます。

Create Linkの使用イメージ

デフォルトでは下記のコピー形式（フォーマット）が設定されています。ページのタイトルやURLをコピーしたり、リンクタグ（<a href="URL"></a>）としてコピーするだけなら十分使えます。

オリジナルのコピー形式はオプションから登録できます。おすすめの形式もいくつか用意しましたので、参考にご覧ください。

まずは、右上の拡張機能の箇所から「オプション」をクリックします。

Create Linkのオプションの設定箇所

オプションをクリックすると下記画面が開きますので、ここで任意のコピー形式を設定していきます。

オリジナルのコピー形式の追加箇所

不要なものは「−」ボタンで削除可能で、「+」ボタンで、オプション名とオリジナルのフォーマットを登録できます。

オプション画面に英語で書いてある通り、対応している変数は下記の通りになります。各変数やテキスト、HTMLを組み合わせてオリジナルのフォーマットを追加できます。

変数	コピーされる対象や挙動
%url%	ページのURLか選択したリンク先のURL
％text％	ページタイトルか選択したテキスト
％text_n％	ページタイトルか選択したテキスト（改行はそのままコピーされます）
％text_br％	ページタイトルか選択したテキスト（改行は<br />に変換されます）
％text_md％	ページタイトルか選択したテキスト（markdown向けにエスケープされます）
％title％	ページタイトル
％htmlEscapedText％	ページタイトルか選択したテキスト（HTMLエスケープ）
%input%	都度テキストを入力するためのダイアログが表示されます

オプション名	フォーマット
シンプルなリンクタグ	<a href="%url%">%htmlEscapedText%</a>
別タブで開くリンクタグ	<a href="%url%" target="_blank" rel="noopener noreferrer">%htmlEscapedText%</a>
リンク文字列入力可能なタグ	<a href="%url%" target="_blank" rel="noopener noreferrer">%input%</a>
当ブログ（TCD公式）ボタン用タグ	<p style="text-align: center;"><a href="%url%" class="button" target="_blank" rel="noopener noreferrer">%title%</a></p>
「サイトを見る」ボタン用タグ	<p style="text-align: center;"><a href="%url%" class="button" target="_blank&" rel="noopener noreferrer">サイトを見る</a></p>