当サイトでも使用しているWordPressテーマ「THE THOR(ザ・トール)」。
デフォルトの見た目の紹介と、ラベルデザインの変更方法を紹介します。
THE THOR(ザ・トール)ラベル一覧
角丸レッドラベル
シンプルボーダーラベル
ライム左ラウンドラベル
ブルーボーダーラウンドラベル
丸アイコンオレンジラベル
ピンクアイコンラベル
四角アイコンラベル
破線ボーダーアイコンラベル
ビッグ右ラウンドブルーラベル
ターコイズグラデ右寄せラベル
THE THOR(ザ・トール)ラベルアイコンの変更方法
アイコンオプション ⇨ アイコン一覧 で使いたいアイコンの名前をコピーします。
使いたいラベルを選択 ⇨ アイコン挿入
ダイアルログが表示されるので先ほどのアイコン名を張り付けて「OK」
すると…。
もともとの丸アイコンのラベルを…
Youtubeのアイコンに変えることができました!
また、テキストエリアに直接アイコンを挿入することもできます。
アイコンは文章の先頭に表示されます。
文章と文章の間や文末には設定できませんでした。
ちなみに、アイコンがもともとないラベルにも同じ方法でアイコンを追加することができます。
デフォルトでアイコンがないラベルに
アイコンを付けてみました
THE THOR(ザ・トール)ラベルのデザイン変更
編集エリアの上にあるタブ「テキスト」を選択して「HTML」を触れるようにしましょう。
例として下記のラベルの色を変えてみましょう。
アイコンのデザインを変えたい
まずはコードをみてみましょう。
1 |
<span class="ep-label es-round es-borderDashedS brc-Lblue bgc-VPblue es-RpaddingSS es-LpaddingSS">アイコンのデザインを変えたい</span> |
- bgc-:背景色
- brc-:枠線色
- ftc-:文字色
背景色・枠線色・文字色を変えてみました。
こんなかんじ
1 |
<span class="ep-label es-round es-borderDashedS brc-white bgc-Vsky es-RpaddingSS es-LpaddingSS ftc-white">こんなかんじ</span> |
コードは上記のようになっています。
初歩的なデザインの変更方法はここまでです。