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

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

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

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

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

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

Format Linkを使う

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

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

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

拡張機能をインストールすると、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;
}

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