エディタからデフォルトで選べるボタンデザインの変更方法と、デザインサンプルを50個まとめてみました。
THE THOR のパーツデザインの仕組みについてはこちらの記事にまとめてありますので、自分で各パーツをカスタマイズしてみたい方は参考にしてください。
関連記事
THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがな[…]
エディタに表示される基本デザインの変更方法
カスタマイザーから基本スタイルを設定する
カスタマイザーの「パーツスタイル設定」から「ボタン設定」へ進むと、10種類のスタイルを設定できるようになっています。この10個のスタイルが、各エディタから選ぶことのできる基本スタイルです。
デフォルトで設定されている10種類のボタンを好みのものに変更するには、「ボタン設定」の「スタイル」の部分を編集します。
お好きなボタンサンプルのコードを「スタイル」部分にコピペして、「タイトル」を任意のものに変更してください。作成したスタイルをエディタから選べるようになります。
ボタンカラーを変更する方法
下のサンプルコードのうち、「bgc-」で始まるものがボタンの背景色、「ftc-」で始まるものが文字色、「brc-」で始まるものが枠線色を指定している部分です。こちらの記事に色設定用のコードを一覧にしてありますので、好みの色に差し替えてご利用ください。
カスログ for THE THOR
???????????????????????????????????????????????????????????1…
ビジュアルエディタ利用の場合は、サンプルをそのままコピペして登録し、記事作成時にエディタから各部分の色を変更することもできます。
アイコンを変更する方法
アイコン付きボタンの場合、「icon-」で始まるコードで表示するアイコンを指定しています。エディタの「アイコンオプション」というボタンから全アイコンのコードをコピーすることができますので、アイコンを変更したい場合は好みのものに差し替えてください。
39番以降のサンプルでアイコンの背景色を変更する方法
カスタマイザーの「パーツスタイル設定」から「その他エディタ用パーツ設定」へ進み、「アイコン系パーツのアイコンカラー」という項目でアイコンの背景色を変更できます。
※カスタマイザーには「アイコンの色を指定」と書かれていますが、ボタンの場合、アイコンの背景色部分がここで指定した色になります。（アイコン本体は文字色と同じ色で表示されます）
シンプルな文字だけのボタン
マテリアルデザイン風
style
ep-btn bgc-Bsky ftc-white es-shadow es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold style
ep-btn bgc-Bsky ftc-white es-radius es-shadow es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-round es-shadow es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold3Dボタン
style
ep-btn bgc-Bsky ftc-white es-BT3d es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-radius es-BT3d es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-round es-BT3d es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold少し立体的なボタン
style
ep-btn bgc-Bsky ftc-white es-Tshadow es-shadow es-grada2 es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-radius es-Tshadow es-shadow es-grada2 es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-round es-Tshadow es-shadow es-grada2 es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldリッチボタン
style
ep-btn bgc-Bsky ftc-white es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-radius es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-Bsky ftc-white es-round es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold付箋風ボタン
style
ep-btn bgc-white ftc-Bsky brc-Bsky es-LborderSolidM es-shadow es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldシンプルな枠線付きボタン
style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidS es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingMstyle
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidS es-round es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM太めの枠線付きボタン
style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidM es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-boldstyle
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidM es-round es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold破線・ドット枠線付きボタン
style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderDashedS es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingMstyle
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderDottedS es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM幅広ボタン
style
ep-btn es-size90 bgc-Bsky ftc-white es-shadow es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold style
ep-btn es-size90 bgc-Bsky ftc-white es-radius es-Tshadow es-shadow es-grada2 es-TpaddingS es-BpaddingS es-boldstyle
ep-btn es-size90 bgc-white ftc-Bsky brc-Bsky es-borderSolidS es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingMアイコン付きボタン
シンプルなアイコン付きボタン
style
ep-btn bgc-Bsky ftc-white es-shadowL es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-checkmarkstyle
ep-btn bgc-Bsky ftc-white es-radius es-shadowL es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-checkmarkstyle
ep-btn bgc-Bsky ftc-white es-round es-shadowL es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-checkmarkアイコン付きリッチボタン
style
ep-btn bgc-Bsky ftc-white es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-play3style
ep-btn bgc-Bsky ftc-white es-radius es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-play3style
ep-btn bgc-Bsky ftc-white es-round es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-play3アイコン付き枠線ボタン
style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidS es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-BTicon icon-checkmark2style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidS es-round es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-BTicon icon-checkmark2style
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidM es-radius es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-earthstyle
ep-btn bgc-white ftc-Bsky brc-Bsky es-borderSolidM es-round es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-bold es-BTicon icon-earthアイコン付きリッチボタン（ボーダー）
style
ep-btn bgc-Bsky ftc-white es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-bookmarksstyle
ep-btn bgc-Bsky ftc-white es-radius es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-bookmarksstyle
ep-btn bgc-Bsky ftc-white es-round es-grada2 es-Tshadow es-BTrich es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-bookmarks浮き上がったアイコン付きボタン（ボーダー）
style
ep-btn bgc-Bsky ftc-white brc-VPsky es-borderSolidS es-shadow es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-linkstyle
ep-btn bgc-Bsky ftc-white brc-VPsky es-borderSolidS es-radius es-shadow es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-linkstyle
ep-btn bgc-Bsky ftc-white brc-VPsky es-borderSolidS es-round es-shadow es-TpaddingS es-BpaddingS es-bold es-BTiconBorder icon-linkシンプルなボックスアイコンボタン
style
ep-btn bgc-VPsky ftc-Bsky es-shadow es-bold es-BTiconBox icon-pencilstyle
ep-btn bgc-VPsky ftc-Bsky es-radius es-shadow es-bold es-BTiconBox icon-pencilstyle
ep-btn bgc-VPsky ftc-Bsky es-round es-shadow es-bold es-BTiconBox icon-pencil枠線付きボックスアイコンボタン
style
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidM es-bold es-BTiconBox icon-bubblestyle
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidM es-radius es-bold es-BTiconBox icon-bubblestyle
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidM es-round es-bold es-BTiconBox icon-bubble3Dサークルアイコンボタン
style
ep-btn bgc-VPsky ftc-Bsky es-BT3d es-bold es-BTiconCircle icon-rocketstyle
ep-btn bgc-VPsky ftc-Bsky es-radius es-BT3d es-bold es-BTiconCircle icon-rocketstyle
ep-btn bgc-VPsky ftc-Bsky es-round es-BT3d es-bold es-BTiconCircle icon-rocket枠線付きサークルアイコンボタン
style
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidS es-bold es-BTiconCircle icon-forwardstyle
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidS es-radius es-bold es-BTiconCircle icon-forwardstyle
ep-btn bgc-VPsky ftc-Bsky brc-Bsky es-borderSolidS es-round es-bold es-BTiconCircle icon-forward