ビジュアルエディタの引用BOX（blockquote）をカスタマイズする

引用タグblockquoteは他サイトで使われているコンテンツを自サイトで引用する時に使うもので、検索エンジンにこの部分はこのサイトのコンテンツでない事を伝える物です。

ここではこのサイトで使っている引用タグの設定と使い方を解説します。

1.引用<blockquote>の設定

ディフォルトのTinyMCEの引用タグはあまり美しくありません。
そこでWordPressのダッシュアイコンを使って下記の様な引用タグに変更しました。

ここに書かれた内容は、×××から引用した文書です

この設定方法を解説します。

1-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssに下記を設定します＞

/****************************************/
/* blockquoteの設定 */
/*****************************************/
blockquote{
	margin:5px 0;                 /* マージンは左右5px、上下0に指定 */
	border:none;                   /* 枠線和表示しません */
	border-radius:5px;           /* BOXの上下左右の角を丸くします */
	background-color:#f7f7ff; /* 背景色 */
	padding:1.0em;               /* BOX背景色 */
	position:relative;              /* ここを基準点とする */
}
blockquote:before{                                                    /* 左上の記号 */
	font-family:"dashicons";                                         /* フォントはダッシュアイコン */
	content:"\f122";                                                    /* 文字コード */
	font-size:20px;font-size:1.25rem;line-height:1em;   /* 文字サイズ */
	color:#999;                                                           /* 文字色 */
	position:absolute;left:0;top:0;                                 /* 位置は基準点から上と左が0の位置 */
}
blockquote:after{                                                       /* 右下の記号 */
	font-family:"dashicons";                                          /* フォントはダッシュアイコン */
	content:"\f122";                                                     /* 文字コード */	  
	font-size:20px;font-size:1.25rem;line-height:1em;    /* 文字サイズ */
	transform:rotate(180deg);                                       /* 文字を180°回転させる */
	color:#999;                                                            /* 文字色 */
	position:absolute;right:0;bottom:0;                          /* 位置は基準点から下と右が0の位置 */
}

各設定の意味はコメントを参照してください。

　メモ

左上と右下の文字はダッシュアイコンのを利用しています。

このアイコンを左上はそのまま、右下は180°回転させて利用しています。

2-2.style.cssのも同様の定義を行います。

/****************************************
blockquoteの設定
*****************************************/
.entry-content blockquote{
	margin:0;padding:0;
	border:none;
	border-radius:5px;
	background-color:#f7f7ff;
	padding:1.0em;
	position:relative;}
.entry-content blockquote:before{
	font-family:"dashicons";
	content:"\f122";
	font-size:20px;font-size:1.25rem;
	line-height:1em;
	color:#999;
	position:absolute;left:0;top:0;}
.entry-content blockquote:after{
	font-family:"dashicons";
	content:"\f122";	  
	font-size:20px;font-size:1.25rem;
	line-height:1em;
	transform:rotate(180deg);
	color:#999;
	position:absolute;right:0;bottom:0;}