成長因子 育毛薬

引用タグ(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)が表示されないテンプレート
でも指定した装飾に基づく引用があらわれるようになります。

 

 

 

 

 

 

 

 

 

 

 

 

Affiliate AZ club(AAC)無料メルマガ

メルマガの詳細を確認する

コメントを残す

サブコンテンツ

管理人について

ヒロです。兵庫県でアフィリエイトしています。
長年不動産の仕事をしていました。
ネットビジネスで迷える人
の最後の砦になりたい
と思っています

 

詳しいプロフィールはこちら

無料メルマガ配信中

再現性の高いノウハウと 実践手順を示したメルマガを始めました。

 

 

体験したい方は下記から

 

 

Affiliate AZ club(AAC)

 

お問い合わせフォーム

質問・相談困ったこと
いつでもお気軽にご連絡ください。

迅速に返信させて頂きます。

お問い合わせ

このページの先頭へ

%d人のブロガーが「いいね」をつけました。
pocket line hatebu image gallery audio video category tag chat quote googleplus facebook instagram twitter rss search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status