ログアウト

CMSLPテンプレートの説明（作業含む）

LP投稿日:

仕様について

【こちらのスライド】をご確認ください。

cssについて

style.css
要素ごとに下記の順番でcss記載しています。
PC・スマホ共通→PC時のみ（641px以上の時）→スマホ（640px以下の時）

PCメディアクエリ

and (min-width: 641px)の箇所

スマホメディアクエリ

and (max-width: 640px)の箇所

フォントについて

全3種

フォント名 Webフォントサービス名
①角のあるフォント
Noto Sans JP		 Googleフォント
②丸みのあるフォント
FOT-筑紫A丸ゴシック Std B		 Adobe Fonts
プロジェクト名：LPテンプレート_丸みのあるフォント
③細めのフォント
ヒラギノ明朝 ProN W3		 Adobe Fonts
プロジェクト名：LPテンプレート_細めのフォント

js（またはcss）読み込み場所

選んだフォントのjs（またはcss）のコメントアウトを解除し、他のフォントのjs（またはcss）は必ず削除してください。

角のあるフォント

header.php

丸みのあるフォント

footer.php

細めのフォント

footer.php

css

style.css

選んだフォントのcssのコメントアウトを解除し、他のフォントのcssと不要になったコメントは必ず削除してください。
--font-weightも選んだフォントによって変える必要があります。

「不要になったコメント」とは、
（例）「角のあるフォント」を選んだ場合、他のフォントも削除するので「角のあるフォント」のコメントも不要になります

favicon（ファビコン）について

header.php

LPのfaviconは本サイトと同じものを使用します。
本サイトにfaviconフォルダがあるかご確認ください。
コードを本サイトに合わせてください。

本サイトがシステム系プラン（シスプレ等）の場合

本サイトと同じようにテーマにfaviconフォルダをアップしてください。

本サイトがオリジナル（静的）の場合

hrefは繋がるよう各自で調整してください。
分からない場合は先輩にお尋ねください。

例）
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon/favicon-32x32.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

本サイトへのリンクボタン

本サイトがオリジナル（静的）の場合

hrefは繋がるよう各自で調整してください。
例）<a href="/">クリニック公式サイトを開く</a>

wordpress画面について補足

メインコンテンツ

固定ページ＞インビザライン専門サイト

固定ページタイトル

PC時に表示されるヘッダーロゴ下に固定ページタイトルが入ります。

メインビジュアル

画像のみ選択できるようにしています。
他は「html」欄にhtmlをベタ貼りし、cssを編集してください。テンプレに（例）として入っていたhtmlのcssは不要でしたら削除してください。
※「html」欄は編集権限のみのユーザーログイン時は非表示にしています。

コンテンツ

レイアウト選択ができます。順番並び替えも可能です。

フッター

基本情報＞フッター設定

ロゴ

フッターのロゴを非表示にしたい場合は下記チェックを外してください。
編集箇所：フッターロゴ非表示

マップ下

フリーエリアになっております。念のためフリーエリアにしているだけで、基本はテンプレのようにアクセス詳細テキスト（ul.cmn_list li）を入れます。
編集箇所：フッターフリーエリア

プラグインの説明

基本的に全て必須です。消さないようにしてください。

AddQuicktag：ベーシックなHTMLコードをエディタに標準装備する
AdminMenuEditor：メニューの並べ替えを行う
Advanced Custom Fields PRO：カスタムフィールド作成（※バージョンアップの必要なし）
Advanced Editor Tools (旧名 TinyMCE Advanced)：ビジュアルエディタをWordっぽく変更する
Akismet Anti-Spam：スパムブロック
All-in-One WP Migration：サイト全体のバックアップ作成・復元する
Really Simple SSL：サイト全体をSSLにしリダイレクト設定もする
WP Multibyte Patch：日本語でも正常に動作するようにするパッチ
WP-Optimize - クリーン、圧縮、キャッシュ：サイト全体の余計なデータを削除・圧縮する

直下にあるphp・cssファイル

add_admin.css WordPress上の見栄えを整えるcssです。基本触らない。
footer.php フッターのテンプレートです。
functions.php WordPressの様々な設定をしているファイルです。
1つでも表記を誤るとエラーに繋がるので取り扱いには注意してください。
header.php ヘッダーのテンプレートです。
index.php page.phpと同じ内容が入っています。
触る必要はありません。（予備だと思ってください）
page.php LP（固定ページ）のベーステンプレートです。
parts-schedule.php 診療時間表のテンプレートです。
style.css PC・スマホ共通のスタイルシートです。
screenshot.png テーマ選択画面に表示される画像です。
wp-login.png、screenshot.png ログイン画面時に表示されるロゴマーク、外観テーマのサムネです。

CSSディレクトリ

fontawesome.min.css フォントオーサム用のCSSです。
reset.css リセットCSSです。

imagesディレクトリ

適宜調整して使用してください。

jsディレクトリ

jquery-3.6.0.min.js jquery
main.js 全ページ共通js
scrollhint 横クロールする要素にヒント表示をするjsです。主にtableに使用しています。
https://appleple.github.io/scroll-hint/

webfontsディレクトリ

fontawesomeのデータが入っています。