サンプルページ【公式】キャメロットヒルズ | 埼玉県さいたま市の結婚式場

プラン

資料請求

フェア予約ベストレート
保証

構築注意事項

画像の書き出しは「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」

テキスト

日本語

Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。Zen Kaku Gothic New 13ｐｘ行間は26px。

注釈

Zen Kaku Gothic New 12ｐｘ行間は22px。Zen Kaku Gothic New 12ｐｘ行間は22px。Zen Kaku Gothic New 12ｐｘ行間は22px。Zen Kaku Gothic New 12ｐｘ行間は22px。Zen Kaku Gothic New 12ｐｘ行間は22px。

lead

Zen Old Mincho 16px 行間は28px。Zen Old Mincho 16px 行間は28px。Zen Old Mincho 16px 行間は28px。Zen Old Mincho 16px 行間は28px。Zen Old Mincho 16px 行間は28px。

英語

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

日本語見出しが入ります16px
美食を愉しむパーティを

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

見出し

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

H3

日本語見出しはあってもなくても

日本語見出し

H4

h3区切りが分かる見出し（日本語）

日本語見出しが入ります。21

H4

日本語見出し

日本語見出しが入ります。16

h4区切りが分かる見出し（日本語）

H5

条件からフェアを探す14

ｈ5長めの見出しｈ5長めの見出し14
ｈ5長めの見出しｈ5長めの見出し14

ペンブルック(本館)

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

ボタン

汎用ベーシックボタン

Goofle Map

外部リンク

PDFリンク

戻るボタン

コンバージョン

日本語テキストリンク

タブメニュー

タブの中身1

タブの中身2

タブの中身3

タブの中身4

タブの中身5

タブの中身1

タブの中身2

テーブル

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

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

デザインパーツ

人気フェア

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

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

日本語あしらい

アコーディオン

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