プラン
資料請求
フェア予約 ベストレート
保証

ドレスショップリニューアル！
特典付きフェア開催

フェアを詳しく見る

構築注意事項

  • 画像の書き出しは「130%」で設定してください。
  • marginは基本「margin-top」を使って間隔を開けてください。
    ※「margin-bottom」と「margin-top」が混在したり、paddingと重複してしまって無駄なスタイルをあてないようにする。
  • marginやpaddingは「rem」や「em」で指定してください。
  • 共通のCSSはTOPと下層で分けています。（common_top.cssとcommon.css）
    もし全ページで使用している共通パーツの修正があるなら「_template.scss」を修正してください。
    下層のみで共通化したいスタイルがあれば「_lower.scss」に追加（修正）してください。

WPの構築方法

  • 【事前準備】構築前にconfigや既存ページをざっと見ておいてください。
    ローカルで構築時にwordpressのエラーが表示されるときはMAMPのエラーを非表示にしてみてください。
  • WPはローカルにファイルを作成しただけではページが確認できません。固定ページを追加するか、CMSならカスタム投稿を作成（※これはシステム）する必要があります。
  • 固定ページの作成手順（一覧、詳細などCMSページ以外すべて）

    ＜WP管理画面の操作＞
    管理画面の「固定ページ」より
    ①「固定ページ」＞「新規追加」でページを追加する。
    タイトル（FVにあるタイトルの日本語部分に反映されます）を追加、公開をクリック→スラッグ名（URLのディレクトリ名）を変更する。
    ※一旦ページ表示させるための最低限の設定です。スラッグ名が重複していると表示されないので他に同じスラッグ名のページがないか注意すること。

    ＜ローカルデータの操作＞
    ①page-copy.phpを複製し、「copy」の部分をスラッグ名（ディレクトリ名）と同じになるようにリネーム。
    ②タイトルなど必要項目を変更・追加して構築する。画像読み込みの記述を間違わないように。
    ※$pageを$abi_pageに変更しているので注意。

    ※ファイル名の付け方
    「copy」ディレクトリなら：page-copy.php
    画像の場所は「files/images/copy/」に格納

    ※画像の指定方法
    configで定義されている「LOCATION_PAGE_IMG」で「files/images/$abi_page/」の画像を表示できます。
    詳細ページなどは上部に記載している「$abi_image_path」の画像パスを変更してそちらを使用してください。
    commonに入っている画像などは「LOCATION_FILE」で大丈夫です。(※cssやjsの場所は同じです。)

  • 投稿ページの作成手順（フェア、プランのようなCMSページ）

    プラン、フェア、レポート、新着は既にWPに入っているためとりいそぎ管理画面での操作は不要です。（谷さんに確認してください）

    ＜ローカルデータの操作：一覧ページの場合＞
    ①page-copy.phpを複製し、リネーム、タイトルなど必要項目を変更・追加して構築する。

    ※ファイル名の付け方
    「bridalfair」ディレクトリなら：archive-bridalfair.php
    投稿/カスタム投稿一覧の場合はarchive-〇〇.phpになるので注意

    ＜ローカルデータの操作：詳細ページの場合＞
    ①page-copy.phpを複製しリネーム、タイトルなど必要項目を変更・追加して構築する。

    ※ファイル名の付け方
    「bridalfair」の詳細なら：single-bridalfair.php
    投稿/カスタム投稿の詳細ページはsingle-〇〇.phpになるので注意
    画像の指定など他は固定ページと同じように構築。
    （single.phpがで各スラッグごとに切り替えています）

幅の指定方法

mixinに用意されている幅であれば、mixinを使用してください。
TABやSPで変えたい場合は@mixin cBwを使用してください（setting参照）

  • 1440pxのとき横幅が1200px「@include bw」
  • 1440pxのとき横幅が1000px「@include bw_s」
  • 1440pxのとき横幅が1300px「@include bw_l」

テキスト

英語

Futura PT (Book)

カラー

  • テキストカラー

    #222
    $baseColor

  • テキスト

    #555
    $c_text1

  • メニュー文字

    #1c2a42
    $c_text2

  • コンバージョン

    #837753
    $c_cv

  • ホバー

    #514521
    $c_hover

  • メイン見出し

    #495568
    $c_st_main

  • 見出しサブ

    #837753
    $c_st_sub1

  • 見出しサブ

    #bdae81
    $c_st_sub2

  • 見出しサブ

    #e2c879
    $c_st_sub3

  • ライン

    #ebe9e2
    $c_line1

  • ライン

    #d8d2c2
    $c_line2

  • アイコン背景

    #5e6f84
    $c_btn

  • 日付の文字

    #6d7cab
    $c_day

  • テクスチャ背景

    @mixin pattern

  • カテゴリ背景

    #b3bac6
    $c_bg_cate

  • メイン背景

    #f5f5f5
    $c_bg

  • サブ背景

    #e8e9ec
    $c_bg_sub

セット

SAMPLESAMPLE50

説明文が入ります。説明文が入ります。説明文が入ります。
説明文が入ります。説明文が入ります。

見出し

※Hタグは必ず適切なものに変更して使ってください！

H3

H4

H4

H5

H5見出しH5見出しH5見出しH5見出し14

H5見出しH5見出しH5見出しH5見出し14

ボタン

ページ内リンク

タブメニュー

タブの中身1
タブの中身2
タブの中身3
タブの中身4
タブの中身5



タブの中身1
タブの中身2

テーブル

項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。詳細が入ります。詳細が入ります。詳細が入ります。
項目 詳細が入ります。
項目 詳細が入ります。
項目 詳細が入ります。
項目 詳細が入ります。
項目 詳細が入ります。
項目 詳細が入ります。

デザインパーツ

人気フェア

※下記のように複数設置可能


人気フェア カテゴリ名 カテゴリ名 カテゴリ名 カテゴリ名

アコーディオン

◆ご案内◆
この度、キャメロットヒルズ公式LINEアカウントを開設いたしました♪
LINE限定ショップカードがございますので、是非ともだち登録をお願い致します☆
キャメロットヒルズ公式LINE ID:@camelothillsスマートフォンの方はこちらのURLより、ともだち追加ページにアクセスできます。
※パソコンでご覧の方にはともだち追加ページのQRコードがご覧頂けます。
https://line.me/R/ti/p/iGwxSZY-9o

ライン

※「@mixin line」を使用してください。sample.scss参考(上下あり)

スライダー







SAMPLE
TITLE

スライド、テキストなど
横幅は各CSSで指定してください
（sample.scssにあるのでコピペして数値変更）

SAMPLE
TITLE

スライド、テキストなど
横幅は各CSSで指定してください
（sample.scssにあるのでコピペして数値変更）

アイコン

追加したい場合はsvg.phpに記述してください。色はcssのfillやstrokeで変更できます。