HOME  /WordPress(初級)
 /TinyMCE Advancedにhtmlソースを出力するBOXを作成する。
2020年03月27日

TinyMCE Advancedにhtmlソースを出力するBOXを作成する。

 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

TinyMCE Advanced を使いこなす方法 のドキュメントでは、テキストボックスの定義と使い方をご説明しましたが、上記のボックスを使って、PHPやHTMLソースを記述すると

・http画面とビジュアルエディタで行き来しているうちに画面が崩れる。

・http画面からテキストをコピーして貼り付ける時に正しく取り込めない場合がある。

という問題が発生しました。

特にhttp画面から『’』や『”』が入った構文をコピーすると『’』や『”』が全角で取り込まれる為に、一見取り込めたよう見えてもプログラムが正常に動かない等の現象が発生します。
これはCSSでも同じで『’』や『”』が入った文字列をコピーする際は気を付けてください。

そこで色々調べた結果、TinyMCEのビジュアルエディタの基本機能で『preformatted text』が段落の種類の一つとして使える事が判り、PHPやHTMLソースを記述する場合はこのボックスを使う方法に変更しました。

このボックスで記述すると上記の様な問題点は発生しなくなります。

1.Preformatted textとは

Preformatted textとは<pre>~</pre>で囲まれるタグで日本語訳は『整形済みテキスト』です。

ブラウザではHTML言語が送られてくるとそれを解釈して画面を作りますが、そのブラウザに対して<pre>~</pre>で囲まれた文章は整形済みなので変更しなくて良いですよ!という意味の様です。

pre要素はソースコードなどをそのまま表示させるために使用します。

2.Preformatted textの表示用のCSSを定義する

①基本方針

ソースを編集するエディタとしてはEmEditorをご紹介しましたが、このエディタのデフォルトフォントは『MSゴシック』です。よって、Preformatted textのフォントも『MSゴシック』にする事によりEmEditorとのデータのやり取りをスムーズにする事を狙う。

②editor-style.cssに追加するCSSデータ

/*******************************************************************/
/* preformatted text のテキストBOXを追加 */
/*******************************************************************/
pre{font-family:'MS ゴシック';font-size:14px;line-height: 24px;border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin:5px 0 10px 30px;padding:10px;width:90%;}

③style.cssに追加するCSSデータ

/*******************************************************************/
/* preformatted text のテキストBOXを追加 */
/*******************************************************************/
.entry-content pre{font-family:'MS ゴシック';font-size:14px;line-height: 24px;border:1px solid #c0c0c0;border-radius:3px;background-color:#f7f7f7;margin:5px 0 10px 30px;padding:10px;width:90%;}

3.Preformatted textボックスの使い方

使い方は、非常に簡単です。

①Preformatted Textを入れたい場所にカーソルをセットして、段落から『整形済みテキスト』を選択する

下記テキストボックスが表示されます。

ここに自由にテキストを追加する

【使用上の注意点】

1.改行は『Enter』

2.ボックスから出る場合は『Shift+Enter』

以上で、Preformatted Textが、気持ちよく使えるようになります。

 ②使用上の注意点

注意点はテキストボックスと同様でインデントに注意が必要です。
下記がインデントが入った事例です。文字の開始位置が右にきていますが、これはpaddingの設定ではありません。

ここに自由にテキストを追加する

img_55e26727bb94c左記アイコンでインデントを戻してください。

ここに自由にテキストを追加する

正常な位置に移動します。

 

<ドキュメントガイド>

前のテーマ:TinyMCE Advanced を使いこなす方法

次のテーマ:OnePress Image Elevatorのインストールと画像管理の事例

 メモ

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

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

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

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


<関連記事一覧>

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

DSM6.1では無償のクラウドのGoogleドライブにバックアップできる様になりました。これを使うと15GBまで使えるので個人ユースに場合はこれで十分と思います。ここではこのバックアップ方法とリストア方法を解説しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。