THETHORテーマには、クリックするだけですぐに使えるラベル素材が10種類あります。もちろんカスタマイズ可能です。
このページでは、初期設定のみで使うことができるラベル10種を表示し、
ザ・トールのラベル素材10種それぞれのラベルをクリックすると、説明がすぐに読めます。
角丸レッドラベル シンブルボーダーラベル
ライム左ラウンドラベル ブルーボーダーラウンドラベル 丸アイコンオレンジラベル ピンクアイコンラベル 四角アイコンラベル 破線ボーダーアイコンラベル ビッグ右ラウンドブルーラベル ターコイズグラデ右寄せラベル
既成ラベルの作り方
既成ラベルの作り方はとっても簡単です。どのラベルを作りたいかあらかじめ選んでから、以下の工程を行ってください。以下では、赤丸レッドラベルの作成を例として、手順を掲載します。
1.テキストを選択
ラベルにしたいテキスト(文字)を入力して、マウスで選択状態にします。キーボードを使う場合は、［shiftキー］を押しながら矢印で選択状態にしてください。
2.ラベルを指定
ラベルを指定します。［スタイル］ボタンをクリックして、［ラベル］にカーソルを合わせてから、マウスを横移動させて作成したいラベルを選択(クリック)してください。
完成です
たった2つの工程で、赤丸レッドラベルが完成しました。
既成ラベルをカスタマイズすることも可能です。カスタマイズを行いたい場合は、こちらのページをご覧ください。
既成ラベル見本10種
ここからは、ザ・トールのテーマを購入後、すぐに使える既成ラベル10種を紹介します。ラベルの見本、HTMLテキスト文、使用されているクラス名を掲載しておりますので、カスタマイズにお役立てください。
【スタイルボタンで行うカスタマイズ】【クラス名で行うカスタマイズ】
赤丸レッドラベル
赤丸レッドラベルは、4つ角に丸みを帯びた赤いラベルです。
HTMLテキスト
赤丸レッドラベルを表示するためのHTML文です。この構文をテキストエディタにコピーペーストしても赤丸レッドラベルは表示されます。
<span class="ep-label bgc-DPred brc-white ftc-white es-radius es-RpaddingSS es-LpaddingSS">角丸レッドラベル</span>
使用されているクラス名
上の構文の説明です。赤丸レッドラベルには7つのクラス名が使用されています。以下は簡単な説明ですので、クラス名についての詳細をお知りになりたい場合は、クラス名をクリックしてみてください。詳細ページに移動します。
ep-label- ラベル
bgc-DPred- 背景色-DPred
brc-white- ボーダー色-白色(※)
ftc-white- 文字色-白
es-radius- 角の丸み(5px)
es-RpaddingSS- テキスト右側余白(極小)
es-LpaddingSS- テキスト左側余白(極小)
※ボーダーの色指定のクラス名がありますが、ボーダーの指定がないため、反映されていません。（詳しくはこちら）
シンプルボーダーラベル
シンプルボーダーラベルは、その名の通り、シンプルにテキストと枠のみで作られているラベルです。
HTMLテキスト
シンプルボーダーラベルを表示するためのHTML文です。この構文をテキストエディタにコピーペーストしてもシンプルボーダーラベルを表示させることができます。
<span class="ep-label es-borderSolidS bgc-white brc-VLgray es-RpaddingSS es-LpaddingSS">シンブルボーダーラベル</span>使用されているクラス名
シンプルボーダーラベルを構成するクラス名の説明です。シンプルボーダーラベルには、6つのクラス名が使用されています。（クラス名をクリックすると詳細ページが別タブで開きます）
ep-label- ラベル
es-borderSolidS- ボーダー実線(細)
bgc-white- 背景色-白
brc-VLgray- ボーダー色-VLgray
es-RpaddingSS- テキスト右側余白(極小)
es-LpaddingSS- テキスト左側余白(極小)
ライム左ラウンドラベル
ライム左ラウンドラベルは、左側が丸くなっているラベルです。
HTMLテキスト
ライム左ラウンドラベルを表示するためのHTML文です。この構文をテキストエディタにコピーペーストすると「ライム左ラウンドラベル」を表示させることができます。
<span class="ep-label es-LroundL bgc-Blime ftc-white es-RpaddingSS es-LpaddingSS">ライム左ラウンドラベル</span>
使用されているクラス名
「ライム左ラウンドラベル」を構成するクラス名の簡単な説明です。ライム左ラウンドラベルは6つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-LroundL- 左側が丸い
bgc-Blime- 背景-Blime
ftc-white- 文字色-白
es-RpaddingSS- テキスト右側余白(極小)
es-LpaddingSS- テキスト左側余白(極小)
ブルーボーダーラウンドラベル
ブルーボーダーラウンドラベルは、左右が丸く、ボーダーのついたラベルです。
HTMLテキスト
ブルーボーダーラウンドラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「ブルーボーダーラウンドラベル」を表示させることができます。
<span class="ep-label es-round es-borderDashedS brc-Lblue bgc-VPblue es-RpaddingSS es-LpaddingSS">ブルーボーダーラウンドラベル</span>
使用されているクラス名
「ブルーボーダーラウンドラベル」を構成するクラス名の簡単な説明です。ブルーボーダーラウンドラベルは7つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-round- 四隅が丸い
es-borderDashedS- ボーダー破線(細)
brc-Lblue- ボーダー色-Lblue
bgc-VPblue- 背景色-VPblue
es-RpaddingSS- テキスト右側余白(極小)
es-LpaddingSS- テキスト左側余白(極小)
丸アイコンオレンジラベル
丸アイコンオレンジラベルは、左側に丸いアイコンが表示されているラベルです。アイコンは任意のものに指定することができます。
【アイコンの見本】
HTMLテキスト
丸アイコンオレンジラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「丸アイコンオレンジラベル」を表示させることができます。
<span class="ep-label icon-pencil2 es-LiconCircle es-LroundL bgc-VPorange ftc-Borange es-RpaddingSS">丸アイコンオレンジラベル</span>
使用されているクラス名
「丸アイコンオレンジラベル」を構成するクラス名の簡単な説明です。丸アイコンオレンジラベルは7つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
icon-pencil2- のアイコン名
es-LiconCircle- ラベルタイプ(アイコン･サークル)
es-LroundL- 左側が丸い
bgc-VPorange- 背景色-VPorange
ftc-Borange- 文字色-Borange
es-RpaddingSS- テキスト右側余白(極小)
クラス名一覧はこちら・カスタマイズはこちら
ピンクアイコンラベル
ピンクアイコンラベルは、左側にアイコンの付いたラベルです。アイコンは任意のものに変更することができます。
ラベル見本
ピンクアイコンラベル
デフォルトの見え方です。カスタマイズ可能です。
【アイコンの見本】
HTMLテキスト
ピンクアイコンラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「ピンクアイコンラベル」を表示させることができます。
<span class="ep-label es-LiconBorder icon-notification es-RpaddingSS bgc-VPpink ftc-Bpink">ピンクアイコンラベル</span>
使用されているクラス名
「ピンクアイコンラベル」を構成するクラス名の簡単な説明です。ピンクアイコンラベルは6つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-LiconBorder- ラベルタイプ(アイコン･ボーダー)
icon-notification- のアイコン名
es-RpaddingSS- テキスト右側余白(極小)
bgc-VPpink- 背景色-VPpink
ftc-Bpink- 文字色-Bpink
四角アイコンラベル
四角アイコンラベルは、左側に四角いアイコンが表示されるラベルです。アイコンは任意のものに変更することができます。
HTMLテキスト
四角アイコンラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「四角アイコンラベル」を表示させることができます。
<span class="ep-label es-LiconBox icon-location es-borderSolidS brc-VLgray ftc-Dgray">四角アイコンラベル</span>
使用されているクラス名
「四角アイコンラベル」を構成するクラス名の簡単な説明です。四角アイコンラベルは6つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-LiconBox- ラベルタイプ(アイコン･ボックス)
icon-location- のアイコン名
es-borderSolidS- ボーダー実線(細)
brc-VLgray- ボーダー色-VLgray
ftc-Dgray- 文字色－Dgray
ザ・トールクラス名一覧はこちら・カスタマイズはこちら
破線ボーダーアイコンラベル
破線ボーダーアイコンラベルは、左側にアイコンの付いたラベルです。アイコンは任意のものに変更することができます。
HTMLテキスト
破線ボーダーアイコンラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「破線ボーダーアイコンラベル」を表示させることができます。
<span class="ep-label es-BborderDashedM bgc-white es-Licon icon-pushpin es-RpaddingSS es-bold">破線ボーダーアイコンラベル</span>
使用されているクラス名
「破線ボーダーアイコンラベル」を構成するクラス名の簡単な説明です。破線ボーダーアイコンラベルは7つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-BborderDashedM- ボーダー下破線(中)
bgc-white- 背景色－白
es-Licon- ラベルタイプ(余白･アイコン)
icon-pushpin- のアイコン名
es-RpaddingSS- テキスト右側余白(極小)
es-bold- 太字
ザ・トールクラス名一覧はこちら・カスタマイズはこちら
ビッグ右ラウンドブルーラベル
ビッグ右ラウンドブルーラベルは、右側が丸く、文字が大きいラベルです。アイコンはありません。
HTMLテキスト
ビッグ右ラウンドブルーラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「ビッグ右ラウンドブルーラベル」を表示させることができます。
<span class="ep-label es-LroundR es-TmarginS es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-Fbig es-bold es-LborderSolidM brc-DLsky">ビッグ右ラウンドブルーラベル</span>
使用されているクラス名
「ビッグ右ラウンドブルーラベル」を構成するクラス名の簡単な説明です。ビッグ右ラウンドブルーラベルは11つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-LroundR- ラベルタイプ(右ラウンド)
es-TmarginS- ラベル外側上の余白(小)
es-TpaddingS- テキスト上の余白(小)
es-BpaddingS- テキスト下の余白(小)
es-RpaddingM- テキスト右側の余白(中)
es-LpaddingM- テキスト左側の余白(中)
es-Fbig- 文字サイズ(大)
es-bold- 太字
es-LborderSolidM- ボーダー左側、実線(中)
brc-DLsky- ボーダー色-DLsky
ザ・トールクラス名一覧はこちら・カスタマイズはこちら
ターコイズグラデ右寄せラベル
ターコイズグラデ右寄せラベルは、背景はグラデーションで、文字は右寄せになっているラベルです。
初期設定では幅が表示領域に対して25%なのでこのように見えています
HTMLテキスト
ターコイズグラデ右寄せラベルを表示させるためのHTML文です。この構文をテキストエディタにコピーペーストすると「ターコイズグラデ右寄せラベル」を表示させることができます。
<span class="ep-label es-grada2 bgc-DLturquoise ftc-white es-size25 es-right es-RpaddingS es-LborderSolidM brc-DGturquoise">ターコイズグラデ右寄せラベル</span>
使用されているクラス名
「ターコイズグラデ右寄せラベル」を構成するクラス名の簡単な説明です。ターコイズグラデ右寄せラベルは9つのクラス名で構成されています。（クラス名をクリックすると詳細ページが開きます）
ep-label- ラベル
es-grada2- グラデーション(タイプ2)
bgc-DLturquoise- 背景色-DLturquoise
ftc-white- 文字色-白
es-size25- 横幅25%
es-right- 右寄せ
es-RpaddingS- テキスト右側余白(小)
es-LborderSolidM- ボーダー左、実線（中）
brc-DGturquoise- ボーダー色－DGturquoise
まとめ
このページでは、クリックするだけで使えるラベルデザイン10種と使われているクラス名を掲載しました。
サイトを作成していると、『この部分をこうしたい』とか『もっと○○にならないかな』などと思うことは多々あります。ですから「このまま使う」ことはもちろん可能ですが、あなただけのオリジナルに「カスタマイズする」のもよいかと思います。ぜひ、思い通りのサイトやページに仕上げてくださいね。
