blockquote 引用タグの使い方と Font Awesome による装飾 - アラコキからの Raspberry Pi 電子工作

WordPress Twenty Seventeen
著作権侵害を配慮した記事作成
blockquote 引用タグの使い方と Font Awesome による装飾

検索パフォーマンスにおける、表示回数・クリック数が『激減』した原因の調査と対策を講じている過程で、

低品質コンテンツ
　「現地にあった案内板」や「自治体のホームページ」、あるいは「Wikipedia」の一部を抜粋して、自分のページに参考として表示している箇所がいくつかある。
　これが、検索エンジンに低品質コンテンツと見なされて、SEO的に大きなダメージを受けているのではなかろうか。

という、ペナルティまでもが心配になり、遅ればせながら【 blockquote 】引用タグの使用を開始した。

　目　次

1.　著作権と引用
2.　Google検索における重複コンテンツ
3.　WordPressでの引用方法
4.　ビジュアルエディターでの引用の表示
5.　Font Awesome による引用の装飾
6.　AMPページでの引用

1. 著作権と引用

著作物を自由に利用できる場合がある
著作権法では、一定の場合に、著作権を制限して著作物を自由に利用することができることを定めています。

　引用（第32条）
　[1]公正な慣行に合致すること，引用の目的上，正当な範囲内で行われることを条件とし，自分の著作物に他人の著作物を引用して利用することができる。同様の目的であれば，翻訳もできる。
（注5）[2]国等が行政のPRのために発行した資料等は，説明の材料として新聞，雑誌等に転載することができる。
ただし，転載を禁ずる旨の表示がされている場合はこの例外規定は適用されない。
----------------------------------------------------------------------------------------------------
（注5）引用における注意事項
他人の著作物を自分の著作物の中に取り込む場合，すなわち引用を行う場合，一般的には，以下の事項に注意しなければなりません。
（1）他人の著作物を引用する必然性があること。
（2）かぎ括弧をつけるなど，自分の著作物と引用部分とが区別されていること。
（3）自分の著作物と引用する著作物との主従関係が明確であること（自分の著作物が主体）。
（4）出所の明示がなされていること。（第48条）
（参照：最判昭和55年3月28日｢パロディー事件｣）
出典：文化庁著作物が自由に使える場合

「著作権侵害」に関する注意点。

「転載」は、著作権侵害になる。【上記（3）】
自分の文章の割合が少なく、引用した文章の方が多い場合、引用した文章が「主」となり「転載」とみなされる。

「引用」における注意点。

①．<blockquote>タグを利用して引用部分を区別する。【上記（2）】
②．<cite>タグを利用して出典元を明記する。【上記（4）】

当ブログに於ける引用のケースと対策。

現地案内板・自治体HP・Wikipedia等を参考にするケースが殆んどだが、
・引用元がウェブページならばリンクを貼る。
・それ以外の場合は引用元の情報源を示す。
対策が必要、と再認識。

2. Google検索における重複コンテンツ

　低品質なコンテンツ
Googleが低品質なコンテンツとみなすものの一つに、「重複コンテンツ」がある。この重複コンテンツに該当すると、ページが表示されなくなる可能性がある他、Googleのペナルティの対象となり、SEO的に大きなダメージを受けるリスクがある。

パンダアップデート
パンダアップデートとは、「低品質なWebサイトの掲載順位を下げて、良質なWebサイトの掲載順位を適切に評価する」という、Googleの検索アルゴリズムアップデートの名称で、2011年2月24日から開始され、現在も継続的にパンダアップデートが実施されている。

　重複コンテンツ
一般に、重複するコンテンツとは、ドメイン内または複数ドメインにまたがって存在する、他のコンテンツと完全に同じであるか非常によく似たコンテンツのブロックを指します。多くの場合、偽装を意図したものではありません。悪意のない重複コンテンツの例には、以下のものがあります。
・通常ページとモバイルデバイス用の簡易ページの両方を生成するディスカッションフォーラム
・複数の異なる URL で表示またはリンクされる商品
・ウェブページの印刷用バージョン
ほとんど同じコンテンツの複数のページがサイトに含まれる場合、優先する URL を Google に指定する方法（「正規化」と呼びます）は複数あります。
引用者注：以降、長文につき省略。
引用元：Search Console 一般的なガイドライン

「引用」と「重複コンテンツ」は、基本的に異なる。

「重複コンテンツ」対策。

①．「正規化」。
②．「リダイレクト」。

wwwの正規化：

wwwありがパークドメイン → wwwの正規化

Webサーバーサイトの管理 Search Console wwwありサブドメインの作成と正規化『Search Console ヘルプ』に、「Search Console 検索パフ

2019-07-28

2021-03-13

nginx でのリダイレクト：

nginx サブディレクトリへのアクセスを他のドメインにリダイレクト

Raspberry Pi + nginx = Webサーバーサブディレクトリへのアクセスを他のドメインにリダイレクトメインする設定ディレクトリとドメイン名は、下図のような関係になっ

2018-08-15

2023-10-07

”canonical”で「代替先のページ」を指定：

Webサイト特定ページへのアクセスを、指定したURLに自動転送

Webサイト運用管理 SEO対策 URL変更（HTMLのファイル名を変更）時の対策 301リダイレクトは、ユーザーにもSEOにも重要 ★ 検索結果には、元のhtml（old.html）

2017-04-03

2023-10-08

「重複コンテンツ」の調べ方。

Saerch consoleで重複を表示してくれるようになった

Saerch consoleの「カバレッジ」から「除外」の詳細を見る。

「除外」の詳細に「重複しています」と表示される。

上記「重複しています」の内容。

①．http から https にリダイレクトしている、http ページ。
②．WordPress 内でリダイレクトしている、リダイレクト元ページ。
③．メーカー取説 PDF を、記事内に画像として掲載分。

3. WordPressでの引用方法

引用の範囲を指定して、「❝」アイコンをクリックする。

引用タグが挿入されると、テキストがズレる。

「テキスト」モードで表示してみると、【 <blockquote> 】タグが挿入されている。

公開して、【引用】箇所を見てみると・・・。

これだけでは【引用】が判りにくいので、CSS を適用し次の2点を改善する。

①．ビジュアルエディターでの引用の表示
②．Font Awesome による引用の装飾

【引用】の標準的な記述要領。

<blockquote>
<p>あいうえお……（中略）……わゐうゑを、ん</p>
<footer>
<cite>
引用者注：長文につき以降省略<br>
引用元：<a href="引用元url">○○のHP</a>
</cite>
</footer>
</blockquote>

4. ビジュアルエディターでの引用の表示

WordPress ビジュアルエディターに『CSS』を適用する方法。

子テーマに次のファイルを作成し、編集する。
①．functions.php
②．editor-style.css

テーマのための関数 (functions.php)の編集。

/*--------------------------------------------*/
/*     エディタ TynyMCE に css を適用する     */
/*--------------------------------------------*/
add_editor_style( 'editor-style.css' );
/*--------------------------------------------*/

ビジュアルエディターのスタイルシート (editor-style.css)の編集。

/*-----------------------------------------------------------*/
/*      引用 blockquote の CSS                               */
/*-----------------------------------------------------------*/
blockquote {
    position: relative;
    padding: 10px 25px;
    box-sizing: border-box;
    color: #464646;
    border: solid 3px #20b2aa;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-radius: 0 0 30px;
	content: "\f10d";
    font-family: "Font Awesome 5 Free";
    background: #20b2aa;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
	font-size: 15px;
	font-style: normal;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*-----------------------------------------------------------*/

ビジュアルエディターでの引用の表示結果。

これで、ビジュアルエディター上でも、引用箇所がハッキリと判るようになった。

5. Font Awesome による引用の装飾

子テーマにテーマヘッダー (header.php)ファイルを作成し、編集する。

<head>内の<meta …>というmetaタグの下に、次のlinkタグ<link …を埋め込む。

<!-- Font Awesomeを使う -->
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

【quote-left】アイコンのコード。（アイコン一覧サイト）

【Font Awesome】用 CSS のポイント。

blockquote:before{
content: "¥f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

blockquote の CSS は、外観のカスタマイズ → 追加の CSS に追記した。

/*-------------------*/
/* blockquote の CSS */
/*-------------------*/
blockquote {
    position: relative;
    padding: 10px 25px;
    box-sizing: border-box;
    color: #464646;
    border: solid 3px #20b2aa;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-radius: 0 0 30px;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    background: #20b2aa;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
	font-size: 15px;
	font-style: normal;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*--------------------*/
.fa-large {font-size: 20px ;}
.my-white {color: white}
.my-silver {color: silver}
.my-gray {color: gray}
.my-blue {color: blue}
.my-navy {color: navy}
.my-green {color: green}
.my-lime{color: lime}
.my-aqua {color: aqua}
.my-yellow {color: yellow}
.my-red{color: red}
.my-fuchsia {color: fuchsia}
.my-maroon {color: maroon}
.my-orange {color: #fecb81}
/*--------------------*/

Font Awesome で装飾した【引用】の表示結果。

6. AMPページでの引用

「wp-content」→「plugins」→「amp」の中に、「template」フォルダーがあるので、この中の【style.php】をコピーする。

WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する。

右側の「テーマファイル」に表示される「amp」の中から「style.php」を選択すると、ソースコードが表示される。

元の記述。

/* Quotes */
blockquote {
	color: <?php echo sanitize_hex_color( $text_color ); ?>;
	background: rgba(127,127,127,.125);
	border-left: 2px solid <?php echo sanitize_hex_color( $link_color ); ?>;
	margin: 8px 0 24px 0;
	padding: 16px;
}

blockquote p:last-child {
	margin-bottom: 0;
}

新しい記述。

/*----------------------*/
/* blockquote の CSS */
/*----------------------*/
blockquote {
    position: relative;
    padding: 10px 25px;
    box-sizing: border-box;
    color: #464646;
    border: solid 3px #20b2aa;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    border-radius: 0 0 30px;
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    background: #20b2aa;
    color: #FFF;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    font-size: 15px;
    font-style: normal;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*----------------------*/
.fa-large {font-size: 20px ;}
.my-white {color: white}
.my-silver {color: silver}
.my-gray {color: gray}
.my-blue {color: blue}
.my-navy {color: navy}
.my-green {color: green}
.my-lime{color: lime}
.my-aqua {color: aqua}
.my-yellow {color: yellow}
.my-red{color: red}
.my-fuchsia {color: fuchsia}
.my-maroon {color: maroon}
.my-orange {color: #fecb81}
/*----------------------*/

AMPページでの【引用】の表示。

以上。
(2019.07.31)

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル