当サイトでも使用しているWordPressテーマ「THE THOR（ザ・トール）」。
デフォルトの見た目の紹介と、ボタンデザインの変更方法を紹介します。
THE THOR（ザ・トール）ボタン一覧
THE THOR（ザ・トール）ボタンアイコンの変更方法
アイコンオプション ⇨ アイコン一覧 で使いたいアイコンの名前をコピーします。
使いたいボタンを選択 ⇨ アイコン挿入
ダイアルログが表示されるので先ほどのアイコン名を張り付けて「OK」
すると…。
また、テキストエリアに直接アイコンを挿入することもできます。
アイコンは文章の先頭に表示されます。
文章と文章の間や文末には設定できませんでした。
ちなみに、もともとアイコンがないボタンにアイコンの追加はできません。
ラベル・ボックスはもともとアイコンがない素体でも好きなアイコンを設定できます。
THE THOR（ザ・トール）ボタンの変更方法
編集エリアの上にあるタブ「テキスト」を選択して「HTML」を触れるようにしましょう。
例として下記のボタンのデザインを変えてみましょう。
まずはコードを見てみましょう。
|
1 |
<a class="ep-btn icon-pencil2 es-BTiconCircle es-round es-BT3d es-RmarginM bgc-VPorange ftc-DLorange es-bold">デザインを変えたい</a> |
- bgc-：背景色
- brc-：枠線色
- ftc-：文字色
アイコン・背景色・文字色・形を変えてみました。
|
1 |
<a class="ep-btn icon-coin-dollar es-radius bgc-Lyellow ftc-DPnavy es-bold es-RmarginM es-BT3d">こんなかんじ</a> |
コードは上記のようになっています。
初歩的なデザインの変更方法はここまでです。
