引用タグ（blockquote）の使い方|cssでの編集とseo対策

かつて引用タグ（blockquote）で壺にはまったことがあるので
記事にしました。

 

元々ココナラで教材を販売されていた方のブログが
fanブログ（A8net）だったのですが

 

 

ココナラとは

 

 

そのブログに引用タグが使われていてかっこよくみえたのです。

 

 

早速、装飾、文字を囲むとか検索して何とか
引用タグ（blockquote）というwordにたどりついたのです。

 

 

 

 

 

 

 

 

 

 

 

そこで引用タグは装飾目的だけでなく他所から記事を
引っ張ってきた時に検索エンジンにそのことをアピールする
重要な役目があることがわかりました。
（引用したことによるマイナス評価をしないでくださいの意味）

 

 

blockquoteが反応しないテンプレート

 

2016年を賑わしたある教材のテンプレートですが引用タグが
反応しません。

 

 

すっかりこの引用タグがよくわからなくなりました。
まず無料ブログで試すと装飾こそは違うけれど
反応します。

 

 

すなわち特定のテンプレートで反応しないことの方が
少数派であることがわかりました。

 

 

いくつかのワードプレスの無料テーマでblockquoteを試しますと
テンプレートごとに装飾が違います。

 

 

すなわちblockquoteの装飾はテンプレート固有のもので
あることがわかります。

 

 

検索エンジンで調べてみますとblockquoteについてくわしく
かかれたサイトがいくつかありましたが一貫した満足のいく
記述が見当たりませんでした。

 

 

引用タグ（blockquote）の正体とは

 

テンプレートテーマのCSSに埋め込まれた固有の
装飾コードであるという説明になる。

 

テンプレートごとにCSSの状態も違うためコードのことを
詳しくかいているにもかかわらず肝心などこをどういじったら
いいかが欠落しているのだ。

 

人気テンプレートの場合だと使用者の絶対数が多いので
helpがあればblockquoteの装飾を変えたいで情報がでてくる。

 

とりあえず賢威6.2の場合はどこを改変したらいいのだろうか？

 

 

 

『外観』⇒『テーマの編集』⇒『design.css』 を開きます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ctrl＋Fで引用タグの記述をみつけます。
引用タグから下を改変します。

 

 

 

 

 

 

 

 

【引用タグ（blockquote）の参考コード】

blockquote{
	display:block;
	background: #fff;
	padding: 15px 20px 15px 45px;
	margin: 0 0 20px;
	position: relative;
  
	/*Font*/
	font-family: Georgia, serif;
	font-size: 16px;
	line-height: 1.2;
	color: #666;
	text-align: justify;
  
	/*Borders - (Optional)*/
	border-left: 15px solid #c76c0c;
	border-right: 2px solid #c76c0c;
  
	/*Box Shadow - (Optional)*/
	-moz-box-shadow: 2px 2px 15px #ccc;
	-webkit-box-shadow: 2px 2px 15px #ccc;
	box-shadow: 2px 2px 15px #ccc;
}
 
blockquote::before{
	content: "\201C"; /*Unicode for Left Double Quote*/
  
	/*Font*/
	font-family: Georgia, serif;
	font-size: 60px;
	font-weight: bold;
	color: #999;
  
	/*Positioning*/
	position: absolute;
	left: 10px;
	top:5px;
}
 
blockquote::after{
	/*Reset to make sure*/
	content: "";
}
 
blockquote a{
	text-decoration: none;
	background: #eee;
	cursor: pointer;
	padding: 0 3px;
	color: #c76c0c;
}
 
blockquote a:hover{
	color: #666;
}
 
blockquote em{
	font-style: italic;
}

 

 

上記blockquoteのコードで引用しますと
下記のようになります。

 

 

 

 

 

 

design.cssが存在しないワードプレスのテンプレートでは

 

 

 

 

 

 

 

 

管理画面の外観からCSSの編集を選びます。
追加CSSをクリックします。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

改変したい引用タグのコードを貼り付けます。

 

 

 

 

 

 

 

 

 

 

CSSの下のコードほど反映される習性を利用します。

 

 

この方法で全く引用タグ（blockquote）が表示されないテンプレート
でも指定した装飾に基づく引用があらわれるようになります。