引用コピペが楽になる【Create Link】で引用箇所とリンクURLを一括でコピペする方法(設定例)

『Create Link』というChrome拡張を使うとブラウザ上でのコピペがすごく楽になります。ブロガーなら絶対使いたい拡張なので、もし知らない場合は参考にしてみてください。

具体的にどういうことができるのかというと、たとえば次のような他サイトからの引用を記事の中に入れる時。

他人のパソコンをロックして金銭などを要求する身代金要求型ウイルス「ランサムウエア」を作成したとして、神奈川県警サイバー犯罪対策課などは5日、大阪府在住の中学3年の男子生徒(14)を不正指令電磁的記録(ウイルス)作成容疑などで逮捕した。

引用:https://headlines.yahoo.co.jp/hl?a=20170605-00000045-mai-soci

普通、引用箇所の文章をコピペして、その次に引用元URLをコピーしてリンク作成、という手順になるかと思います。

これが、地味に面倒ですよね。わずか2往復のことですが、そのわずかな面倒さがリンク作成を躊躇させてしまうぐらいに邪魔くさいです。

ところが『Create Link』を使うと、この引用コピペ作業が1往復で済むようになります。

▼下図のように右クリックメニューの中に「Create Link」というメニューが出るので、そこから事前に設定しておいた形で情報をコピーすることができます。

上図のようにコピーして、新規投稿画面でペーストして記事をプレビューすると、下図のように「引用タグ」や「引用元へのリンク」が一括で挿入できていることが確認できます。

1回のコピペだけで、下記の内容がコピペ完了しました。

<blockquote>いろんなタイプの記事を書いていると「お、こういう記事が上位表示しやすいのか」「こういう要素があった方が検索エンジンに評価されやすいんだな」というのが少しづつ見えてきます。
<p class="text70">引用:<a href="https://prime-dict.com/?p=1255" target="_blank">https://prime-dict.com/?p=1255</a></p></blockquote>

地味というか、わずかな違いでしかないんですが、快適度はかなり高いので、ブロガーであれば誰もが使えるんじゃないでしょうか。

Create Link の使い方

Create Link は Chromeブラウザの拡張機能なので、検索して拡張機能をインストールします。

インストールが完了するとブラウザの右上にアイコンが表示されますので、そこをクリックして、下に展開されたところから「Configure..」をクリックし設定画面に移動します。(下図では僕の設定済みの項目がいくつか表示されていますが、これから使う場合は余計なものは何も表示されていないはず)

設定画面はこんな感じ。

プログラミングとかしない人にとってはちょっと難しく感じられるかもしれませんが、とりあえず僕的に便利でよく使っている Create Link の設定例を紹介しておきます。

Create Link 設定例

引用文+引用元リンク

冒頭で例示したような「引用文+引用元へのリンク」を一括でコピペするための設定例(Format)は次のとおりです。

<blockquote>%text_n%%newline%<p class="text70">引用:<a href="%url%" target="_blank">%url%</a></p></blockquote>

名前(name)を「引用+リンク」みたいな名前にして登録しておくと使いやすいです。

ただちょっと注意点として、上記例は

<p class="text70">×××</p>

というPタグに対するクラス指定がしてあります。これは引用元へのリンク表示を小さめに表示するためのCSSの適用で、そのためのCSSは子テーマに次のものを記述しています。

/*フォントサイズ70%*/
.text70 { font-size: 70%; }

(CSSとかよく分からなくて)僕のと全く同じようにする場合、子テーマに上記CSSを追加してお使いください。

この

<blockquote>%text_n%%newline%<p class="text70">引用:<a href="%url%" target="_blank">%url%</a></p></blockquote>

を参考に少し Create Link で使える変数の説明をすると…

%text_n%

は、選択箇所のテキストをコピーする変数です。

%newline%

は、一行空けるための変数です。

%url%

は、当該記事のURLをコピーする変数です。

ちなみに

%title%

というページタイトルをコピーする変数もあります。
で、引用元を示す上ではこちらを使った方がいいとも思うんですが、これがページタイトルの抽出がいまいちサイトによっては上手くいかないことがあり、そういう時に二度手間になるのがウザいので僕は引用元の表記を記事URLに統一してしまっています。

参考リンクの挿入

引用以外に僕がよく使うのは、次のような普通のリンク。

リンク <身代金ウイルス>作成容疑で中3逮捕 神奈川県警 (毎日新聞) – Yahoo!ニュース

中身はこうなっています。

<span class="ref">リンク</span> <a href="https://headlines.yahoo.co.jp/hl?a=20170605-00000045-mai-soci" target="_blank"><身代金ウイルス>作成容疑で中3逮捕 神奈川県警 (毎日新聞) - Yahoo!ニュース</a>

これも Create Link を使えば1発のコピペで済みます。

すみません。テーマに Simplicity 以外のものを使っている場合、こちらも丸々真似るにはCSSの記述が必要でした。CSSは下記を子テーマにコピペしてもらえば大丈夫だと思います。もし不具合あったら教えてください。

.ref{
  color: #fff;
  background-color: #fc7a22;
  padding: 1px 5px 0;
  border-radius: 2px;
  font-size: 12px;
}

背景色などお好みで変更してみてください。

Create Link の設定(Format)は次のようになっています。

<span class="ref">リンク</span> <a href="%url%" target="_blank">%htmlEscapedText%</a>
この参考リンクの設定を少し改変すれば、たとえば画像の出典元を示すリンクを入れるのにも使えます。

まとめ

僕が実質的に日常使いしているのは上記2例と画像出典用の設定の3種類ぐらいのものです。よく書く記事の内容次第で用途や使用頻度は違ってくると思いますが、ただブログを書く以上は他サイトにリンクを張るという作業がほぼ必ず発生することと思うので、誰にとっても便利なツールになるんじゃないかと思います。

使える(はずの)変数はなかなか思った通りの動作をしてくれなかったりもするので、あまり複雑な設定は正直厳しいと思いますが、Create Link をまだ使っていないという人はぜひ使ってみてください。

リンク Create Link – Chrome ウェブストア


以上です、
ではまた

トップへ戻る