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

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

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) ⇒ STINGER8設定その4

ソーシャルアイコン追加 Facebookなどをやっていると、ホームページから誘導したくなる。 そこでリンク用のアイコンを表示させることにした。 いわいるソーシャルアイコンというやつだ。 随分前にホーム …

365日懸賞

ツイッターで応募できる懸賞企画がスタート

有限会社マップ高知(高知県高知市知寄町1-5-1 電話088-880-0770 FAX088-884-3700 http://www.ewalk.ne.jp/map/)は、2011年3月1日、ツイッタ …

ページで100%幅表示を可能にする ⇒ STINGER8設定その14

100%幅の表示を可能にする STINGER8では100%幅のコンテンツを表示できないので、固定ページは可能になるように設定する。 サイドバーを消し、幅を制限している設定をクリアしていく。 page. …

ワードプレス

IEでJavaScriptエラーが出たトラブルシューティング

このブログはwordpressで制作しているのだが、当初よりIEで見るとJavaScriptエラーが出て困っていた。 いろいろバタバタしていてしばらく放置していたのだが、時間がとれたので見直してみた。 …

domo Todo+

iPhoneの神アプリをおすすめ【3】domo Todo+

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第3回目は、domo Todo+を紹介する。 domo Todo+ do …