この記事では、オリジナルのラベル・ボタン・ボックス・ボックス内ボックスの作り方をご紹介します。今回の記事ではラベルの事例でご説明します。
オリジナルラベルの作り方
1. デフォルトパーツの中からラベルを選択する。
ビジュアルエディタのメニューから「スタイル」→「デフォルトパーツ」→「ラベル」の順に選択します。
2.デフォルトパーツのラベルが表示される。
デフォルトパーツのラベルが表示されますのでテキストを入力します。テキスト入力後のラベルが下記の画像です。
ここに文章が入ります。
しかし、この状態ではカスタマイズがなされていませんのでデザインのカスタマイズを行います。
2.ラベルの背景色を変える。
「スタイル」→「カラーセット」→「背景色」の順に選択します。
今回の事例ではライトトーンのスカイを選択しますので「ライトトーン」→「スカイ」の順に選択します。
3.ラベルの背景色がライトトーンのスカイに変更完了。
ラベルの背景色がライトトーンのスカイに変更できました。
ここに文章が入ります。
4.ラベルの形を変える。
「スタイル」→「スタイルセット」の順に選択します。
今回の事例では角丸系ラウンドの形にしたいので「角丸系」→「ラウンド」の順に選択します。
5.ラベルの形が角丸系ラウンドに変更完了。
ラベルの形が角丸系ラウンドに変更されました。
ここに文章が入ります。
6.ラベルのサイズを変える。
「スタイル」→「スタイルセット」→「サイズ系」の順に選択します。
今回の事例では1.5倍のサイズにしたいので「サイズ50%」を選択します。
7.ラベルのサイズ変更が完了。
ラベルのサイズが1.5倍に大きくなりました。
（仮名：角丸スカイ1.5倍ラベル）
ここに文章が入ります。
このようにラベル・ボタン・ボックスなどのデザイン・形・色などを自由自在にカスタマイズし、自分だけのオリジナルパーツを作成することが可能です。
カスタマイズしたパーツのスタイルをカスタマイザーに登録する。
一度カスタマイズして作成したパーツのスタイルは、カスタマイザーに登録し保存することができます。保存したパーツは、「スタイル」メニューの中に登録されますので、再作成しなくてもクリック操作だけで呼び出すことができます。
1.ビジュアルエディタをテキストエディタに切り返る。
ビジュアルエディタからテキストエディタに切り替えてください。
2.先ほど作成したラベルのスタイルをコピーする。
先ほど作成したラベルのスタイルをコピーします。
先ほど作成した角丸スカイ1.5倍ラベルの事例なら「<span class=”ep-label bgc-Lsky es-round es-size50“>ここに文章が入ります。</span>」の文字列から「ep-label bgc-Lsky es-round es-size50」をコピーします。
3.パーツスタイル設定→ラベル設定へ進む。
「外観」→「カスタマイズ」→「パーツスタイル設定」→「ラベル設定」へ進みます。
スタイルに先ほどコピーしたスタイルの文字列を貼り付けます。
タイトルはお好みでつけてください。今回は「角丸スカイ1.5倍ラベル」としました。これで先ほど作成した「角丸スカイ1.5倍ラベル」が登録されました。
4.登録したスタイルを呼び出してみる。
ビジュアルエディタのメニューから「スタイル」→「ラベル」を選択すると、先ほどラベル設定から登録した角丸スカイ1.5倍ラベルが新規に登録されています。角丸スカイ1.5倍ラベルをクリックするだけで記事中に角丸スカイ1.5倍ラベルを設置できます。
