【パーツスタイル設定】ラベル・ボタン・ボックス・ボックス内ボックスの設定

この記事では、パーツスタイル設定の「ラベル設定」「ボタン設定」「ボックス設定」「ボックス内ボックス設定」について解説しています。

ここで設定した内容は、ビジュアルエディタ内のツールである「スタイル」内に反映されます。デフォルトでは、それぞれ10種類のスタイルがセットされています。

どんなときに設定するの?

では、どんなときに、パーツスタイル設定の「ラベル」「ボタン」「ボックス」「ボックス内ボックス」の設定を使えばよいのでしょうか?

  • デフォルトのデザイン以外を繰り返し何度も利用する場合に設定する

 

デフォルトのデザイン以外とは、デフォルトのデザインを自分好みのカラーやスタイルに変更したデザインや、自分で1からスタイルを設定していったデザインなどを指します。

使い方

投稿や固定ページのエディタでスタイルを作成します。デフォルトデザインを編集したものやオリジナルデザイン、どちらでも構いません。

1.デザインを作成・編集する

ボックスやボタンなどのデザインを作成します。

スタイル > デフォルトパーツ を使って、1から自分でデザインを作り上げてもよいですし、デフォルトデザインを編集しても構いません。

例として、デフォルト「シンプルアイコンボックス」のデザインを編集したとします。

スタイル > ボックス > シンプルアイコンボックス

シンプルアイコンボックス

 

関連記事

この記事では、ビジュアルエディタのメニュー「スタイル」内にある【ボックス】の使い方についてご紹介しています。 基本的な使い方 記事を書く または、適当なテキストを入力する 設置したい箇所を選択する スタイルからボックスデザ[…]

関連記事

この記事では、エディタスタイルの高度な使い方について、解説しています。 高度な使い方とはどんな使い方? スタイルの名前を利用する。 テキストエディタ(HTML)で装飾を編集する。 ビジュアルエディタで編集した内容を確認する[…]

エディタのスタイル【高度な使い方】

 

変更した「シンプルアイコンボックス」がこちら。

編集内容
アイコン:「tag」から「folder-open」へ変更
ボーダー:「オール破線(細)」を追加
ボーダーカラー:「ダルトーンピンク」を追加

 

2.テキストエディタでスタイルの記述をコピー

仮に、「このデザインを今後よく使うので、すぐ使えるように設定しておこう」となった場合、テキストエディタに切り替えHTMLの記述を確認します

シンプルアイコンボックスの記述

「ep-box」から「brc-DLpink」が、シンプルアイコンボックスのスタイルを記述している部分になります。ここをコピーしておきます。

記述の部分をコピーする

 

3.パーツスタイル設定を編集する

外観 > カスタマイズ > パーツスタイル設定 > ボックス設定 を開きます。

ボックス以外のパーツを使用している場合は、該当するパーツ設定を開いてください。

パーツスタイル設定「THE THOR」

 

「ボックス設定」を開くと、スタイル > ボックス に表示されるスタイルが表示されます。

パーツスタイル設定 > ボックス設定

 

ボックス1~10のうち、あまり使用しないと思われる項目の設定を、自分で作ったスタイルに上書きします。

  • タイトル:自分でわかりやすい名前を付けます
  • スタイル:先ほどコピーした記述を貼り付けます。

ボックス設定の変更

 

4.保存する

「公開」ボタンを押して保存します。

5.ビジュアルエディタで確認する

ビジュアルエディタの スタイル > ボックス を表示し、設定した内容が反映されていればOKです。

スタイル > ボックス の確認

これで、自分で作ったデザインを簡単に使うことができます。

スポンサーリンク