ここに書かれているスタイルが親テーマに搭載しているスタイルとなります。
デザインの方向性によって多少変更したいことが出てくると思いますので、このページにて確認し、変更したいところはchildの中でスタイルを調整するという手順になります。(不具合を発見した場合以外、基本親ページはいじらない。)
私がよく使う(使いそう)系
■section.space
ブロックをグルーピングし、右のプロパティでHTML 要素をsectionにして追加CSSクラスにspaceを付与することでブロックごとの間隔を入れることができるようにしました。
■pageLink
ヘッダー追従型は、そのままアンカーに飛ばすと、ヘッダーの高さ分が計算されずヘッダーがアンカーに被ってしまうのでそれを対策するためにつけるクラス。
■表示・非表示sp-display、sp-none系
使い分けることで、ブレイクポイントでの表示、非表示が可能になる。例えば幅が広い間は改行して、狭くなると改行をしたくない、またその逆など、brにクラスをつけることで改行したりしなかったりも可能に。
※PC時は表示、どこかのサイズで非表示、表示などを繰り返す場合pc-dispayをつけること。その他ややこしくなる場合(sp-display、sp-noneシリーズ複数使い)は、pc-dispayをつけておいて繰り返せば良い。
sp-display-(ブレイクポイント)で指定したブレイクポイントまで非表示できる。数値のサイズになったら表示するイメージ
- ■sp-display-1199
- ■sp-display-969
- ■sp-display-800
- ■sp-display-769
- ■sp-display-660
- ■sp-display-480
- ■sp-display-370
sp-none-(ブレイクポイント)で指定したブレイクポイントで非表示できる。数値のサイズになったら非表示にするイメージ
- ■sp-none-1199
- ■sp-none-969
- ■sp-none-800
- ■sp-none-769
- ■sp-none-660
- ■sp-none-480
- ■sp-none-370
■flex系
何種類かflexのクラスを設定してます。組み合わせて使えば横並びのレイアウトが可能です。
現状、wpのブロックエディタ仕様ではクラスを付与できないinnerが自動作成されてしまうので、ブロックエディタのグループの自動でできるinnerにcssを付与するようにするかどうか、、、検討。wpのカラムでもいいのですが、カラムだと、2カラムまでは使えるかなと思うのですが、3カラムになると標準では「モバイルでは縦に並べる(781px以下)」しかなく、早い目に落としたいところもあるかと思うのでデバイス調整が微妙なところです。
- ■flex…普通のdisplay:flexとflex-wrap: wrap;
- ■flex-sb…上記flexの設定+justify-content: space-between;
- ■flex-sa…上記flexの設定+justify-content: space-around;
- ■flex50…width50%→2カラム
- ■flex33…width33.333%→3カラム
- ■flex25…width25%→4カラム
レイアウト
■flex-menu
見出し系
h2に使えそうな見出し
■ttl-vertical-bordertop
ttl-vertical-bordertop
■ttl-kakko-hook
ttl-kakko-hook
■ttl-kakko-bracket
ttl-kakko-bracket
■ttl-sand-border
ttl-sand-border
■ttl-left-border
ttl-left-border
h3に使えそうな見出し
ttl-stripe-border
ttl-topbtm-border
ttl-left-border-s
ttl-left-circle
枠線、背景装飾
■full
背景をinnner設定を超えてブラウザの横幅（画面幅）いっぱいにする
■frame-bg-カラー名
frame-bg-(カラー名)である程度の空間を作って背景に色を入れる。
現在frame-bg-gray、frame-bg-white、frame-bg-mainの3種類。
-
■frame-bg-gray
ある程度の空間(padding)があるグレーの背景
-
■frame-bg-main
ある程度の空間(padding)があるメインカラーの背景
-
■frame-bg-white
ある程度の空間(padding)がある白の背景。濃い色の背景を持って来たときくらいしか使用しないかも。。
■flex-bg-カラー名
flex-bg-(カラー名)である程度の空間を作って背景に色を入れる。flexで横並びする想定なのでframe-bg系より空間(padding)狭め。
現在flex-bg-gray、flex-bg-white、flex-bg-mainの3種類。
-
■flex-bg-gray
ある程度の空間(padding)があるグレーの背景
-
■flex-bg-main
ある程度の空間(padding)があるメインカラーの背景
-
■flex-bg-white
ある程度の空間(padding)がある白の背景。濃い色の背景を持って来たときくらいしか使用しないかも。。
■frame-border-カラー名
frame-border-(カラー名)である程度の空間のあるボーダー枠を作る。
現在frame-border-gray、frame-border-white、frame-border-mainの3種類。
-
■frame-border-gray
ある程度の空間(padding)があるグレーの枠
-
■frame-border-main
ある程度の空間(padding)があるメインカラーの枠
-
■frame-border-white
ある程度の空間(padding)がある白の枠。濃い色の背景を持って来たときくらいしか使用しないかも。。
■flex-border-カラー名
flex-border-(カラー名)でflex(横並び想定)させたコンテンツに対してある程度の空間のあるボーダー枠を作る。frame-border系よりも横並びを想定しているので空間(padding)狭め。
現在flex-border-gray、flex-border-white、flex-border-mainの3種類。
-
■flex-border-gray
ある程度の空間(padding)があるグレーの枠
-
■flex-border-main
ある程度の空間(padding)があるメインカラーの枠
-
■flex-border-white
ある程度の空間(padding)がある白の枠。濃い色の背景を持って来たときくらいしか使用しないかも。。
文字設定・装飾
文字設定として文字サイズ、テキスト揃え(text-align)、デバイスによってテキスト揃えを変更、テキストの装飾を何個か設定してます。
■text-cl系
text-cl-(ブレイクポイント)でそのブレイクポイントで左揃えになるように設定。
幅が広い時はセンター揃えの方がいい感じだけど、幅が狭まるとセンター揃えでは改行されて気持ち悪い時に、改行される直前に左揃えにしてしまうスタイル。
- text-cl-1199
- text-cl-969
- text-cl-800
- text-cl-769
- text-cl-660
- text-cl-480
- text-cl-370
■adjust
text-indent: -0.5em;設定。かぎかっこなど、文章の先頭になるとき、他と揃ってないように見えて気持ち悪い時に使用。
■text-c、text-r
text-c…text-align: center
text-r…text-align: right;
■point-text
頭にこめ印なので基本pタグにクラスを指定して利用することを想定。文字が長くなって数行になってもこめ印の下に文章が来ない設定。頭にこめ印なので基本pタグにクラスを指定して利用することを想定。文字が長くなって数行になってもこめ印の下に文章が来ない設定。
■line-marker-y
文字入れ替え文章の中にマーカーペンでアンダーラインを引いたような表現をしたい時に使います。
■fukidashi
吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です吹き出し系です
リストメニュー
- リスト01
- リスト02
- リスト02
- リスト02
リンクリスト
ボタン
htmlで使用するボタン
■btn-arrow-anime01
■btn-arrow-anime02
基本右に置いて利用するのでtext-align: right;が入ってます。基本はテキストカラー(黒系)の矢印となります。
■btn-border-anime01
■btn-round
フローリスト
■faq-block
質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01質問01
質問01の答え。段落1行だとしても必ずグループ化して、クラス名(faq-block-a-box)をつけてください。質問01の答え。段落1行だとしても必ずグループ化して、クラス名(faq-block-a-box)をつけてください。質問01の答え。段落1行だとしても必ずグループ化して、クラス名(faq-block-a-box)をつけてください。
