こだわりのマンション管理

1年 ago
TechnoKiwi_53
3 minutes

基本情報　

テーマLightning
プラグインLightning G3 Pro Unit ➕　Lightning G3 Evergreen キット
Vektor Passport期限2025/9/7
・Ligtning G3 pro unit zip
・vk block pro zip
・Ligtning pro zip(使用しないでok)
key カラー#003da5　青
#EFEFEF　グレー
BFC9BD薄緑
009AA6 misonoグリーン
#ebedf5背景お問合せ
Lightning G3 Pro Unit のインストール

Lightning G3 Pro Unit 基本設定

プラグイン

  • Simple Custom CSS and JS
  • Code Snippets(主にPHP,CSSは有料になるのでSimple Custom CSS and JSで調整)
  • Contact Form 7 Multi-Step Forms（確認画面）
  • All-in-One WP Migration（セキュリティ、IP addressブロック、configファイル等重要ファイル監視）

Vector my accountページ
https://vws.vektor-inc.co.jp/

１ライトニングテーマ選択

２プラグインLightning G3 Pro Unit、

Lightning G3 Evergreen　

Lightning G3 Evergreen キット

３プラグイン All-in-One WP Migration をインストール

４エバーグリーンコンテンツデータ：拡張子「.wpress」のファイル読み込む

  • 「Lightning-g3-evergreen.zip」はデザイン拡張スキンプラグイン。
  • 「evergreen.wpress」は企業サイト向けコンテンツデータ。

Lightning G3 Evergreen キット

Googleのリキャプチャー設定について

https://www.google.com/recaptcha/about

v3 Admin Consoleをクリック

こだわりのマンション管理サブドメインなのでミソノサービスのサイドキー、シークレットキー使用。

Contact Form 7 の画面くずれ

1.SONOS SHOPのお問い合わせフォームのCSSを使うと型崩れが起こる

利用規約<P>タグを削除したが、が行間が狭まらない。セルの幅の調整のバランス。文字に対して大きすぎる

CF7が自動でpタグやbrタグを挿入する設定→これを無効化
functions.phpを直接編集しず、プラグイン「Code Snippets」を導入

// Contact Form 7 のフィルターフック「wpcf7_autop_or_not」に
// falseを返すことでpタグ、brタグが自動挿入されないように設定
これによりセルの幅の不具合調整、

「php記述」
function wpcf7_autop_return_false() {
return false;
}
add_filter(‘wpcf7_autop_or_not’, ‘wpcf7_autop_return_false’);




テーマの追加cssに追記しても良かったのですが、可読性が悪いので、プラグイン「imple Custom CSS and JS」を導入してコードの混在を回避。


/* 768px未満の画面幅における tr の高さ設定 */
@media screen and (max-width: 768px) {
.page-id-5480 table.CF7_table tr {
height: auto;
}
}

/* 768px以上の画面幅における th の横幅の設定 */
@media screen and (min-width: 768px) {
.CF7_table th {
width: 35%;
}
}

.page-id-5480はどこのクラス？
WordPress特有のクラスで、確認画面の固定ページのID

　ID確認方法：https://tcd-theme.com/faq/page_id.ht

①



2.これを設定するとお問い合わせ入力画面の崩れはなくなるが、Contact Form 7 Multi-Step Forms（確認画面）がくずれるので以下の設定を②CSSで別途指定

編集画面での崩れはなくなったが今度確認画面でのtrが狭すぎる

/* 確認画面の tr の高さ設定 */
.page-id-5480 table.CF7_table tr {
height: 4rem;
}

利用規約のスクロール表示

/* 「個人情報の範囲」 のスクロール設定 */
.scroll-box {
width: 100%;
height: 200px;
overflow-y: scroll;
border: 1px solid #ddd;
background-color: #EBEDF5;
}

利用規約承認確認ボタンテーブルと近すぎる

/* 承認確認ボタンのマージン設定 */
.btn_accept {
display: block;
text-align: center;
margin: 2rem 0;

利用規約のhtml

<tr>
<th>個人情報の取扱い</th>

<td>
<div class=”scroll-box privacy box under”>
<dl>
<dt>個人情報の範囲</dt>
<dd>個人情報とは、当サイトにおいて、皆様からご提供頂く「氏名・電子メールアドレス」等、特定の個人を識別しうる情報、もしくは皆様各個人固有の情報を意味します。<br>※一部クッキーを使用しておりますが、ログインセッション等の個人を特定するものではない為、クッキーに関しましては個人情報の範囲と致しません。</dd>
<dt>個人情報の取得</dt>
<dd>当社では、皆様に個人情報のご提供をお願いする時は、予めその利用目的を明示致します。 皆様からご提供頂いた個人情報は、利用目的にある範囲内に限って利用し、皆様の同意なく利用目的以外には一切利用致しません。</dd>
<dt>個人情報の利用目的</dt>
<dd>当社は、皆様からご提供頂いた個人情報を、次の目的の範囲内で利用致します。</dd>
<dd>
<ul class=”disc”>
<li>お問い合わせに対する返信やその他メール配信</li>
<li>緊急時のご連絡</li>
<li>サービスの提供を行ううえで欠かせない確認やご案内のため</li>
</ul>
</dd>
<dt>個人情報の第三者提供</dt>
<dd>皆様にご提供頂いた個人情報は、下記に該当する場合を除き、如何なる場合も第三者には開示致しません。</dd>
<dd>
<ul class=”disc”>
<li>ご本人の同意がある場合</li>
<li>皆様に明示した利用目的の達成に必要な範囲で個人情報の取扱いを委託する場合</li>
<li>統計的なデータとして、皆様個人を識別できない状態に加工して提供する場合</li>
<li>法令等に基づき、関係機関より開示を求められ、提供に応じなければならない場合</li>
<li>官公庁、弁護士会等からの照会や協力要請を受け、適法かつ適正であると判断した場合</li>
</ul>
</dd>
<dt>個人情報の安全管理</dt>
<dd>皆様の個人情報の管理につきまして、当会では個人情報の管理責任者を定め、適切な管理を行い、個人情報の外部への流出防止に努めます。 管理責任者は第三者の不正なアクセスによる個人情報の漏洩 ・ 流用 ・ 改ざん等を防止するため、万全のセキュリティ対策を講じるものとします。</dd>
<dt>営業目的のお問合わせについて</dt>
<dd>お問合わせフォームを利用した営業目的の問い合わせはお断りいたします。ご了承下さい。</dd>
<dt>当サイトに対するお問合せ</dt>
<dd>個人情報に関するご照会・ご相談は、下記までお問合せください。なお、個人情報に関するご照会に際しては、ご本人であることを確認した上で、可能な限り迅速な対応をさせていただきます。</dd>
<dt>お問合せ先</dt>
<dd>名古屋市北区平安二丁目15番56号 <br>Email: compliance＠misonos.co.jp</dd>
</dl>
</div>
</td>
</tr>

利用規約のcss

/* 個人情報の取扱いの設定 */
.privacy {
width: 100%;
margin: 0 auto;
}

.privacy .box {
background-color: rgba(255, 255, 255, .7);
border: 1px solid #888;
height: 200px;
overflow: auto;
}

.privacy dt {
margin-bottom: 10px;
margin-top: 20px;
border-bottom: 1px dotted #333;
padding-bottom: 5px;
}

.privacy dd {
margin-bottom: 10px;
font-size: 90%;
padding-left: 50px;
line-height: 180%;
}

ul.disc {
margin-bottom: 20px;
}

.disc li {
list-style-type: disc;
margin-left: 30px;
font-size: 0.9em;
}

文字数カウンター設定

[textarea textarea-669 maxlength:700]
残文字数 : [count textarea-669 down]

重要事項説明書

edel-custom-form

misonos.co.jp/public_html/cad_misonos.co.jp/wp_content/plugin/del-custom-form/inc

wp-content/plugins/edel-custom-form/inc/class-admin.php
管理画面設定　送信者名、送信メールアドレス、管理者受信メールアドレス、メール件名

wp-content/plugins/edel-custom-form/inc/class-front.php
入力画面,確認画面,送信完了画面 html

29行目から251行目までがフォームのHTML。
この中の placeholder=””の部分がプレースホルダー。

ajaxzip3
郵便番号から住所を引っ張ってきてくれる便利なライブラリ

動画圧縮 adobe Premiere Pro

TOP動画圧縮

https://www.frog-pod.com/FrogTechLog/2023/03/webpremiere-pro.html

コメントを残す 0

Your email address will not be published. Required fields are marked *

CAPTCHA