HOME  /WordPress(応用)
 /ビジュアルエディタでボタン(button)を表示させる方法
2020年04月20日

ビジュアルエディタでボタン(button)を表示させる方法


ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。

ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ボタンの種類 クラス

コメント

.btn

ボタンクラス

これを入れないとカラーコードは指定できない

.btn

.btn-default

ボタンクラス

+カラーコード #e6e6e6

.btn

.btn-primary

ボタンクラス

+カラーコード #286090

.btn

.btn-success

ボタンクラス

+カラーコード #449d44

.btn

.btn-info

ボタンクラス

+カラーコード #31b0d5

.btn

.btn-warning

ボタンクラス

+カラーコード #ec971f

.btn

.btn-danger

ボタンクラス

+カラーコード #c9302c

.btn

.btn-link

ボタンクラス

+ボタンというよりは通常のリンク

尚、この機能を利用する為には下記ドキュメントの設定が必要です。

 ­サイトにBootstrap3を利用する

 

1.ビジュアルエディタのCSSの変更

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

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

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

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

 

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

/**********************************************************************/
/** BootStrapのボタンクラス **/
/**********************************************************************/
.____button_________{}     /* スタイルで見た時の区切り線です */
button.btn{                                   /* buttonタグのボタンのスタイル指定 */
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}
button.btn-default{}                       /* ボタンの色 */
button.btn-primary{}                      /* ボタンの色 */
button.btn-success{}                      /* ボタンの色 */
button.btn-info{}                            /* ボタンの色 */
button.btn-warning{}                     /* ボタンの色 */
button.btn-danger{}                       /* ボタンの色 */
button.btn-link{margin-top:-7px;}   /* 文字列 

■上記で指定しているのはBootstrapのボタン要素をbuttonタグで使える様にしています。

ボタン要素(.btn等)自体はBootstrapの設定で事前に読み込まれています。

■BootstrapのCSSを一部変更しているのは赤字の所になります。

 

2.style.css の設定

ここで設定するのは、Bootstrapの設定変更をした下記部分だけです。

/************************************************************/
/* BootStrap設定の変更(ボタン文字のレスポンシブ化、ボタンリンクの設定変更 */
/************************************************************/
.entry-content button.btn{font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}
.entry-content button.btn-link{margin-top:-7px;}
.entry-content .btn:hover{color:#000;}

■3行目の「.btn:hover{color:#000;}」は、ボタンにカーソルが来た時の色を指定しています。

 

3.使い方

3-1.ボタンの文字を入力します

ex)ボタン等

 

3-2.ボタンの基本クラスを入れる

下記のスタイルから「button.btn」を指定します。

下記の様なボタンになります。

 

3-3.ボタンにカラーを入れます。

ボタン

上記は、「button.btn-primary」を追加したサンプルです。

 

以上でボタンは出来上がりましたが、このボタンを挿入しても何も起こりません。

 

3-4.ボタンにリンク先を設定する。

下記のリンクボタンで、リンク先を指定します。

下記はリンク先が指定されたボタンになりま。

 

以上でビジュアルエディタの中でボタンを作成する事ができる様になりました。

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

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


<関連記事一覧>

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

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

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用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」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

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