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

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

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, ブラウザ, 新着情報
-, , ,

執筆者:

関連記事

2段組

cssで2段組にする方法 ⇒ トップページの作り込み7

さらにコンテンツを増やす 引き続き、コンテンツを加える。 このブロックは、2段組にする。 <div id=”amiens-07″ class=”amiens-black”> <div …

stinger8

wordpessテーマのSTINGER8にしてみた ⇒ 設定その1

STINGER8を導入 このサイトはwordpressで構築している。 数ヶ月間Grapheneテーマを使ってみたのだが、どうも重い気がする。 そこで試しに、国産テーマで人気が高いSTINGERを使っ …

code-prettify

google code-prettifyでコード表示をハイライト(動作しないので焦るが解決済み) ⇒ STINGER8設定その2

google code-prettifyを導入 設定その1の記事内で、コードを記載した。 wordpessテーマのSTINGER8にしてみた ⇒ 設定その1 これを見てみると、preタグで囲んだだけだ …

宮松さん

今日はザッポスの話も聞けるらしいので、楽しみだ 関連

marquee

marqueeで電光掲示板風に文字を流す ⇒ トップページの作り込み8

marqueeとは marquee(マーキー)はインターネット黎明期にはやったテクニックだ。 電光掲示板のように文字が流れていくテクニックを指す。 ニコニコ動画を想像すれば、分かるだろう。