THE THOR にはとてもたくさんの標準カスタマイズ機能、用意されたパーツがあります。そのままで使うのはもったいない。ひと手間かけて自分好みにカスタマイズしましょう！
この記事では THE THOR に標準で搭載されているカスタマイズの『クラス』を利用して用意されているパーツ類をより良く自分好みにする方法と頻繁に利用する『クラス』を紹介します。
THE THOR クラス (class)の基本操作
クラスについての説明は省略します。「こーしたら、こうなる」で覚えてください。
クラス の調べ方
まずクラス名を調べてみましょう。
THE THOR のクラス名を調べるには実際に作ってみるのが一番簡単です。ビジュアルエディタでサンプルを作り、テキストエディタでコードを調べます。
ボックスのクラスを調べる場合
スタイルのデフォルトパーツでボックスを作ります。文字は適当に打ってください。
スタイル → デフォルトパーツ → ボックス
↑これができました。
テキストエディタにしてどんなコードが生成されているか見てみましょう。
<div class=”ep-box”>サンプルのボックス</div>
↑これが出来ているはずです。
この中の ep-boxというのがクラスです。
ep-boxというクラスをつけるとボックスができることがわかりました。クラスは class=”○○○”で指定します。同じように背景色や文字色、囲み罫などを作ることが出来ます。
また適用したい要素に<div>〜</div>や<span>〜</span>など何もない状態の場合は自分で<div>や<span>などを付けてください。よくわからない場合は丸暗記で <div class=”○○○”>〜</div>の形で覚えてしまいましょう。
- クラスは複数使うことが出来る
- クラスとクラスのあいだは半角あける
- 対象物の選択が難しいのでテキストモードで作業する
クラスを調べて適用したい部分に記載すれば装飾が追加されます。スタイルで単純に指定するだけでなくクラスを調べテキストモードで直接編集することでより細かいデザインを作ることができます。
クラスを使いこなすことができれば THE THOR の世界が大きく広がります。
THE THOR の良く利用する クラス (class)
装飾で頻繁に使うクラス名を紹介します。
その他のクラスは実際にサンプルを作成してテキストモードで調べることが出来るので必要に応じて調べてください。
ボーダー(枠線)のクラス
ボーダー(枠線)のクラス名には最初に es-borderが付きます。
その後に線種を表す Solid(実線) Dashed(破線) Dotted(点線)
最後に S(細) M(中)で太さを指定します。
※サンプルではボックスに色を付けてボーダーを指定しています。
上記では全体を囲う枠線でしたが、borderの前にに Bを付けると下(Bottom)、Lを付けると左(LEFT)のみに線が表示されます。
さらに応用
THE THORの操作では「2種以上の項目を選んだ場合、両方有効のまま選択肢の下にあるものほど優先される」という特徴があります。これを利用すると複雑なデザインを作ることが可能です。
例、全体は実線(細)で左側だけ破線(中)
es-borderSolidSと es-LborderDashedMの両方を追加。
※上記2点の操作はビジュアルエディタでも可能です。
カラー(色)の クラス
色の指定ももちろんできます。色コードについては別記事を参照してください。
※指定箇所がうまく選択できないときはテキストエディタを使用します。
ボーダー色のクラス(border color)
brc-色の名前
背景色のクラス(background color)
bgc-色の名前
文字色のクラス(font color)
ftc-色の名前
マージン(外側余白)の クラス
マージンのクラスは es-marginが基本となり、最後に余白の大きさ(または無し)、marginの前に設定する場所(上下左右)、T(top)、B(bottom)、L(left)、R(right)が付きます。
余白の大きさはSS(極小)、S(小)、M(中)、L(大)の4種類。0(ゼロ)にすると全ての余白なし。
- es-margin0(外側余白なし)
- es-TmarginSS(外側上に極小の余白)
- es-RmarginS(外側右に小の余白)
- es-BmarginM(外側下に中の余白)
- es-LmarginL(外側左に大の余白)
応用
THE THORの操作では「2種以上の項目を選んだ場合、両方有効のまま選択肢の下にあるものほど優先される」という特徴があります。marginはデフォルトで設定されていることが多くあります。margin0を適用してから好みの余白を追加することでデフォルトで設定された余白をリセットし、好みの余白を付けることができます。
※指定箇所がうまく選択できないときはテキストエディタを使用します。
パディング(内側余白)の クラス
パディングのクラスは es-paddingが基本となり、最後に余白の大きさ(または無し)、paddingの前に設定する場所(上下左右)、T(top)、B(bottom)、L(left)、R(right)が付きます。
余白の大きさはSS(極小)、S(小)、M(中)、L(大)の4種類。0(ゼロ)にすると全ての余白なし。
- es-padding0（内側余白なし）
- es-TpaddingSS（内側上に極小の余白）
- es-RpaddingS（内側右に小の余白）
- es-BpaddingM（内側下に中の余白）
- es-LpaddingL（内側左に大の余白）
応用
THE THORの操作では「2種以上の項目を選んだ場合、両方有効のまま選択肢の下にあるものほど優先される」という特徴があります。デフォルトで設定された余白がある場合は、padding0を適用してから好みの余白を適用しましょう。
※指定箇所がうまく選択できないときはテキストエディタを使用します。
THE THOR クラス (class)の活用方法
活用サンプル「連続したアコーディオンボックス」
たとえば以前、THE THOR のフォーラムで質問のあった「連続したアコーディオンボックスの隙間を無くしたい」といった場合。es-margin0というクラスを追加すると隙間が無くなります。
アコーディオンボックスはプリセットパーツです。プリセットパーツも自由にカスタマイズができます。
- アコーディオンボックスA
- AとBの間に隙間ができます。
- アコーディオンボックスB
- でも隙間を無くしたいときもありますよね？
es-margin0を追加したアコーディオンボックス
- アコーディオンボックスA’
- A’のアコーディオンボックスはそのまま
- アコーディオンボックスB’
- B’のアコーディオンボックスに margin0のクラスを追加します。
これで隙間なくアコーディオンボックスを並べることができましたね。
活用サンプル「口コミボックスを微調整」
今度はプリセットパーツの「口コミボックス」をカスタマイズしてみましょう。
今回は背景色ありのパターン「背景(ブルー)」をもとに変更していきます。
↓これが標準の「口コミボックス背景(ブルー)」
東京都：山田 花子(20歳・女性)
このエリアに口コミ本文を記入します。
東京都：山田 太郎(20歳・男性)
このエリアに口コミ本文を記入します。
↓クラスを追加して微調整した「口コミボックス背景(ブルー)」
山田 花子(東京都・20歳・女性)
このエリアに口コミ本文を記入します。
山田 太郎(東京都・20歳・男性)
このエリアに口コミ本文を記入します。
※クラスの追加以外にスタイルなどを適用しています。使用しているのはTHE THORの標準機能だけ。プリセットパーツも自由にカスタマイズが可能です。
THE THOR のプリセットパーツ「 レビューボックス 」の使い方。 レビューボックスはシンプルなまとめを作ることが出来る便利パーツです。ここでは基本的な使い方とちょっとしたカスタマイズを紹介したいと思います。ここでのカスタマイズは[…]
あとがき
この記事の内容は「CSSを使うほどではないけど少し装飾したい」という願いを叶えます。
まぁ厳密にはCSSを使っているわけですが…ややこしいですね。
THE THOR は装飾が多く用意されているのでそれらを活用することでイチからコードを作らなくてもデザインにこだわることが出来ます。組み合わせは無限にあると言っても良いでしょう。ぜひ色々とチャレンジしてみてください！そして良いものが出来上がったら教えて下さい！
