２クリックで記事の引用htmlタグを生成できるツール
2016年8月24日 11時09分
記事を書いていて、他人の書いたブログ記事の一部を引用したい時ありますよね。
引用したい文字を選択、URLを拾って、タイトルなどをコピペして、定型のhtmlを編集して…
何てことしてたらあっという間に２～３分は掛かってしまいますので、もっと手軽にできないものか
そこで、一瞬にして引用するためのhtmlタグを生成できるツールはないのか？
そんなツールを探したらありました。
やり方は次の３ステップです
１、引用したいブログ記事を表示する。
２、引用部分を選択して「ボタン」を押す。
３、htmlの引用タグが生成される。
というものです。
あとは、取得した引用タグのhtmlを自分のサイトに張り付けるだけですね。
この方法は一般的に使うＷＥＢブラウザであればほぼ対応していますので、ほぼ誰でも手軽に導入できるところがポイントです。
ステップ２の「ボタン」を押すというところが肝なのですが、
これを実現するには「ブックマークレット」を使うと実現します。
Ｙさん
ブックマークレットって何ですか？
田中
ブックマークに似た機能なのですが簡単なプログラム処理ができます。 ブックマークはご存知ですよね？
Ｙさん
はい、好きなWEBサイトを「お気に入り」に入れておいていつでもブラウザから呼び出せる機能ですよね？
田中
そうです。ブックマークレットはブックマークと同じようにブラウザのお気に入りに入れておけば、いつでも簡単なプログラムを起動できるんです。 その機能を利用して「今見ているページの内容を取得してhtmlを作成する事」も出来るんです。
Ｙさん
なるほど。それがボタンの正体なんですね！
田中
はい、そうなんです！このボタンを押せば事前に用意したひな形のhtmlに、今見ているＷＥＢサイトの内容を合体させてhtmlを作ってくれますので引用する時にめちゃくちゃ便利なんですよ。
こんな引用タグが生成できる
引用タグツールで、このようなhtmlタグが生成されます。
これをブログなどで表示するとこんな感じになります。
＊お使いのCSSによって<blockquote>のスタイルが違いますのでデザインは変わります。
<blockquote>
<p>『Pokémon GO』は、あなたの住む世界すべてが舞台。
いつもの生活の中で、ポケモンを捕まえたり、バトルしたり、
ポケモントレーナーとしての毎日がはじまります！</p>
<footer>
<cite title="『Pokémon GO』公式サイト">
<a href="http://www.pokemongo.jp/" target="_blank">『Pokémon GO』公式サイト</a>
</cite>より引用しました。
</footer>
</blockquote>
<p>『Pokémon GO』は、あなたの住む世界すべてが舞台。
いつもの生活の中で、ポケモンを捕まえたり、バトルしたり、
ポケモントレーナーとしての毎日がはじまります！</p>
<footer>
<cite title="『Pokémon GO』公式サイト">
<a href="http://www.pokemongo.jp/" target="_blank">『Pokémon GO』公式サイト</a>
</cite>より引用しました。
</footer>
</blockquote>
これをブログなどで表示するとこんな感じになります。
『Pokémon GO』は、あなたの住む世界すべてが舞台。 いつもの生活の中で、ポケモンを捕まえたり、バトルしたり、 ポケモントレーナーとしての毎日がはじまります！
＊お使いのCSSによって<blockquote>のスタイルが違いますのでデザインは変わります。
ブックマークレットの準備
ブックマークレットは自動生成してくれるジェネレータで作成します。
ジェネレータを使うことで、自分が使いたいhtmlのひな形をセットしておくことができます。
サンプルとして一般的に引用で使うときのタグを用意しました。
手っ取り早く作成したい場合にはこのまま利用してください。
ジェネレータを使うことで、自分が使いたいhtmlのひな形をセットしておくことができます。
サンプルとして一般的に引用で使うときのタグを用意しました。
手っ取り早く作成したい場合にはこのまま利用してください。
１、ブックマークレットを作る
２、必要事項を記入します。
（１）タイトルに「引用タグ生成」を入力し
（２）フォーマットに以下のひな形htmlをコピペして入力します。
（４）ブックマークレットが生成されます。
（２）フォーマットに以下のひな形htmlをコピペして入力します。
<blockquote>
<p>%text%</p>
<footer>
<cite title="%title%">
<a href="%url%" target="_blank">%title%</a>
</cite>より引用しました。
</footer>
</blockquote>
（３）Make Link 生成ボタンをクリックします<p>%text%</p>
<footer>
<cite title="%title%">
<a href="%url%" target="_blank">%title%</a>
</cite>より引用しました。
</footer>
</blockquote>
（４）ブックマークレットが生成されます。
２、作ったブックマークレットをブラウザに仕込む
ブックマークバーが表示されていないときは？
各ブラウザのヘルプを参考に表示してから行ってください。
chromeの場合には
１、右上はじにある３本線のメニューをクリックします。
２、[ブックマーク] 次へ
３、 [ブックマーク バーを表示] の順に選択します。
１、右上はじにある３本線のメニューをクリックします。
２、[ブックマーク] 次へ
３、 [ブックマーク バーを表示] の順に選択します。
ブックマークレットを使ってみる
１、引用したいブログ記事を表示する。
仮にこのページの冒頭部分を引用するとしてみましょう。
２、引用部分を選択して「ボタン」を押す。
（１）引用したい部分を選択して
（２）引用タグ生成ボタンを押す
（２）引用タグ生成ボタンを押す
３、htmlの引用タグが生成される。
ブラウザの一番上のほうに引用タグが生成され、選択された状態になってますのでコピーします。
このとき、マウスでコピーするよりキーボードでコピーしたほうが確実です。
このとき、マウスでコピーするよりキーボードでコピーしたほうが確実です。
コピーしたタグをそのままブログ記事などに張り付ければＯＫです！
まとめ
ブックマークレットは一度設定しておけば次からは簡単に引用ができます。
でも、簡単すぎるからと言って引用の割合が多いと質の低い記事になってしまうので多用厳禁ですね。
また、html編集が出来る方はひな型部分をカスタマイズしてオリジナルに挑戦するのもよいと思います。
ちなみに、選択部分に改行や画像、リンクなどがあってもすべてテキスト部分のみ抜き出しになりますので、その点だけ注意して使ってみてください。
でも、簡単すぎるからと言って引用の割合が多いと質の低い記事になってしまうので多用厳禁ですね。
また、html編集が出来る方はひな型部分をカスタマイズしてオリジナルに挑戦するのもよいと思います。
ちなみに、選択部分に改行や画像、リンクなどがあってもすべてテキスト部分のみ抜き出しになりますので、その点だけ注意して使ってみてください。