今回は、WordPressテーマ「THE THOR」の色やアイコンなど、装飾パーツをカスタマイズするためのコードをまとめました。
種類が多いので、コード一覧はクリックで開閉できるようなっています。
目次
- 1 THE THORカスタマイズで使うサイズ系
- 2 THE THORカスタマイズで使う内側余白系
- 3 THE THORカスタマイズで使う外側余白系
- 4 THE THORカスタマイズで使うボーダー系
- 5 THE THORカスタマイズで使う文字系
- 6 THE THORカスタマイズで使うシャドウ系
- 7 THE THORカスタマイズで使う角丸系
- 8 THE THORカスタマイズで使う背景系
- 9 THE THORカスタマイズで使うラベルパーツ専用
- 10 THE THORカスタマイズで使うボタンパーツ専用
- 11 THE THORカスタマイズで使うボックスパーツ専用
- 12 THE THORカスタマイズで使う色
- 13 THE THORパーツのアイコンの カスタマイズ
THE THORカスタマイズで使うサイズ系
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カスタマイズで使う文字系
THE THORカスタマイズで使うシャドウ系
THE THORカスタマイズで使う角丸系
THE THORカスタマイズで使う背景系
THE THORカスタマイズで使うラベルパーツ専用
- ラベルパーツコード一覧(クリックで開閉できます。)
コード デザイン ラベル es-Lcorner コーナータイトル(ボックス) ラベル es-LroundL ラウンド(左) ラベル es-LroundR ラウンド(右) ラベル es-Licon アイコン(余白) ラベル es-LiconBorder アイコン(ボーダー) ラベル es-LiconBox アイコン(ボックス) ラベル es-LiconCircle アイコン(サークル)
THE THORカスタマイズで使うボタンパーツ専用
THE THORカスタマイズで使うボックスパーツ専用
- ボックスパーツコード一覧(クリックで開閉できます。)
コード デザイン ボックステキスト テキスト テキスト テキスト
es-Bwhole 全域タイトル(ボックス内) ボックスes-Bbrackets カギ括弧 ボックスes-BpaperLeft めくり(左) ボックスes-BpaperRight めぐり(右) ボックスes-BmarkHatena はてなマーク ボックスes-BmarkExcl ビックリマーク ボックスes-BmarkQ Qマーク ボックスes-BmarkA Aマーク ボックス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パーツコードまとめ】ボックスやボタンなどのカスタマイズにでした。
お読みいただき、ありがとうございました。