2017-09-27

Chrome拡張機能 Create Linkで簡単にリンク作成

どうも。
残暑も無く秋になってしまいましたね。

さて、Bloggerにて記事を投稿していて便利な機能を紹介します。

Chromeには拡張機能が追加可能で、これらはwebの閲覧時に便利なだけでは無く、ブログの記事作成時やテンプレートの変更時に便利な物が幾つかあります。
…ご存知な方が多数だと思います。

今回はその拡張機能の1つで、リンク作成が簡単に出来る機能「Create Link」を使ってみました。
些細なことですが、意外とストレスなくリンクを作成できます。

Create Linkを使ってみた

「Create Link」は、Chromeに追加する拡張機能で、リンクを貼りたいページをクリックするだけで、予め設定したコードに生成、クリップボードにコピーする事が可能です。

例えば、<span>で囲いclassを持たせる<a>タグ等のユーザー固有の設定の場合でもFormatを設定しておく事によって、クリックだけでリンクを作成する事が可能です。

Chromeに拡張機能を適用

ChromeでCreate Linkが使用出来るようにChromeウェブストアより適用（インストール？）します。

Create Link 

完了するとChromeのツールバーにアイコンが追加されます。
アイコンをクリックすると予め登録されているFormat（リンク先をどの様にコピーするかコード）とConfigureメニューが表示されます。

Format設定

Create Linkを適用した初期状態でFormatの基本形が幾つか用意されています。

その中の「HTML」を見てみます。Bloggerのリンク機能と同じく、<a>タグでリンクが作成出来るFormatです。

Format name:HTML

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

%htmlEscapedText%の部分は変数で、テキスト部分の表示を設定する事が出来ます。

また、 target="_blankはリンク先を新しいタブでの表示を指定しています。

%htmlEscapedText%

選択したテキストor urlタイトルをリンクテキストとします。unsafe characters (&<>'")
変換されます。通常はコレが良いと思います。

%text%　

選択したテキストor urlタイトルをリンクテキストとします。改行は半角スペースに変換されます。

%title%

リンクページのタイトルを表示します。

%input% 

ダイアログボックスが表示され、任意リンクテキストを入力出来ます。文章中のテキストにリンクを貼る場合等に便利。

%url%

リンクページのurlを表示します。

その他、幾つかありますが、ブログ等では上記が主流になると思います。

リンクを作成（Bloggerの場合）

Format「HTML」でリンクを作成してみます。

1. 宛先のページを開き「Create Link」のアイコンをクリック、「HTML」を選択します。この時点でクリップボードにコピーされます。
2. Bloggerの記事投稿画面をHTMLモードにして、任意の箇所に貼付けて完了。

以上で完了です。

＊「Create Link」のアイコンをクリックする代わりに宛先ページで右クリックでメニューから「Create Link」を選択する事も可能です。

アイコンフォント付のリンクテキスト用Formatの作成

過去の記事でリンクテキストの後にアイコンフォント" "を付けたリンクの作成を取り上げました。投稿HTMLモードでリンクの<a>タグを<span>で囲みclassを指定してあげる必要があり、ちょっと面倒でした。

「Create Link」にFormatを追加して、簡単にリンクが作成出来るようにしてみます。

注:アイコンフォント付リンクテキストを使う場合、予めテンプレートのcssに設定が必要です。以下の記事をご確認下さい。
Vaster2 カスタマイズ#10-2 テキストリンクにアイコンを付ける | プゥ二郎さんの日記

1. Create LinkのアイコンをクリックしてメニューよりConfigureをクリックします。
2. Formatに表示されている一覧に以下を追加します。

<span class="postlink"><a href="%url%" target="_blank">%htmlEscapedText%</a></span>

変数%input%はお好みで。

「Create Link」のアイコンをクリックすると「ICON FONT」が追加されています。

後は、「HTML」の時と同じです。

1. リンクする宛先のページで「Create Link」をクリックして、メニューより追加したFormat 「ICON FONT」を選択します。
2. 変数%input%を指定している場合、表示させたいテキストを入力します。
3. リンクのコードがクリップボードにコピーされているので、Bloggerの記事投稿画面をHTMLモードにして任意の箇所に貼付けます。

一度Formatを作ってしまえば次からはクリックだけで、アイコンフォントが付いたリンクが作成されます。

使ってみるとすごく便利なToolです。

Bloggerテンプレートカスタマイズ Chrome