HOME  /WordPress(応用)
 /整形済みテキストと引用の設定と使い方
2017年10月29日

整形済みテキストと引用の設定と使い方

ここでは整形済みテキストと引用の設定と使い方を解説します。

1.整形済みテキスト<pre>の設定

1-1.my_editor-style.cssに登録する内容

TinyMCEのpreのデフォルトフォントは「Menlo」になります。

一方、私がプログラムのコピー&ペーストで失敗するのはシングルクォーテーション()やダブルクォーテーション()を半角でなく全角で入れてしまった場合です。
Menlo」はこの違いが判りませんが「MS ゴシック」は明確に解ります。

そこで<pre>の設定は下記の様にしています。

/***********************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
pre{
	margin:5px 0;
	padding:5px;
	font-family:'MS ゴシック';
	font-size:15px;font-size:0.9375rem;line-height:1.2em;
	tab-size:2;}

※1.マージンは上下に5px、左右に0pxにしてあります。

※2.パディングは上下左右に10pxにしてあります。

※3.フォントはMSゴシックでレスポンシブ対応。

※4.ソースのTABは2文字分とする。
(デフォルトは8文字で長いので、小さくしています)

1-2.css¥editor-style.cssにも同様な設定を行います。

************************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
.contents pre{margin:5px 0;padding:10px;font-family:'MS ゴシック';font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;tab-size:2;}

1-3.使い方

ソースを入れたい場所にカーソルをセットし下記アイコンから、整形済みテキストを選択します。

あとは表示されたBOXにプログラムを記述したり、コピー&ペーストでソースを取り込みます。

1-4.整形済みテキストBOXからでる方法

整形済みテキストBOXはEnter(段落変更)でソースを記述します。

BOXから出る場合はShift+Enter(改行)になります。

1-5.preのインデント方法

下記インデントボタンでそのままインデントできます。

2.引用<blockquote>の設定

引用タグは検索エンジンにこの内容はこのドキュメントの情報ではない事を伝えるタグになります。

TinyMCEの引用タグのディフォルトはあまり美しくありません。
そこでWordPressが持っているアイコンフォントを使ってもう少し判り易い引用文にしたのが下記になります。

2-1.my_editor-style.cssに下記を登録します。

/****************************************/
/* blockquoteの設定 */
/*****************************************/
blockquote{
	margin:0;padding:0;
	border:none;
	border-radius:5px;
	background-color:#f7f7ff;
	padding:1.0em;
	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;}
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;}

※1.左上と右下にdashiconsの\f122コードを配置しています。

※2.右下に配置するアイコン文字は180°ローテンションをしています。

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

/****************************************
blockquoteの設定
*****************************************/
.contents blockquote{margin:0;padding:0;border:none;border-radius:5px;background-color:#f7f7ff;padding:1.0em;position:relative;}
.contents 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;}
.contents 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-3.引用の使い方

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

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

<サンプル>

ここに書かれる内容は、検索エンジンから無視されます。

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

引用BOXの中はShift+Enter(改行)、Enter(段落変更)を使って文書を作成できます。

BOXから出る場合はビジュアルエディタの下記アイコンを使ってください。

BOXから出た後、続きを読むーーーを削除します。

2-5.インデント方法

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

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