【THE THORパーツコードまとめ】ボックスやボタンなどのカスタマイズに

今回は、WordPressテーマ「THE THOR」の色やアイコンなど、装飾パーツをカスタマイズするためのコードをまとめました。

種類が多いので、コード一覧はクリックで開閉できるようなっています。

目次

THE THORカスタマイズで使うサイズ系

サイズ系コード一覧（クリックで開閉できます。）
コードスタイル
ボタンes-size10サイズ（10%）
ボタンes-size25サイズ（25%）
ボタンes-size40サイズ（40%）
ボタンes-size50サイズ（50%）
ボタンes-size60サイズ（60%）
ボタンes-size75サイズ（75%）
ボタンes-size90サイズ（90%）
ボタンes-size100サイズ（100%）

THE THORカスタマイズで使う内側余白系

内側余白系コード一覧（クリックで開閉できます。）
コードスタイル
ボタンes-padding0余白0
ボタンes-TpaddingSSトップ（極小）
ボタンes-TpaddingSトップ（小）
ボタンes-TpaddingMトップ（中）
ボタンes-TpaddingLトップ（大）
ボタンes-RpaddingSSライト（極小）
ボタンes-RpaddingSライト（小）
ボタンes-RpaddingMライト（中）
ボタンes-RpaddingLライト（大）
ボタンes-BpaddingSSボトム（極小）
ボタンes-BpaddingSボトム（小）
ボタンes-BpaddingMボトム（中）
ボタンes-BpaddingLボトム（大）
ボタンes-LpaddingSSレフト（極小）
ボタンes-LpaddingSレフト（小）
ボタンes-LpaddingMレフト（中）
ボタンes-LpaddingLレフト（大）

THE THORカスタマイズで使う外側余白系

外側余白系コード一覧（クリックで開閉できます。）
コードスタイル
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-margin0余白0
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-TmarginSSトップ（極小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-TmarginSトップ（小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-TmarginMトップ（中）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-TmarginLトップ（大）
テキストテキストテキストテキストテキ
テキストボタンテキストテキ
テキストテキストテキストテキストテキ		es-RmarginSSライト（極小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキ
テキストテキストテキストテキストテキ		es-RmarginSライト（小）
テキストテキストテキストテキストテキ
テキストボタンテキスト
テキストテキストテキストテキストテキ		es-RmarginMライト（中）
テキストテキストテキストテキストテキ
テキストボタンテキスト
テキストテキストテキストテキストテキ		es-RmarginLライト（大）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-BmarginSSボトム（極小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-BmarginSボトム（小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-BmarginMボトム（中）
テキストテキストテキストテキストテキ
テキストボタンテキストテキス
テキストテキストテキストテキストテキ		es-BmarginLボトム（大）
テキストテキストテキストテキストテキ
テキストボタンテキストテキ
テキストテキストテキストテキストテキ		es-LmarginSSレフト（極小）
テキストテキストテキストテキストテキ
テキストボタンテキストテキ
テキストテキストテキストテキストテキ		es-LmarginSレフト（小）
テキストテキストテキストテキストテキ
テキストボタンテキストテ
テキストテキストテキストテキストテキ		es-LmarginMレフト（中）
テキストテキストテキストテキストテキ
テキストボタンテキスト
テキストテキストテキストテキストテキ		es-LmarginLレフト（大）

THE THORカスタマイズで使うボーダー系

ボーダー系コード一覧（クリックで開閉できます。）
コードデザイン
ラベルes-borderSolidSオール実線（細）
ラベルes-borderSolidMオール実線（中）
ラベルes-borderDashedSオール破線（細）
ラベルes-borderDashedMオール破線（中）
ラベルes-borderDottedSオール点線（細）
ラベルes-borderDottedMオール点線（中）
ラベルes-BborderSolidSボトム実線（細）
ラベルes-BborderSolidMボトム実線（中）
ラベルes-BborderDashedSボトム破線（細）
ラベルes-BborderDashedMボトム破線（中）
ラベルes-BborderDottedSボトム点線（細）
ラベルes-BborderDottedMボトム点線（中）
ラベルes-LborderSolidSレフト実線（細）
ラベルes-LborderSolidMレフト実線（中）
ラベルes-LborderDashedSレフト破線（細）
ラベルes-LborderDashedMレフト破線（中）
ラベルes-LborderDottedSレフト点線（細）
ラベルes-LborderDottedMレフト点線（中）

THE THORカスタマイズで使う文字系

文字系コード一覧（クリックで開閉できます。）
コードデザイン
ボタンes-left位置（左）
ボタンes-center位置（中央）
ボタンes-right位置（右）
ボタンes-Fsmallサイズ（小）
ボタンes-Fbigサイズ（大）
ボタンes-FbigLサイズ（極大）
ボタンes-bold太字
ボタンes-italic斜体
ボタンes-strike打ち消し
ボタンes-underアンダーライン

THE THORカスタマイズで使うシャドウ系

シャドウ系コード一覧（クリックで開閉できます。）
コードデザイン
ボタンes-shadowLボックス外（ライト）
ボタンes-shadowボックス外（ノーマル）
ボタンes-shadowDボックス外（ダーク）
ボタンes-shadowInLボックス内（ライト）
ボタンes-shadowInボックス内（ノーマル）
ボタンes-shadowInDボックス内（ダーク）
ボタンes-TshadowLテキストシャドウ（ライト）
ボタンes-Tshadowテキストシャドウ（ノーマル）
ボタンes-TshadowDテキストシャドウ（ダーク）

THE THORカスタマイズで使う角丸系

角丸系コード一覧（クリックで開閉できます。）
コードデザイン
ボタンes-radius角丸（5px）
ボタンes-radiusL角丸（10px）
ボタンes-roundラウンド

THE THORカスタマイズで使う背景系

背景系コード一覧（クリックで開閉できます。）
コードデザイン
ボタンes-grada1グラデーション1
ボタンes-grada2グラデーション1
ボタンes-grid方眼用紙

THE THORカスタマイズで使うラベルパーツ専用

ラベルパーツコード一覧（クリックで開閉できます。）
コードデザイン
ラベルes-Lcornerコーナータイトル（ボックス）
ラベルes-LroundLラウンド（左）
ラベルes-LroundRラウンド（右）
ラベルes-Liconアイコン（余白）
ラベルes-LiconBorderアイコン（ボーダー）
ラベルes-LiconBoxアイコン（ボックス）
ラベルes-LiconCircleアイコン（サークル）

THE THORカスタマイズで使うボタンパーツ専用

ボタンパーツコード一覧（クリックで開閉できます。）
コードデザイン
ボタンes-BT3d立体
ボタンes-BTshadow薄影
ボタンes-BTrich薄影＋光
ボタンes-BTarrow右矢印
ボタンes-BTiconアイコン（余白）
ボタンes-BTiconBorderアイコン（ボーダー）
ボタンes-BTiconBoxアイコン（ボックス）
ボタンes-BTiconCircleアイコン（サークル）

THE THORカスタマイズで使うボックスパーツ専用

ボックスパーツコード一覧（クリックで開閉できます。）
コードデザイン
ボックス

テキスト　テキスト　テキスト　テキスト

es-Bwhole全域タイトル（ボックス内）
ボックス
es-Bbracketsカギ括弧
ボックス
es-BpaperLeftめくり（左）
ボックス
es-BpaperRightめぐり（右）
ボックス
es-BmarkHatenaはてなマーク
ボックス
es-BmarkExclビックリマーク
ボックス
es-BmarkQQマーク
ボックス
es-BmarkAAマーク
ボックス
es-BsubTサブタイトル（シンプル）
ボックス
es-BsubTradiサブタイトル（角丸）
ボックス
es-BsubTroundサブタイトル（ラウンド）
ボックス
es-Biconアイコン（シンプル）
ボックス
es-BiconBgアイコン（背景）
ボックス
es-BiconObiアイコン（帯）
ボックス
es-BiconCornerアイコン（コーナー）
ボックス
es-BiconCircleアイコン（サークル）

THE THORカスタマイズで使う色

THE THORの指定色でカスタマイズするには、bgc-〇〇〇・brc-〇〇〇・ftc-〇〇〇の〇〇〇部分に色見本の「THE THOR指定色　クラス名」を入力してください。

ラベルやボタンのアイコンの背景色は、パーツごとにカスタマイズできないものもありますのでご注意ください！

bgc-brc-ftc-
背景色枠線色文字色
色見本 91色（クリックで開閉できます。）
黄色系THE THOR指定色　クラス名色名（16進数）
Vyellow#FFF103
Byellow#FFF338
Lyellow#FFF89A
VPyellow#FFFDEC
DLyellow#CAC04F
DPyellow#CBBD01
DGyellow#675F00
オレンジ系THE THOR指定色　クラス名色名（16進数）
Vorange#F49800
Borange#F6AD39
Lorange#FBCE8A
VPorange#FEF5E8
DLorange#C39043
DPorange#BF7600
DGorange#633C00
赤系THE THOR指定色　クラス名色名（16進数）
Vred#E60D12
Bred#EA5533
Lred#F39C76
VPred#FEEDE3
DLred#BA5536
DPred#B60804
DGred#5F0200
マゼンタ系THE THOR指定色　クラス名色名（16進数）
Vmagenta#E50B4F
Bmagenta#E9536B
Lmagenta#F29C9F
VPmagenta#FDEDEC
DLmagenta#BA5460
DPmagenta#B5073C
DGmagenta#5F0216
ピンク系THE THOR指定色　クラス名色名（16進数）
Vpink#E4077F
Bpink#E95098
Lpink#F29FC3
VPpink#FDEFF5
DLpink#BA5584
DPpink#B50465
DGpink#600133
パープル系THE THOR指定色　クラス名色名（16進数）
Vpurple#920483
Bpurple#A54A98
Lpurple#C490BF
VPpurple#F3EAF4
DLpurple#8C4B82
DPpurple#740069
DGpurple#3E0036
ネイビー系THE THOR指定色　クラス名色名（16進数）
Vnavy#1C1E84
Bnavy#4C4398
Lnavy#8F82BC
VPnavy#E8E6F3
DLnavy#4E4282
DPnavy#14116E
DGnavy#04003A
ブルー系THE THOR指定色　クラス名色名（16進数）
Vblue#0B68B7
Bblue#2B71B8
Lblue#87ABDA
VPblue#E9EEF9
DLblue#3970A2
DPblue#075293
DGblue#01274F
水色系THE THOR指定色　クラス名色名（16進数）
Vsky#1FA0E8
Bsky#25B0EC
Lsky#7ECFF5
VPsky#EAF6FE
DLsky#1F94BD
DPsky#1781BA
DGsky#084562
ターコイズ系THE THOR指定色　クラス名色名（16進数）
Vturquoise#259E96
Bturquoise#29ADA9
Lturquoise#83CCC9
VPturquoise#EAF5F4
DLturquoise#21928F
DPturquoise#1C7F78
DGturquoise#0A4340
グリーン系THE THOR指定色　クラス名色名（16進数）
Vgreen#279944
Bgreen#2BA95F
Lgreen#88C997
VPgreen#EBF5EB
DLgreen#238F59
DPgreen#1E7C36
DGgreen#0B4215
ライム系THE THOR指定色　クラス名色名（16進数）
Vlime#8EC320
Blime#A9CF53
Llime#CCE199
VPlime#F2F7E5
DLlime#8EA953
DPlime#6F9B13
DGlime#395104
モノトーン系THE THOR指定色　クラス名色名（16進数）
white#FFFFFF
VLgray#D8D8D8
Lgray#B2B2B2
gray#8C8C8C
Dgray#656565
VDgray#3F3F3F
black#191919

THE THORパーツのアイコンの カスタマイズ

パーツにアイコンを表示させるには、icon-〇〇〇を入力してください。

（ボックスでアイコンを使うには、コードが変わりますのでご注意ください！）

icon-〇〇〇のコードがないときは、␣（半角スペース）のあとにicon-〇〇〇を入力するとアイコンが表示されるようになります。

アイコン一覧（クリックで開閉できます。）
アイコンアイコン名
icon-quotation
icon-quotation2
icon-newspaper
icon-pencil
icon-pencil2
icon-quill
icon-pen
icon-blog
icon-eyedropper
icon-droplet
icon-paint-format
icon-image
icon-images
icon-film
icon-dice
icon-bullhorn
icon-book
icon-books
icon-cart
icon-credit-card
icon-lifebuoy
icon-phone
icon-phone-hang-up
icon-address-book
icon-music
icon-play
icon-pacman
icon-spades
icon-clubs
icon-diamonds
icon-heart
icon-heart-broken
icon-star-empty
icon-star-half
icon-star-full
icon-connection
icon-podcast
icon-feed
icon-file-text
icon-file-text2
icon-profile
icon-file-empty
icon-files-empty
icon-file-picture
icon-file-music
icon-file-play
icon-file-video
icon-file-zip
icon-copy
icon-paste
icon-stack
icon-folder
icon-folder-open
icon-folder-plus
icon-folder-minus
icon-folder-download
icon-folder-upload
icon-tag
icon-price-tags
icon-barcode
icon-qrcode
icon-ticket
icon-coin-dollar
icon-coin-euro
icon-coin-pound
icon-coin-yen
icon-calculator
icon-pushpin
icon-location
icon-location2
icon-map
icon-map2
icon-update
icon-clock
icon-clock2
icon-alarm
icon-bell
icon-stopwatch
icon-calendar
icon-drawer
icon-drawer2
icon-box-add
icon-box-remove
icon-floppy-disk
icon-drive
icon-database
icon-hour-glass
icon-zoom-in
icon-zoom-out
icon-enlarge
icon-enlarge2
icon-shrink
icon-shrink2
icon-key
icon-key2
icon-lock
icon-unlocked
icon-wrench
icon-equalizer
icon-equalizer2
icon-hammer
icon-hammer2
icon-magic-wand
icon-aid-kit
icon-bug
icon-pie-chart
icon-stats-dots
icon-stats-bars
icon-stats-bars2

icon-trophy
icon-gift
icon-glass
icon-glass2
icon-meter
icon-meter2
icon-fire
icon-lab
icon-magnet
icon-bin
icon-bin2
icon-briefcase
icon-shield
icon-road
icon-power
icon-power-cord
icon-switch
icon-list-numbered
icon-list
icon-list2
icon-menu
icon-menu2
icon-menu3
icon-menu4
icon-menu5
icon-new
icon-close
icon-compass
icon-compass2
icon-view_card
icon-view_wide
icon-view_normal
icon-binoculars
icon-search
icon-search2
icon-cog
icon-cup
icon-spoon-knife
icon-leaf
icon-accessibility
icon-target
icon-clipboard
icon-tree
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-cloud-check
icon-download
icon-download2
icon-download3
icon-upload
icon-upload2
icon-upload3
icon-sphere
icon-earth
icon-link
icon-flag
icon-attachment
icon-eye
icon-eye-plus
icon-eye-minus
icon-eye-blocked
icon-bookmark
icon-bookmarks
icon-sun
icon-contrast
icon-brightness-contrast
icon-warning
icon-notification
icon-question
icon-plus
icon-minus
icon-info
icon-cancel-circle
icon-blocked
icon-cross
icon-checkmark
icon-checkmark2
icon-spell-check
icon-enter
icon-exit
icon-tab
icon-move-up
icon-move-down
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-numeric-asc
icon-sort-numberic-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-command
icon-shift
icon-ctrl
icon-opt
icon-checkbox-checked
icon-checkbox-unchecked
icon-radio-checked
icon-radio-checked2
icon-radio-unchecked
icon-crop
icon-make-group
icon-ungroup
icon-scissors
icon-filter
icon-font
icon-ligature
icon-ligature2
icon-text-height
icon-text-width
icon-font-size
icon-bold
icon-underline
icon-italic
icon-strikethrough
icon-omega
icon-sigma
icon-page-break
icon-superscript
icon-superscript2
icon-subscript
icon-subscript2
icon-text-color
icon-pagebreak
icon-clear-formatting
icon-table
icon-table2
icon-insert-template
icon-pilcrow
icon-ltr
icon-rtl
icon-section
icon-paragraph-left
icon-paragraph-center
icon-paragraph-right
icon-paragraph-justify
icon-indent-increase
icon-indent-decrease
icon-share
icon-share2
icon-new-tab
icon-embed
icon-embed2
icon-terminal
icon-cogs
icon-mail
icon-mail2
icon-mail3
icon-mail4
icon-mail5

以上、【THE THORパーツコードまとめ】ボックスやボタンなどのカスタマイズにでした。

お読みいただき、ありがとうございました。

THE THORカスタマイズ

１人で悩んでいませんか？
設定やカスタマイズでお困りのときは
お気軽にご相談ください。

ご相談はこちらへどうぞ　＞