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

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

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

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」を選択した後、インデントボタンで操作してください。

 メモ

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

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

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

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


<関連記事一覧>

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。しかしこの機能はHTMLでコラップスを指定した場合に使える機能で、ビジュアルエディタで編集可能なコラップスにする為には自作jqueryでダイナミックにこの機能を与える必要がある。この方法を解説しています。

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

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

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。