引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる　⇒　STINGER8設定その7

Format Link

他のサイトからの引用の仕方

ブログを書く時に、他のサイトから引用することは多い。

この時に気をつけるべきなのは、SEO的な視点だ。

引用する時にblockquoteタグを使わないと、googleからマイナス評価を受ける可能性がある。

SEOスパムを行うつもりがなく、いい情報だから引用した場合でもこのようなネガティブな評価を下される危険性があるわけです。この危険を回避するのがblockquoteタグなのです。
blockquoteタグをつけておき、引用先のページにciteでリンクしておけば、Googleはこう判断します。
「blockquoteタグがあるね。
このタグの中にあるキーワードについては、検索結果に表示させようというつもりはないということだね。OK、了解だよ。
citeタグでWikipediaから引用って書いてあるな。オリジナルはWikipediaの方だね。」
というように判断します。blockquoteがない場合だとこのように判断するかもしれません。
「この文章はよく書けているな。検索順位をあげてやる必要がありそうだな。ん、でも待てよ、この文章はWikipediaと一緒じゃないか。まったく労力をかけていないのに、よく書けているように見せかけて、検索結果上位に表示させようという魂胆なんじゃないか？」
悪気がなくてもこのように判断される可能性があるということです。なので、引用する場合はblockquoteを使うことが望ましいのです。

引用を表すタグblockquote・q・citeの使い方とSEO効果 | なんでものびるWEBから引用

このため、今までは「ShareHtmlを、もっと綺麗にしたメーカー」を使っていた。
ShareHtmlを、もっと綺麗にしたメーカー

Format Linkを使う

Format Linkは、google Chrome拡張機能だ。

Format a link and copy it to the clipboard.
## Why do I need it?
To format the link of the active tab instantly to use in Markdown, reST, HTML, Text, Textile or other formats.

Format Linkから引用

これをインストールすると、簡単にリンクを作成することができる。

詳しい説明は、こちらを見ると良い。

ブログやWikiの記事を編集していると、他のWebサイトのURLをタイトル付きで引用したり、出典URLと一緒に記事の一部を引用したいといったことがよくある。一度きりであればそのたびにHTMLのリンクタグを打ち込んだり、Wikiの引用記法を調べて体裁を整えてもいいのだが、こういうことはなるべく自動化してしまいたいものだ。
「Format Link」は、そうしたニーズに応えたシンプルな拡張機能。閲覧ページの右クリックメニューから任意の書式で整形されたテキストを生成し、クリップボードへコピーすることができる。

【レビュー】ブロガー御用達！リンクや引用がサクサク行えるFirefox拡張機能「Format Link」 – 窓の杜から引用

拡張機能をインストールすると、Chromeのアドレスバー横にアイコンが表示される。

これをクリックすると、表示されているサイトのリンクが作成される。

デフォルトでは、markdown記法でクリップボードに保存される。

Format Linkをカスタマイズ

このままでも使えるのだが、ブログで見栄えがいいような形で出力したい。

幸いFormat Linkは出力フォーマットを自由に記述できるので、試してみた。

まずChromeのアイコンを右クリックし、オプションを選択する。

表示された画面の空いている欄に、自分の好きなコードを記述できる。

今回は、下記のコードを記述した。

名前を「ブログに引用」としてSave changesを押す。

<div class="amiens-bq"><blockquote><div class="“amiens-bq-content”"><p><img src="" alt="{{title}}">{{text.s("<","&lt;")}}<p></div></blockquote><cite><a href="{{url.s(" \"","&quot;")}}"="">{{title}}</a>から引用</cite></div>

以上で準備完了だ。

引用したいホームページの引用したい部分を選択して拡張機能ボタンを押すと、HTMLがクリップボードにコピーされるようになる。

あとは原稿にペーストするだけ。

超便利。

しかし画像URLだけは自分で記入しないといけない点には要注意だ。

それと、選択した範囲にリンクがあると、それがciteのURLとしてコピーされてしまうのも困ったものだ。

まあ完璧ではないが、充分役に立ちそうだ。

cssで見栄えを整える

このまま貼り付けると見栄えが悪いので、cssで整形する。


div.amiens-bq img{
    display: block;
    float: left;
    margin: 0 1em 1em 0;
    width: 120px;
}
div.amiens-bq{
    padding: 1em 5px;
    margin: 2em 0 4em;
    border: 1px solid #aaa;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    background: #ccc url("https://amiens.jp/wp-content/themes/stinger8/images/quote.png") no-repeat;
}
div.amiens-bq blockquote{
    margin-top: 3em;
    border: 1px solid #aaa;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2)inset;
    background-color: #fff;
}
.amiens-bq-content{
    overflow: hidden;
}
pre{
    padding: 5em 1em 2em;
    margin: 2em 0 4em;
    border: 1px solid #aaa;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
    background: #fff url("https://amiens.jp/wp-content/uploads/2019/05/code.gif") 10px 10px no-repeat;
}

だいぶ見栄えが良くなった。

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる ⇒ STINGER8設定その7

他のサイトからの引用の仕方

Format Linkを使う

Format Linkをカスタマイズ

cssで見栄えを整える

関連

引用を効率化するため拡張機能Format Linkをgoogle Chromeに入れる　⇒　STINGER8設定その7