THE THOR の見出し・ボックス・ボタン等、記事部分で使用するパーツは、親テーマの CSS で指定されているスタイルを組み合わせて適用するようになっています。
ビジュアルエディタも少し触ってみたのですが、思い通りのデザインにするのがなかなか難しいと感じたので、各パーツスタイルの仕組みとカスタマイズ方法をまとめてみようと思います。
デザインのサンプルはそれぞれ別記事にまとめてあります。
THE THOR の パーツデザインの仕組み
各パーツのHTML
例えばビジュアルエディタからこんなボタンを挿入したとすると……
『カスログ for the thor』TOP へテキストエディタから見た時にはこんな風にクラス名が指定されています。
html
<a class="ep-btn bgc-Vorange es-size100 ftc-white es-TpaddingS es-BpaddingS es-BTarrow es-bold" href="https://customize.hinomotoo.com/thor/">『カスログ for the thor』TOP へ</a>各要素で指定されているスタイル
これらの各部分が何を指定しているか順番に説明すると
- ep-btn：ボタンの基本スタイル
- bgc-Vorange：背景色をオレンジに
- es-size100：ボタンの幅を100％に
- ftc-white：文字色を白に
- es-TpaddingS：文字上の余白小（1.5rem）
- es-Bpadding：文字下の余白小（1.5rem）
- es-BTarrow：右端に＞アイコンを挿入
- es-bold：文字部分を太字に
こんな感じで、文字色や背景色、ボタンの幅などがそれぞれバラバラに指定されているわけです。
各スタイルのカスタマイズ方法
ビジュアル・テキストの各エディタから適用できるスタイルは、カスタマイザーの「パーツスタイル設定」からカスタマイズすることができます。
カスタマイザーからできること
カスタマイザーの「パーツスタイル設定」から各項目へ進むと、各パーツにつき10種類のスタイル（と各エディタに表示するタイトル）を設定できます。
ここに表示されているタイトルとスタイルをカスタマイズすれば、各エディタから選択できる項目も変更されることになります。
カスタマイザーの「スタイル」の仕組み
カスタマイザーの「スタイル」部分を見てみると、先ほどパーツデザインの仕組みの項で説明したクラス名がズラッと並んでいるのが分かるでしょうか。
これと同じように適用したいデザインを組み合わせて、それらを指定しているクラス要素のクラス名を記述していきます。
設定できるデザイン一覧
設定できる項目とクラス名を全て書き出してみます。
サイズ
- es-size10：幅10％
- es-size25：幅25％
- es-size40：幅40％
- es-size50：幅50％
- es-size60：幅60％
- es-size75：幅75％
- es-size90：幅90％
- es-size100：幅100％
内側の余白
1rem は、基準となる文字の1文字分の大きさです。THE THOR 記事本文の文字サイズは iPad 以上の端末から見た時で 1.6rem、それ以下の場合は 1.4rem なので、余白小で大体1文字分、余白大で3文字分の余白が空くことになります。
- es-padding0：余白なし
- es-TpaddingSS：上の余白極小（1rem）
- es-TpaddingS：上の余白小（1.5rem）
- es-TpaddingM：上の余白中（3rem）
- es-TpaddingL：上の余白大（4.5rem）
- es-RpaddingSS：右の余白極小（1rem）
- es-RpaddingS：右の余白小（1.5rem）
- es-RpaddingM：右の余白中（3rem）
- es-RpaddingL：右の余白大（4.5rem）
- es-BpaddingSS：下の余白極小（1rem）
- es-BpaddingS：下の余白小（1.5rem）
- es-BpaddingM：下の余白中（3rem）
- es-BpaddingL：下の余白大（4.5rem）
- es-LpaddingSS：左の余白極小（1rem）
- es-LpaddingS：左の余白小（1.5rem）
- es-LpaddingM：左の余白中（3rem）
- es-LpaddingL：左の余白大（4.5rem）
外側の余白
- es-margin0：余白なし
- es-TmarginSS：上の余白極小（1rem）
- es-TmarginS：上の余白小（1.5rem）
- es-TmarginM：上の余白中（3rem）
- es-TmarginL：上の余白大（4.5rem）
- es-RmarginSS：右の余白極小（1rem）
- es-RmarginS：右の余白小（1.5rem）
- es-RmarginM：右の余白中（3rem）
- es-RmarginL：右の余白大（4.5rem）
- es-BmarginSS：下の余白極小（1rem）
- es-BmarginS：下の余白小（1.5rem）
- es-BmarginM：下の余白中（3rem）
- es-BmarginL：下の余白大（4.5rem）
- es-LmarginSS：左の余白極小（1rem）
- es-LmarginS：左の余白小（1.5rem）
- es-LmarginM：左の余白中（3rem）
- es-LmarginL：左の余白大（4.5rem）
ボーダー（枠線）
- 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：左側に太い点線
文字関連
- es-Fsmall：文字サイズ小（1.2rem）
- es-Fbig：文字サイズ中（1.6rem）
- es-FbigL：文字サイズ大（2rem）
- es-bold：太字
- es-italic：イタリック体
- es-strike：打消し線
- es-under：下線
- es-left：左寄せ
- es-center：中央寄せ
- es-right：右寄せ
シャドウ
- es-shadowL：要素外側に薄い影
- es-shadow：要素外側に影
- es-shadowD：要素外側に濃い影
- es-shadowInL：要素内側に薄い影
- es-shadowIn：要素内側に影
- es-shadowInD：要素内側に濃い影
- es-TshadowL：文字に薄い影
- es-Tshadow：文字に影
- es-TshadowD：文字に濃い影
角丸
- es-radius：角を丸める（5px）
- es-radiusL：角を丸める（10px）
- es-round：角を丸める（50px）
背景
- es-grada1：グラデーション1
- es-grada2：グラデーション2
- es-grid：方眼
ラベル専用
- es-Lcorner：左上コーナー
- es-LroundL：左丸
- es-LroundR：右丸
- es-Licon：アイコン（余白）
- es-LiconBorder：アイコン（ボーダー）
- es-LiconBox：アイコン（ボックス）
- es-LiconCircle：アイコン（サークル）
ボタン専用
- es-BT3d：3Dボタン
- es-BTshadow：影付きボタン
- es-BTrich：内側影付きボタン
- es-BTarrow：右側に＞アイコン
- es-BTicon：アイコン
- es-BTiconBorderアイコン（ボーダー）
- es-BTiconBox：アイコン（ボックス）
- es-BTiconCircleアイコン（サークル）
ボックス専用
- 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：アイコン（サークル）
設定できる色
各パーツに設定できる色は、下記の12色×7トーンの84色とモノトーン7色の計91色。ここにはサンプルとして、ビビットトーンの12色を載せています。
※クラス名の全パターンはこちらのページにまとめてあります。
カスタマイザーのパーツ設定やテキストエディタからの投稿時用に、各パーツに設定できる色を一覧にしてみました。12色×7トーン＋モノトーン7色の計91色を、文字色・背景色・ボーダーの色、それぞれ別に指定できます。ボタンのサンプル[…]
文字色
- ftc-Vyellow
- ftc-Vorange
- ftc-Vred
- ftc-Vmagenta
- ftc-Vpink
- ftc-Vpurple
- ftc-Vnavy
- ftc-Vblue
- ftc-Vsky
- ftc-Vturquoise
- ftc-Vgreen
- ftc-Vlime
背景色
- bgc-Vyellow
- bgc-Vorange
- bgc-Vred
- bgc-Vmagenta
- bgc-Vpink
- bgc-Vpurple
- bgc-Vnavy
- bgc-Vblue
- bgc-Vsky
- bgc-Vturquoise
- bgc-Vgreen
- bgc-Vlime
ボーダー色
- brc-Vyellow
- brc-Vorange
- brc-Vred
- brc-Vmagenta
- brc-Vpink
- brc-Vpurple
- brc-Vnavy
- brc-Vblue
- brc-Vsky
- brc-Vturquoise
- brc-Vgreen
- brc-Vlime
