プログラムソースを記述する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にカーソルをセットし下記アイコンから、段落を実行します。
普通の段落文書になりますので、文字列を選択して削除して下さい。