スタイルにセットされている【ラベルの使い方】と【デザイン一覧】

この記事では、ビジュアルエディタのスタイルにセットされている「ラベル」の使い方とデザイン一覧をご紹介します。

エディタスタイル「ラベル」の一覧

目次

デフォルトラベルの使い方

ビジュアルエディタの「スタイル」には、10種類のラベルデザインが用意されています（ラベルのイメージを確認したい方は、目次より「ラベルのデザイン一覧」へジャンプしてくださいね）。

１．デザインを選択してからテキストを入力する

ラベルのデザインを選択してから、テキストを入力する方法です。

  1. スタイル ＞ ラベル から使いたいデザインを選択する

    ラベルのデザインを選択する

  2. テキストを入力する

    エディタ上に表示されたラベル内でカーソルが点滅しているので、そのままテキストを入力します。

    エディタに表示されたラベル

    ライム左ラウンドラベル

    ※ラベルを選択した後、テキストを入力しないまま他のエリアをクリックしてしまうと、選択したラベルが消えてしまうので注意しましょう。

2.テキストを入力後、デザインを選択する

テキストを入力した後に、ラベルデザインを選択する方法です。

2-1.ラベル用のテキストだけを入力する

  1. テキストを入力する

    (例)　シンプルボーダーラベル

  2. 　入力したテキスト上にカーソルを持ってくる

    入力したテキスト「シ」から「ル」の間（どの部分でもよい）でカーソルが点滅する状態にします。
    テキスト上にカーソルを合わせる

  3. ラベルのデザインを選択する

    使いたいラベルのデザインを　スタイル ＞ ラベル　から選択します。

    シンプルボーダーラベルを選択

  4. 完成

    シンプルボーダーラベル

2-2.テキストの一部だけをラベルにする

入力したテキストのいち部分だけをラベルデザインにすることができます。

  1. ラベルデザインにしたい部分を選択する

    テキストを選択

  2. ラベルのデザインを選択する

    使いたいラベルのデザインを　スタイル ＞ ラベル　から選択する。

    ラベルのデザインを選択

  3. 完成

    これは、ブルーボーダーラウンドラベルです。

 

デフォルトデザインの応用編

ビジュアルエディタにセットされているラベルデザインを利用して、オリジナルのラベルデザインに変更する方法をご紹介します。

色を変更する

背景、ボーダー、文字の色を変更することができます。

スタイル「カラーセット」

使える色は、カラーセット収められている全91色です。

関連記事
エディタ内スタイルで使用するカラーセット一覧と使い方

この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。 投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。 カラーセット全91色　一覧 […]

 

例えば、ブルーボーダーラウンドラベルでは、背景色にベリーペールトーンのブルー、ボーダー色にライトトーンのブルーが使われています。これを、別の色に変更していきたいと思います。

～作業手順～

  1. 指定されている色を取り消す。
  2. 新しい色を設定する。

ビジュアルエディタで行う方法

１．ラベルの範囲内にカーソルを合わせる。

ラベル内にカーソルを合わせる。

２．スタイル ＞ カラーセット ＞ 背景・ボーダー・文字色　から指定されている色をクリックする。

指定されている色をクリックし取り消す

色名をクリックすると設定が取り消されます。セットされているラベルにどの色が使われているかは、後ほど紹介する「ラベルのデザイン一覧」を参照してください。

背景色が取り消されてラベル

ブルーボーダーラウンドラベル

 

３．スタイル ＞ カラーセット ＞ 背景・ボーダー・文字色　から使いたい色を選択する。

選択するとラベルの色が変更されます。

ベリーペールトーングリーンを選択

ブルーボーダーラウンドラベル

 

テキストエディタで行う方法（おすすめ！）

１．ビジュアルエディタからテキストエディタに切り替える。

ビジュアル・テキストエディタ切替

 

２．変更したいラベルの記述から、背景色（bgc-）、ボーダー色（brc-）、文字色（ftc-）を探す。

色の記述部分を探す

３．「-」の後を、使いたい色名に置き換える。

「-」の後ろが色を指定する部分になるので、使いたい色名に置き換えます。

テキストエディタで色を変更する

関連記事
エディタ内スタイルで使用するカラーセット一覧と使い方

この記事では、ラベル、ボタン、ボックスなどを配置するときに使用できる「カラーコード」の一覧をご紹介しています。 投稿エディタ内の「スタイル」にあらかじめセットされているカラーが、全部で91色あります。 カラーセット全91色　一覧 […]

関連記事
エディターのスタイル【高度な使い方】

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

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

 

ラベルのアイコンを変更する

アイコンがセットされてラベルデザインがあります。このアイコンを別のアイコンに変更する方法です。

四角アイコンラベル

 

１．テキストエディタに切り替える

2．アイコンオプションをクリックし、アイコン一覧を表示する。

アイコンオプションボタン

 

3．アイコン一覧から使いたいアイコンの名前をコピーする。

アイコンオプションリスト

４．設定されているアイコン名を消して、コピーしたアイコン名を貼り付ける。

アイコン名を置き換える

 

アイコンを変更したラベル

四角アイコンラベル

 

ラベルアイコンの背景色を変更する

アイコンの背景色は、外観 ＞ カスタマイズ ＞ パーツスタイル設定 ＞ その他のエディタ用パーツ設定 ＞ アイコン系パーツのアイコンカラー　で設定することができます。

アイコン系パーツのアイコンカラー

 

背景色変更の対象となるラベルは、「四角アイコンラベル」、「丸アイコンオレンジラベル」、スタイルセット ＞ ラベル専用パーツ ＞ アイコン(四角)またはアイコン(サークル)　です。

四角アイコンラベル　

丸アイコンオレンジラベル

ラベル専用パーツ ＞ アイコン(四角)　

ラベル専用パーツ ＞ アイコン(サークル)

 

色を指定すると、すべてが同じ色に変更されます。１つ１つ別々に背景色を指定することはできません。

アイコンの背景色を指定後

ラベルのデザイン一覧

角丸レッドラベル

角丸レッドラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-radius スタイルセット ＞ 角丸系 ＞ 角丸(5px)
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
es-LpaddingSS スタイルセット ＞ 内側余白系 ＞ レフト(極小)
bgc-DPred カラーセット ＞ ディープトーン ＞ レッド
brc-white カラーセット ＞ ボーダー色 ＞ モノトーン ＞ ホワイト 
ftc-white カラーセット ＞ 文字色 ＞ モノトーン ＞ ホワイト

シンプルボーダーラベル

シンプルボーダーラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-borderSolidS スタイルセット ＞ ボーダー系 ＞ オール実線(細)
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
es-LpaddingSS スタイルセット ＞ 内側余白系 ＞ レフト(極小)
bgc-white カラーセット ＞ モノトーン ＞ ホワイト
brc-VLgray カラーセット ＞ ボーダー色 ＞ モノトーン ＞ ベリーライトグレー

ライム左ラウンドラベル

ライム左ラウンドラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-LroundL スタイルセット ＞ ラベルパーツ専用 ＞ラウンド（左）
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
es-LpaddingSS スタイルセット ＞ 内側余白系 ＞ レフト(極小)
bgc-Blime カラーセット ＞ ブライトトーン ＞ ライム
ftc-white カラーセット ＞ 文字色 ＞ モノトーン ＞ ホワイト

ブルーボーダーラウンドラベル

ブルーボーダーラウンドラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-round スタイルセット ＞ 角丸系 ＞ ラウンド
es-borderDashedS スタイルセット ＞ ボーダー系 ＞ オール破線(細)
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
es-LpaddingSS スタイルセット ＞ 内側余白系 ＞ レフト(極小)
brc-Lblue カラーセット ＞ ボーダー色 ＞ ライトトーン ＞ ブルー
bgc-VPblue カラーセット ＞ 背景色 ＞ ベリーペールトーン ＞ ブルー

丸アイコンオレンジラベル

丸アイコンオレンジラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-LiconCircle スタイルセット ＞ ラベルパーツ専用 ＞アイコン(サークル)
icon-pencil2 アイコンオプション
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
bgc-VPorange カラーセット ＞ 背景色 ＞ ベリーペールトーン ＞ オレンジ
ftc-Borange カラーセット ＞ 文字色 ＞ ブライトトーン ＞ オレンジ
bgc-VPblue カラーセット ＞ 背景色 ＞ ベリーペールトーン ＞ ブルー

ピンクアイコンラベル

ピンクアイコンラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
ep-LiconBorder スタイルセット ＞ ラベルパーツ専用 ＞ アイコン(ボーダー)
icon-notification アイコンオプション
es-RpaddingSS スタイルセット ＞ 内側余白系 ＞ ライト(極小)
bgc-VPpink カラーセット ＞ 背景色 ＞ ベリーペールトーン ＞ ピンク
ftc-Bpink カラーセット ＞ 文字色 ＞ ベリーペールトーン ＞ ピンク

四角アイコンラベル

四角アイコンラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
ep-LiconBox スタイルセット ＞ ラベルパーツ専用 ＞ アイコン(ボックス)
icon-location アイコンオプション
es-borderSolidS スタイルセット ＞ ボーダー系 ＞ オール実線(細)
brc-VPpink カラーセット ＞ ボーダー色 ＞ ベリーライトトーン ＞ グレー
ftc-Bpink カラーセット ＞ 文字色 ＞ ダークトーン ＞ グレー

破線ボーダーアイコンラベル

破線ボーダーアイコンラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-Licon スタイルセット ＞ ラベルパーツ専用 ＞ アイコン(余白)
icon-pushpin アイコンオプション
ep-BborderDashedM スタイルセット ＞ ボーダー系 ＞ ボトム破線(中)
es-RpaddingSS スタイルセット＞ 内側余白系 ＞ ライト(極小)
es-bold スタイルセット ＞ 文字系 ＞ 太字
bgc-white カラーセット ＞ 背景色 ＞ モノトーン ＞ ホワイト

ビッグ右ラウンドブルーラベル

ビッグ右ラウンドブルーラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-LroundR スタイルセット ＞ ラベルパーツ専用 ＞ ラウンド(右)
es-TpmarginS スタイルセット＞ 外側余白系 ＞ トップ(小)
es-TpaddingS スタイルセット＞ 内側余白系 ＞ トップ(小)
es-BpaddingS スタイルセット＞ 内側余白系 ＞ ボトム(小)
es-RpaddingM スタイルセット＞ 内側余白系 ＞ ライト(中)
es-LpaddingM スタイルセット＞ 内側余白系 ＞ レフト(中)
es-LborderSolidM スタイルセット ＞ ボーダー系 ＞ レフト実線(中)
es-Fbig スタイルセット ＞ 文字系 ＞ サイズ(大)
es-blod スタイルセット ＞ 文字系 ＞ 太字
brc-DLsky カラーセット ＞ ボーダー色 ＞ ダルトーン ＞ スカイ

ターコイズグラデ右寄せラベル

ターコイズグラデ
右寄せラベル

 

スタイルの名前
ep-label デフォルトパーツ ＞ ラベル
es-grada2 スタイルセット ＞ 背景系 ＞ グラデーション2
es-size25 スタイルセット＞ サイズ系 ＞ サイズ(25%)
es-right スタイルセット＞ 文字系 ＞ 位置(右)
es-RpaddingS スタイルセット＞ 内側余白系 ＞ ライト(小)
es-LborderSolidM スタイルセット ＞ ボーダー系 ＞ レフト実線(中)
ftc-white カラーセット ＞ 文字色 ＞ モノトーン ＞ ホワイト
brc-DGturquoise カラーセット ＞ ボーダー色 ＞ ダークグレイッシュトーン ＞ ターコイズ
bgc-DLturquoise カラーセット ＞ 背景色 ＞ ダルトーン ＞ ターコイズ

 

スポンサーリンク