Blockquote(引用)の重要性 ついでにデザイン変更(コピペOK)

      2016/12/29

 前々からずっと気になっていたBlockquote(引用)のデザインをいじってみる事にしました。基本CSSのみで編集していきます。気に入ったらご自由にコピペして使ってください。

カスタマイズに関しては必ず子テーマを編集し、バックアップを取っておくようにしましょう。

WPカスタマイズは必ず子テーマで!作成方法全手順【図解】
 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ
Sponsored Link

Blockquote(引用)の重要性

GoogleのMatt Cutts(マット・カッツ)氏が引用について語っている動画です。
かなり端的に回答されているので英語分かる方は見て頂いた方が早いです。

「は〜い今日はオランダからの質問で〜す。
重複コンテンツと見なされないように正しく引用するにはどうすればいいのよ?」
ここの回答でMatt氏

「引用内にリンクと抜粋突っ込んで入れとけば大丈夫っしょ」

ここ重要。
するべきとは言ってはいないけど、引用タグの中にリンクと抜粋入れとけば心配ないってことは、そうした方がいいってことですよね。

いままで私はある程度の長さの文の抜粋ぐらいにしか引用タグを使ってなかったけどやっぱ使った方がいいようですね。

*ちなみにMatt氏こんな軽い喋りしてません。すいません。そして次、

「は〜い今日はニューデリーからの質問で〜す。」
「いろいろちょっとずつ抜粋して記事構成しても平気かな?リンクを付けなきゃだめ??」

ここでMatt氏

「ショック受けちゃうかもだが、2、3行ずついろんなとこから引用して構成するやり方はスティッチングって言うんだが、Yahooがそのテクニックめっちゃ嫌ってたのよ。スパムと考えてたぐらい。引用するのはいいけど、要約してそこに付加価値をつけてあげないとだめっしょ。スティッチングだけならやめとけよ〜」

ちょっとずれちゃいましたが、引用自体に問題はもちろんないけど自分のコンテンツのように見せかけるのはやばいって話ですね。wikiの例えでも言ってますが引用の量とういうよりも独自コンテツの質がかなり重要でそれが主体でなければならないということです。どれぐらいバランスという明確なものが言われてはいませんが、引用タグを使用して
「これ引用してますー」
と言う方が健全ということです。これをしないとSEO対策からしてみてもかなり不利になることがおわかりでしょう。

▶️Does the ‘blockquote’ element harm or help SEO?

Can anyone please clarify the actual relation of the blockquote element with search engine optimization?

ここにも似たような事が質問されています。

記事を引用する事で、よりあなた自身が書いた記事の質が上がる場合などがあるので、ある一定の条件下では効果的だと信じられています。(Googleなど検索エンジンプログラムを使用している側しか判断できないため)

引用する際の注意点

人間の目で見てボックスや斜体文字で他と違う表現になっているから引用なのだという解釈ではいけません。クローラーなどの検索エンジンプログラムから「これは引用なんだ」と認識してもらう必要があります。

Google bot(クローラー)とは何か?その役割と対処法
 以前FC2ブログ使っていた時に、突然googleのクローラーが巡回に来てくれなくなった事がありまし

「Blockquote」ブロッククオート(引用)タグ

が必ず使われていることが条件です。

逆に言えば、デザイン的に目立たせたいという理由で引用タグに入れると、例えあなたが書いた文章でも検索ロボットから「これは引用文章だ」と認識されてしまいうので、初心者の方は注意が必要です。

引用が多様されると、上記で述べたように重複コンテンツとみなされる危険性があり、その結果コンテンツが低品質とランク付けされ、検索順位表示を下げられることになってしまうのです。アクセスを伸ばしたいが為に、デザインとしてやっても逆効果になり本末転倒な結果になってしまうので、SEO対策を考えるのであれば以上の事は最低限認識しておきましょう。

 

さて重要性が分かったので、使用するなら素敵なデザインにしたい!ってことで本題のBlockquoteのデザイン編集していきます。

Blockquote(引用)デザイン CSS編集方法

私のカスタム前の引用デザイン。何か色も嫌だし、スペース多いし微妙。一応、これがこのCSS

まだいじっていないので親テーマ内CSSから blockquoteタグを探して、子テーマ内CSSにコピペして変更したい箇所をいじっていきます。(親テーマ内のcssは削除せずそのままでOK)

子テーマの作り方はこちらを参照ください。

WPカスタマイズは必ず子テーマで!作成方法全手順【図解】
 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ

このデザインを説明するとこんな感じになります。paddingやmargin、borderなど細かい設定が出来ます。色見本はこちらを参考に

▶️WEB色見本 原色大辞典

余談:余白の単位「px」 と「em」の違い

px(ピクセル):環境によって変化しない絶対単位
em(エム):1em=一文字分(フォントサイズ指定してなければ1em=16pxが基準)

環境によって変化しないpx。例えば人によりサイト文字が見づらいから、拡大して文字を大きく表示し閲覧していても絶対単位なのでそこだけ変化しないことになる。
ユーザーにとって不親切で推奨されないという見方もあるので、私の使用テーマでフォルトはpx単位ですがemに変更していこうと思います。

Blockquote(引用)デザイン サンプル

バックが薄いグレー系だったのでグレー系でまとめてこんな感じにしてみました。

親テーマcssを削除しないで子テーマcssでカスタマイズしたので必要ないものも入ってます。最後のmargin:0 は引用タグを入れると<p>タグが入って余計な余白ができてしまうので入れておきました。今回はとりあえず、余計な余白とバック色を修正出来たので今後もう少しいじっていきます。

バランスは各自見直してながら修正してみてください。

ダブルクオテーションを.pngで表示しない場合は

これを入れればOKかと思います。

 - SEO対策, Webデザイン, WordPress, ブログ関連