エディタからデフォルトで選べるラベルデザインを変更する方法と、デザインサンプルを60個まとめてみました。
THE THOR のパーツデザインの仕組みについてはこちらの記事にまとめてありますので、自分で各パーツをカスタマイズしてみたい方は参考にしてください。
THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがな[…]
エディタに表示される基本デザインの変更方法
カスタマイザーから基本スタイルを設定する
カスタマイザーの「パーツスタイル設定」から「ラベル設定」へ進むと、10種類のスタイルを設定できるようになっています。この10個のスタイルが、各エディタから選ぶことのできる基本スタイルです。
デフォルトで設定されている10種類のボックスを好みのものに変更するには、「ラベル設定」の「スタイル」の部分を編集します。（画像はボタン設定のものです）
お好きなラベルサンプルのコードを「スタイル」部分にコピペして、「タイトル」を任意のものに変更してください。作成したスタイルをエディタから選べるようになります。
ラベルの配色を変更する方法
下のサンプルコードのうち、「bgc-」で始まるものがラベルの背景色、「ftc-」で始まるものが文字色、「brc-」で始まるものが枠線色を指定している部分です。こちらの記事に色設定用のコードを一覧にしてありますので、好みの色に差し替えてご利用ください。
カスタマイザーのパーツ設定やテキストエディタからの投稿時用に、各パーツに設定できる色を一覧にしてみました。12色×7トーン＋モノトーン7色の計91色を、文字色・背景色・ボーダーの色、それぞれ別に指定できます。ボタンのサンプル[…]
ビジュアルエディタ利用の場合は、サンプルをそのままコピペして登録し、記事作成時にエディタから各部分の色を変更することもできます。
アイコンを変更する方法
アイコン付きのラベルの場合、「icon-」で始まるコードで表示するアイコンを指定しています。エディタの「アイコンオプション」というボタンから全アイコンのコードをコピーすることができますので、アイコンを変更したい場合は好みのものに差し替えてください。
サンプル27～32のアイコン背景色を変更する方法
カスタマイザーの「パーツスタイル設定」から「その他エディタ用パーツ設定」へ進むと、アイコンの背景色を変更できます。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボックスの場合、アイコンの背景色部分がここで指定した色になります。（アイコンは白色で表示されます）
シンプルなラベル
カラー背景
ラベルサンプル01
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingSラベルサンプル02
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingS es-radiusラベルサンプル03
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingS es-roundラベルサンプル04
style
ep-label es-LroundL bgc-Lsky ftc-white es-RpaddingS es-LpaddingS es-roundラベルサンプル05
style
ep-label es-LroundR bgc-Lsky ftc-white es-RpaddingS es-LpaddingS es-round枠線付き（細）
ラベルサンプル06
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-RpaddingS es-LpaddingSラベルサンプル07
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-RpaddingS es-LpaddingS es-radiusラベルサンプル08
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-RpaddingS es-LpaddingS es-roundラベルサンプル09
style
ep-label es-LroundL bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-RpaddingS es-LpaddingSラベルサンプル10
style
ep-label es-LroundR bgc-white ftc-Lsky brc-Lsky es-borderSolidS es-RpaddingS es-LpaddingS枠線付き（太）
ラベルサンプル11
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-RpaddingS es-LpaddingSラベルサンプル12
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-RpaddingS es-LpaddingS es-radiusラベルサンプル13
style
ep-label bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-RpaddingS es-LpaddingS es-roundラベルサンプル14
style
ep-label es-LroundL bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-RpaddingS es-LpaddingSラベルサンプル15
style
ep-label es-LroundR bgc-white ftc-Lsky brc-Lsky es-borderSolidM es-RpaddingS es-LpaddingSデザインラベル
ボーダー系
ラベルサンプル16
style
ep-label bgc-white ftc-Lsky brc-Lsky es-BborderSolidSラベルサンプル17
style
ep-label bgc-white ftc-Lsky brc-Lsky es-BborderSolidMラベルサンプル18
style
ep-label bgc-white ftc-Lsky brc-Lsky es-BborderDashedSラベルサンプル19
style
ep-label bgc-white ftc-Lsky brc-Lsky es-BborderDashedMシャドウ・グラデ系
ラベルサンプル20
style
ep-label bgc-white ftc-Lsky brc-Lsky es-LborderSolidM es-RpaddingS es-LpaddingS es-shadowラベルサンプル21
style
ep-label es-LroundR bgc-white ftc-Lsky brc-Lsky es-LborderSolidM es-RpaddingS es-LpaddingS es-shadowラベルサンプル22
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingS es-round es-shadowラベルサンプル23
style
ep-label bgc-Bsky ftc-white es-grada1 es-RpaddingS es-LpaddingS es-round es-shadowラベルサンプル24
style
ep-label bgc-Bsky ftc-white es-grada1 es-RpaddingS es-LpaddingS es-radius es-shadowラベルサンプル25
style
ep-label bgc-Bsky ftc-white es-grada2 es-RpaddingS es-LpaddingS es-round es-shadowラベルサンプル26
style
ep-label bgc-Bsky ftc-white es-grada2 es-RpaddingS es-LpaddingS es-radius es-shadowアイコン系
style
ep-label bgc-VPsky ftc-Bsky es-LroundL es-Fsmall es-RpaddingSS es-LiconCircle icon-checkmarkstyle
ep-label bgc-VPsky ftc-Bsky es-round es-shadow es-Fsmall es-RpaddingSS es-LiconCircle icon-checkmarkstyle
ep-label bgc-VPsky ftc-Bsky brc-Lsky es-borderSolidS es-Fsmall es-RpaddingSS es-LiconBox icon-checkmarkstyle
ep-label bgc-VPsky ftc-Bsky es-shadow es-Fsmall es-RpaddingSS es-LiconBox icon-checkmarkstyle
ep-label bgc-Bsky ftc-white es-round es-Fsmall es-RpaddingSS es-LiconBorder icon-checkmarkstyle
ep-label bgc-Bsky ftc-white es-grada2 es-radius es-shadow es-Fsmall es-RpaddingSS es-LiconBorder icon-checkmarkラベルサンプル33
style
ep-label bgc-white ftc-Lsky brc-Lsky es-BborderDashedS es-RpaddingSS es-Licon icon-checkmarkラベルサンプル34
style
ep-label bgc-white ftc-Lsky brc-Lsky es-bold es-BborderDashedM es-RpaddingSS es-Licon icon-checkmarkボックス内左上ラベル
こちらのデザインは親ボックスの左上隅にラベルを付けるのに使用します。全く同じデザインにしたい場合は、ボックスサンプルと組み合わせてご利用ください。
シンプル
ボックスサンプル07
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSSボックスサンプル08
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-Tshadowボックスサンプル03
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-shadowボックスサンプル01
style
ep-label es-LroundR es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSSアイコン付き
ボックスサンプル05
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-Licon icon-checkmarkボックスサンプル08
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-Tshadow es-Licon icon-checkmarkボックスサンプル03
style
ep-label es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-shadow es-Licon icon-checkmarkボックスサンプル01
style
ep-label es-LroundR es-Lcorner es-Fsmall bgc-Lsky ftc-white brc-Lsky es-borderSolidM es-RpaddingSS es-LpaddingSS es-Licon icon-checkmark吹き出し風ラベル
THE THOR のパーツデザインには吹き出し系のものがなかったので作ってみました。
こちらのデザインを使用する場合には、CSSを追加する必要があります。
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
に以下のCSSをコピペしてください。
style-user.css
.balloon_under::after {
position: absolute;
top: 100%;
left: 30px;
content: "";
height: 0;
width: 0;
border: 8px solid transparent;
margin-top: -2px;
border-top: 12px solid #7ecff5;/*吹出背景色と同じ色に変更して下さい*/
}
p span.ep-label:before {
color: unset;
}吹き出し小
ラベルサンプル43
style
ep-label es-Fsmall bgc-Lsky ftc-white es-RpaddingS es-LpaddingS balloon_underラベルサンプル44
style
ep-label es-Fsmall bgc-Lsky ftc-white es-radius es-RpaddingS es-LpaddingS balloon_underラベルサンプル45
style
ep-label es-Fsmall bgc-Lsky ftc-white es-round es-RpaddingS es-LpaddingS balloon_underラベルサンプル46
style
ep-label es-Fsmall bgc-Lsky ftc-white es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル47
style
ep-label es-Fsmall bgc-Lsky ftc-white es-radius es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル48
style
ep-label es-Fsmall bgc-Lsky ftc-white es-round es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_under吹き出し中
ラベルサンプル49
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingS balloon_underラベルサンプル50
style
ep-label bgc-Lsky ftc-white es-radius es-RpaddingS es-LpaddingS balloon_underラベルサンプル51
style
ep-label bgc-Lsky ftc-white es-round es-RpaddingS es-LpaddingS balloon_underラベルサンプル52
style
ep-label bgc-Lsky ftc-white es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル53
style
ep-label bgc-Lsky ftc-white es-radius es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル54
style
ep-label bgc-Lsky ftc-white es-round es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_under吹き出し大
ラベルサンプル55
style
ep-label bgc-Lsky ftc-white es-Fbig es-RpaddingS es-LpaddingS balloon_underラベルサンプル56
style
ep-label bgc-Lsky ftc-white es-Fbig es-radius es-RpaddingS es-LpaddingS balloon_underラベルサンプル57
style
ep-label bgc-Lsky ftc-white es-Fbig es-round es-RpaddingS es-LpaddingS balloon_underラベルサンプル58
style
ep-label bgc-Lsky ftc-white es-Fbig es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル59
style
ep-label bgc-Lsky ftc-white es-Fbig es-radius es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_underラベルサンプル60
style
ep-label bgc-Lsky ftc-white es-Fbig es-round es-RpaddingS es-LpaddingSS es-Licon icon-heart balloon_under