とことん独学ブログ

【THE THOR】BOX・ラベル・ボタンのカスタマイズ

テーマ 【THE THOR】BOX・ラベル・ボタンのカスタマイズ

THE THORのボックスを自由にカスタマイズできます。

Chromeでは動作確認済みです。

目次

ボックス・ラベル・ボタンのカスタマイズ

  • 各項目のチェックボックスを選択
  • ボタンをクリックするとコードとプレビューが表示されます。
  • 色が選びにくいです。（要改良）
  • 記事内のリセットボタンまたはページ更新でもとに戻ります。
  • 圧倒的にSEOに強いWPテーマ【ザ・トール】

プレビュー＆コード

ボックス

テキスト

ラベル

テキスト

ボタン

テキスト

枠線・色・文字・角の設定

カスタマイズON！
形状 細線
SolidS		 太線
SolidM		 細破線
DashedS		 太破線
DashedM		 細点線
DottedS		 太点線
DottedM
背景色 枠線色 文字色
カラー設定
デフォルト 丸み5px 丸み10px 丸み50px 左50px 右50px
角
文字スタイル
影 ライト ノーマル ダーク
背景装飾
サイズ
効　果
メインカラムの幅に対して幅10%
メインカラムの幅に対して幅25%
メインカラムの幅に対して幅40%
メインカラムの幅に対して幅50%
メインカラムの幅に対して幅60%
メインカラムの幅に対して幅75%
メインカラムの幅に対して幅90%
メインカラムの幅に対して幅100%
余白（margin・padding）
位置 内側の余白(padding) 外側の余白(margin) 余白幅
デフォルト デフォルト
余白なし 余白なし
余白(上) 1rem
1.5rem
3rem
4.5em
余白(下) 1rem
1.5rem
3rem
4.5em
余白(左) 1rem
1.5rem
3rem
4.5em
余白(右) 1rem
1.5rem
3rem
4.5em

ボタン装飾の設定

ボタン以外（ボックス・ラベル）にも使えますが表示が崩れる可能性があります。

罫線や色の設定は上と共通です。

なし 立体(凹む) 薄影 薄影＋光 右矢印
ボタン生成！

テキスト

ボックス専用の装飾設定

マークはボックス以外では使えません。マークがはみ出ます。
装飾はボックス以外でも使えますが文字とかぶるかもしれません。

罫線や色の設定は上と共通です。
BOX生成！

テキスト

アイコン専用設定

罫線や色の設定は上と共通です。

ボックス・ラベル・ボタンを個別に設定します。

アイコンの種類も選択しないと表示されません。
アイコン設定！

BOXのコード

テキスト

ラベルのコード

テキスト

ボタンのコード

テキスト
基本アイコン(258種類)
建物・乗り物アイコン(8種)
読込・AV機器アイコン(24種)
オーディオ系アイコン(27種)
人・顔アイコン(45種)
矢印・コメントアイコン(36種)
ロゴアイコン(100種)

テーマの最新記事8件