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

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

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

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

 ­サイトに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.ボタンにリンク先を設定する。

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

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

ボタン

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