構築注意事項
- 画像の書き出しは「1.3倍」で設定してください。(※1.3～1.5倍でも問題はないです)
- 画像の格納場所は全て「wp-content/themes/takshoun/files/images」内に格納してください。
- 画像はすべてsvg以外は基本的にwebpに変換を行ってください。変換サイトはこちら
- marginは基本「margin-top」を使って間隔を開けてください。
※「margin-bottom」と「margin-top」が混在したり、paddingと重複してしまって無駄なスタイルをあてないようにする。 - marginやpaddingは「rem」や「em」で指定してください。
- 下層ページ構築の際は必ず「meta.php」にタイトル追加してください
- 今のところ「ionicons」フォントは導入していません。
アイコンにあるものはSVGから呼び出すか、画像として読み込ませて下さい。(反対矢印にしたい場合などは、反転にしたSVGを用意するのではなく、CSSで反転して使用すること)
幅の指定方法
mixinに用意されている幅であれば、mixinを使用してください。
- 1440pxのとき横幅が990px「@include bw_s;」
- 1440pxのとき横幅が1000px「@include bw;」
- 1440pxのとき横幅が1100px「@include bw_m;」
- 1440pxのとき横幅が1260px「@include bw_l;」
@include bw_s; @include bw; @include bw_m; @include bw_l;TABやSPで変えたい場合は@mixin cBwを使用してください（詳しくはsetting参照）数字の箇所をそれぞれ指定してください。
@include cBw(2,2,2);
フォント
日本語/英語 ※基本こちら
Noto Sans JP regular 13px
@include font_jp; @include font_en;
カラー
-
文字カラー
#000000
--color-text-1 -
文字カラー
#111111
--color-text-2 -
文字カラー
#444444
--color-text-3 -
ロゴカラー
#1F286F
--color-main-1 -
ラインカラー
#CCCCCC
--color-line-1 -
サブカラー
#0065B1
--color-sub-1 -
サブカラー
#DA1414
--color-sub-2 -
サブカラー
--sub-gradient-1
-
背景カラー
#EFF2F7
--color-bg-1
見出し
※見出しの場合は、Hタグは必ず適切なものに変更して使ってください
※見出しは基本的にクラスにalign_cを付けると中央寄せになります!
私たちのこと
私たちのこと
私たちのこと
私たちのこと
私たちのこと
私たちのこと
日本語見出し日本語見出し
日本語見出し日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
電話でお問い合わせ
電話でお問い合わせ
電話でお問い合わせ
電話でお問い合わせ
業務部門
業務部門
業務部門
業務部門
電話でお問い合わせ
電話でお問い合わせ
電話でお問い合わせ
電話でお問い合わせ
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し枠あり日本語見出し
h5の見出しh5の見出し
h5の見出しh5の見出し
h5の見出しh5の見出し
h5の見出しh5の見出し
h5の見出しh5の見出し
h5の見出しh5の見出し
ボタン
テキストリンク
テーブル
captionの設定をお願い致します。
見出しセルthには、scope属性を付けてください。
各行（横へ）の見出しセルはrow / 各列（縦へ）の見出しセルはcol です。
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
|---|---|
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
|---|---|
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
|---|---|
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
|---|---|
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
| SPレスポン 項目名 | 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。 |
アコーディオン
「acc_target」クラスにpaddingを当てるとアニメーションがカタつく場合があるので、その中の要素にスタイルを当ててください。
PC~SP全てアコーディオンの中身
「acc_target」クラスにpaddingを当てるとアニメーションがカタつく場合があるので、その中の要素にスタイルを当ててください。
PC~SP全てアコーディオンの中身
TAB~SPアコーディオンの中身
SPアコーディオンの中身
ページ内リンク
lay2~5まで用意してありますが、デザインに合わせて個別に調整してください。
タブメニュー
liの幅やmarginの有無はsample.scssを参考に個別に指定してください。
「tmp_tab_btn」 に scroll クラス付与でPC・TABではみ出す場合横スクロールします
タブの中身1タブの中身2タブの中身3タブの中身4タブの中身5
基本のスライダー
sample/index.php から上記htmlはコピーしてください
sample/index.php から上記htmlはコピーしてください