※当サイトにはプロモーションが含まれています。
最近、ワードプレス（WordPress）テーマの「THE THOR（ザ・トール）」を触る機会が増えました。
ただ、THE THOR（ザ・トール）のマニュアルサイトは、基本スタイル（CSS）の一覧がないのが不便だと感じることがしばしば･･･。
その為、自分への備忘録として、よく使う（と思われる）CSSのクラスをまとめました。
THORの基本スタイル、CSSのクラス一覧
THORの基本スタイル、CSSのクラス一覧です。
なお、これら記載したCSSは予め、THORで用意されているものです。
その為、適用したいクラスがあれば、
<p class="bgc-Vyellow">背景が黄色になる</p>
のように書くことで、クラスが適用されます。
※追加CSSなどに記述する必要はありません。
基本カラーのCSS
基本カラーのクラスです。
自分は、ボタンの色を変更する際などに使います。
/*背景色*/
.bgc-Vyellow {background-color:#fff100}
.bgc-Vorange {background-color:#f49801}
.bgc-Vred {background-color:#e60112}
.bgc-Vmagenta {background-color:#e5004f}
.bgc-Vpink {background-color:#e4017f}
.bgc-Vpurple {background-color:#920883}
.bgc-Vnavy {background-color:#1c1e84}
.bgc-Vblue {background-color:#0068b7}
.bgc-Vsky {background-color:#00a0e9}
.bgc-Vturquoise{background-color:#009e96}
.bgc-Vgreen {background-color:#094}
.bgc-Vlime {background-color:#8ec31f}
.bgc-Byellow {background-color:#fff338}
.bgc-Borange {background-color:#f6ad3a}
.bgc-Bred {background-color:#ea5532}
.bgc-Bmagenta {background-color:#e9536b}
.bgc-Bpink {background-color:#e95098}
.bgc-Bpurple {background-color:#a54a98}
.bgc-Bnavy {background-color:#4c4398}
.bgc-Bblue {background-color:#2b71b8}
.bgc-Bsky {background-color:#00b0ec}
.bgc-Bturquoise{background-color:#00ada9}
.bgc-Bgreen {background-color:#0ba95f}
.bgc-Blime {background-color:#a9cf52}
.bgc-DPyellow {background-color:#cbbd00}
.bgc-DPorange {background-color:#bf7601}
.bgc-DPred {background-color:#b60105}
.bgc-DPmagenta {background-color:#b5003c}
.bgc-DPpink {background-color:#b50165}
.bgc-DPpurple {background-color:#740169}
.bgc-DPnavy {background-color:#14116e}
.bgc-DPblue {background-color:#005293}
.bgc-DPsky {background-color:#0081ba}
.bgc-DPturquoise{background-color:#007f78}
.bgc-DPgreen {background-color:#007c36}
.bgc-DPlime {background-color:#6f9b12}
.bgc-Lyellow {background-color:#fff89a}
.bgc-Lorange {background-color:#fbce8a}
.bgc-Lred {background-color:#f39c76}
.bgc-Lmagenta {background-color:#f29c9f}
.bgc-Lpink {background-color:#f29fc3}
.bgc-Lpurple {background-color:#c490bf}
.bgc-Lnavy {background-color:#8f82bc}
.bgc-Lblue {background-color:#87abda}
.bgc-Lsky {background-color:#7ecff5}
.bgc-Lturquoise{background-color:#83ccc9}
.bgc-Lgreen {background-color:#88c997}
.bgc-Llime {background-color:#cce199}
.bgc-DLyellow {background-color:#cac04e}
.bgc-DLorange {background-color:#c39043}
.bgc-DLred {background-color:#ba5536}
.bgc-DLmagenta {background-color:#ba5460}
.bgc-DLpink {background-color:#ba5584}
.bgc-DLpurple {background-color:#8c4b82}
.bgc-DLnavy {background-color:#4e4282}
.bgc-DLblue {background-color:#3970a2}
.bgc-DLsky {background-color:#1894be}
.bgc-DLturquoise{background-color:#1d928f}
.bgc-DLgreen {background-color:#218f59}
.bgc-DLlime {background-color:#8ea953}
.bgc-VPyellow {background-color:#fffded}
.bgc-VPorange {background-color:#fef5e8}
.bgc-VPred {background-color:#feede3}
.bgc-VPmagenta {background-color:#fdedec}
.bgc-VPpink {background-color:#fdeff5}
.bgc-VPpurple {background-color:#f3eaf4}
.bgc-VPnavy {background-color:#e8e6f3}
.bgc-VPblue {background-color:#e9eef9}
.bgc-VPsky {background-color:#eaf6fe}
.bgc-VPturquoise{background-color:#eaf5f4}
.bgc-VPgreen {background-color:#ebf5eb}
.bgc-VPlime {background-color:#ebf5eb}
.bgc-DGyellow {background-color:#675f00}
.bgc-DGorange {background-color:#633c00}
.bgc-DGred {background-color:#5f0100}
.bgc-DGmagenta {background-color:#5f0017}
.bgc-DGpink {background-color:#600033}
.bgc-DGpurple {background-color:#3e0036}
.bgc-DGnavy {background-color:#08003a}
.bgc-DGblue {background-color:#00274f}
.bgc-DGsky {background-color:#004462}
.bgc-DGturquoise{background-color:#004340}
.bgc-DGgreen {background-color:#004215}
.bgc-DGlime {background-color:#395104}
.bgc-white {background-color:#fff}
.bgc-VLgray{background-color:#d8d8d8}
.bgc-Lgray {background-color:#b2b2b2}
.bgc-gray {background-color:#8c8c8c}
.bgc-Dgray {background-color:#656565}
.bgc-VDgray{background-color:#3f3f3f}
.bgc-black {background-color:#191919}文字系のCSS
文字の大きさや、文字の装飾を調整するクラスです。
.content .es-Fsmall{ font-size: 1.2rem;}
.content .es-Fbig { font-size: 1.6rem;}
.content .es-FbigL { font-size: 2.0rem;}
.content .es-bold { font-weight:bold;}
.content .es-italic{ font-style:italic;}
.content .es-strike{ text-decoration: line-through;}
.content .es-under { text-decoration: underline;}
.content .es-left { text-align:left;}
.content .es-center{ text-align:center;}
.content .es-right { text-align:right;}
余白系のCSS
余白を調整するクラスです。
自分は、一番よく使うクラスになります。
/*内側余白系*/
.content .es-padding0 { padding:0;}
.content .es-TpaddingSS { padding-top:1rem;}
.content .es-TpaddingS { padding-top:1.5rem;}
.content .es-TpaddingM { padding-top:3rem;}
.content .es-TpaddingL { padding-top:4.5rem;}
.content .es-RpaddingSS { padding-right:1rem;}
.content .es-RpaddingS { padding-right:1.5rem;}
.content .es-RpaddingM { padding-right:3rem;}
.content .es-RpaddingL { padding-right:4.5rem;}
.content .es-BpaddingSS { padding-bottom:1rem;}
.content .es-BpaddingS { padding-bottom:1.5rem;}
.content .es-BpaddingM { padding-bottom:3rem;}
.content .es-BpaddingL { padding-bottom:4.5rem;}
.content .es-LpaddingSS { padding-left:1rem;}
.content .es-LpaddingS { padding-left:1.5rem;}
.content .es-LpaddingM { padding-left:3rem;}
.content .es-LpaddingL { padding-left:4.5rem;}
/*外側余白系*/
.content .es-margin0 { margin:0;}
.content .es-TmarginSS { margin-top:1rem;}
.content .es-TmarginS { margin-top:1.5rem;}
.content .es-TmarginM { margin-top:3rem;}
.content .es-TmarginL { margin-top:4.5rem;}
.content .es-RmarginSS { margin-right:1rem;}
.content .es-RmarginS { margin-right:1.5rem;}
.content .es-RmarginM { margin-right:3rem;}
.content .es-RmarginL { margin-right:4.5rem;}
.content .es-BmarginSS { margin-bottom:1rem;}
.content .es-BmarginS { margin-bottom:1.5rem;}
.content .es-BmarginM { margin-bottom:3rem;}
.content .es-BmarginL { margin-bottom:4.5rem;}
.content .es-LmarginSS { margin-left:1rem;}
.content .es-LmarginS { margin-left:1.5rem;}
.content .es-LmarginM { margin-left:3rem;}
.content .es-LmarginL { margin-left:4.5rem;}サイズを調整するCSS
横幅やカラムサイズを調整するクラスです。
画像の大きさを調整したい場合や、デフォルトのカラム以外で枠組を作りたい場合などに使います。
.content .es-size10 { width:10%;}
.content .es-size25 { width:25%;}
.content .es-size40 { width:40%;}
.content .es-size50 { width:50%;}
.content .es-size60 { width:60%;}
.content .es-size75 { width:75%;}
.content .es-size90 { width:90%;}
.content .es-size100 { width:100%;}
その他のCSS
あまり使う事はありませんが、ボーダー系、シャドウ系、角丸系をまとめました。
/*ボーダー系*/
.content .es-borderSolidS { border:1px solid #191919;}
.content .es-borderSolidM { border:3px solid #191919;}
.content .es-borderDashedS { border:1px dashed #191919;}
.content .es-borderDashedM { border:3px dashed #191919;}
.content .es-borderDottedS { border:1px dotted #191919;}
.content .es-borderDottedM { border:3px dotted #191919;}
.content .es-BborderSolidS { border-bottom:1px solid #191919;}
.content .es-BborderSolidM { border-bottom:3px solid #191919;}
.content .es-BborderDashedS { border-bottom:1px dashed #191919;}
.content .es-BborderDashedM { border-bottom:3px dashed #191919;}
.content .es-BborderDottedS { border-bottom:1px dotted #191919;}
.content .es-BborderDottedM { border-bottom:3px dotted #191919;}
.content .es-LborderSolidS { border-left:1px solid #191919;}
.content .es-LborderSolidM { border-left:3px solid #191919;}
.content .es-LborderDashedS { border-left:1px dashed #191919;}
.content .es-LborderDashedM { border-left:3px dashed #191919;}
.content .es-LborderDottedS { border-left:1px dotted #191919;}
.content .es-LborderDottedM { border-left:3px dotted #191919;}
/*シャドウ系*/
.content .es-shadowL { box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.10);}
.content .es-shadow { box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);}
.content .es-shadowD { box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.50);}
.content .es-shadowInL { box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.10)}
.content .es-shadowIn { box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.25)}
.content .es-shadowInD { box-shadow: inset 0px 0px 15px 1px rgba(0,0,0,0.50)}
.content .es-TshadowL { text-shadow: 0px 1px 3px rgba(0,0,0,0.10);}
.content .es-Tshadow { text-shadow: 0px 1px 3px rgba(0,0,0,0.25);}
.content .es-TshadowD { text-shadow: 0px 1px 3px rgba(0,0,0,0.50);}
/*角丸系*/
.content .es-radius { border-radius: 5px;}
.content .es-radiusL { border-radius: 10px;}
.content .es-round { border-radius: 50px;}
今のところ、これらのクラスを利用しています。
また、他に必要なクラスがでてきたら追記したいと思います。
