HOME  /WordPress(応用)
 /ビジュアルエディタの引用BOX(blockquote)をカスタマイズする
2020年04月20日

ビジュアルエディタの引用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;}

 

2.引用<blockquote>の使い方

2-1.入力方法

①引用を入れる所にカーソルを置き、下記アイコンを挿入します。

②表示された枠の中に文字を入れて行きます。

<サンプル>

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

 

2-2.引用BOXから出る方法

BOXから出る場合は<enter>を2回挿入すると出られます。

 

2-3.引用BOXのインデント方法

<blockquote>をインデント可能にする為には下記設定が必要になります。

 ­ビジュアルエディタでインデントが利用できる様にする

 

PREを選択するとビジュアルルエディタの左下に下記のガイドが表示されます。

 

上記の「blockquote」を選択した後、インデントボタンで操作してください。

 

2-4.引用BOXの削除方法

引用文を選択して下記アイコンを実行します。

通常の段落文に変わりますので、文字を選択して削除して下さい。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「tinymce」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。