アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css ブラウザ 新着情報

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

投稿日:2019年5月1日 更新日:

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

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

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

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

引用を表すタグblockquote・q・citeの使い方とSEO効果 | なんでものびるWEBSEOスパムを行うつもりがなく、いい情報だから引用した場合でもこのようなネガティブな評価を下される危険性があるわけです。この危険を回避するのが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 LinkFormat 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から引用

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

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

【レビュー】ブロガー御用達! リンクや引用がサクサク行えるFirefox拡張機能「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;
}

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

-CMS, css, ブラウザ, 新着情報
-, , ,

執筆者:

関連記事

フェイスブック

FacebookがついにYahooを抜いて世界第三位の巨大Webサイトになった

Amplify’d from jp.techcrunch.com 今年丸一年かけて、ついにこうなった。comScoreによると、FacebookはYahooを追い越して世界三位のWebサイトになった。 …

ビール券をプレゼント

ビール券が当たる!QUOカードも当たる!応募はフォロー&ツイートするだけ。簡単応募の365日懸賞、好評開催中。

ビール券をプレゼント ビール券を2枚組にして2名様にプレゼント★グイッと飲んじゃってくださいねw★応募はフォロー&ツイートするだけ。twitterで簡単に応募できます #365kD9YX #3 …

ブログの書き方

ブログを書く時の適切な文字数は何文字か

「ブログを書く時の適切な文字数は何文字ですか?」 勉強会で質問され、思わず詰まってしまった。   一般的には400字詰め原稿用紙で何枚、と言う言い方をするので、それからすると800文字とか1 …

ワードプレス

wordpressでedit.phpとplugins.phpが真っ白になるトラブル

「投稿」を表示しようとしても画面が真っ白になるトラブルが発生するようになった。edit.phpとplugins.phpでエラーが発生しているっぽい。手動で再度wordpressを全ファイルアップロード。結果、正常動作するようになった。

iphone4s

たった10秒でiPhoneで電話ができないトラブルを解決する方法

iPhone4Sにしてから、実に快適。かつ写真はキレイだしiCloudは便利だし、言うことない! と思っていたら、iOS5.0.1にアップグレードした際に電話の発信も着信も不可能になるというトラブルが …