ビジュアルエディタでボタン（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;}