HOME  /WordPress(応用)
 /ビジュアルエディタの整形済みテキスト(pre)をカスタマイズする
2020年04月20日

ビジュアルエディタの整形済みテキスト(pre)をカスタマイズする


プログラムソースを記述するBOXを整形済みテキスト(preformatted text)と呼びpreタグを使います。

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

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

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

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

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

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

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

<my-editor-style.cssの設定>

/***********************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
pre{
	border: 1px solid #666;                                           /* 枠線設定 */
	color: #444;                                                            /* 文字色 */
	font-family:'メイリオ';                                               /* 文字フォント */
	font-size:14px;font-size:0.875rem;line-height:1.8em; /* 文字サイズ */
	margin:5px 0;                                                          /* BOXは上下に5pxあける */
	padding:10px;                                                         /* BOX内は上下に上下左右に10pxあける */
	tab-size:4;                                                              /* TABコードは4文字とする */
	overflow: auto;                                                        /* BOX内に入らない場合はスクロールバーを表示する */
}

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

­ ­TABコードについて

上記の設定でTABコードがあった場合は4文字表示としています。

これはEmEditor等のテキストエディタで作成した文字列をここにペーストした場合、TABコードは4文字分を開けろという意味です。テキストエディタの中で何文字開けるか?はテキストエディタの設定です。

尚、上記の整形済みBOXの中で編集する場合はブラウザの制約でTABコードは入力できません。

どうしてもTABコードを入力したい場合は下記の様にします。

①テキストエディタのTABコードをCtrl+Cでクリップボードに入れる。

②整形済みテキストエリアの中でTABを入れたい所で、Ctrl+VでTABコードを張り付ます。

注意事項:原因は不明ですがTABの前文字はカラーなし、後ろ文字はTAB操作をする前はカラーなしにする必要があります。

 

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

************************************************************************/
/* preformatted text(プログラムソース)を表示するBOX */
/***********************************************************************/
.entry-content pre{
	border: 1px solid #666;
	color: #444;
	margin:5px 0;
	padding:5px;
	font-family:'メイリオ';
	font-size:14px;font-size:0.875rem;line-height:1.8em;
	tab-size:4;
	overflow: auto;
}

 

2.整形済みテキスト<pre>の操作方法

2-1.入力方法

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

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

 

2-2.PRE-BOXからでる方法

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

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

 

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

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

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

 

PRE-BOXにカーソルを入れて下記ボタンでインデント操作を行います。

 

2-4.PRE-BOXの削除

削除したいPRE-BOXにカーソルをセットし下記アイコンから、段落を実行します。

普通の段落文書になりますので、文字列を選択して削除して下さい。

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

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

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

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

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタの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」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここでは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画面やビジュアルエディタで使う方法を解説しています。