LP制作講座】自社で売れるLPを“自作”したい方へ | WordPressを使った方法で初心者でも本格サイトが作れます

リンクはこちら↓↓

https://rednight22y.com/lp/starter-kit/

※本動画で取り上げているサイトはLPまとめサイト【WebDesignClip(https://lp.webdesignclip.com/)】内の掲載サイトを引用しております。

※講座作成時の2023年1月をもってAdobe CCプランに「XD」が無くなったため、「figma」をご活用ください。

＞＞ WEBデザインで使えるサイトまとめ
https://docs.google.com/document/d/1InQGyBxO3zIRp2yThbGpa3C_soXjit9rEPsLrL8m0J4/edit?usp=sharing

※講座作成時の2023年1月をもってAdobe CCプランに「XD」が無くなったため、「figma」をご活用ください。

※HTMLやCSSについて理解がない方は、特典の「HTML＆CSS解説動画」をご活用ください。

↓「contact form 7」HTMLテンプレート

（コピペしてお使いください）
＝＝＝＝＝

<div id="form-wrapper">

<table>

<tbody>

<tr>

<th><span class="required">必須</span>お名前</th>

<td>[text* your-name]</td>

</tr>

<tr>

<th><span class="required">必須</span>メールアドレス</th>

<td>[email* your-email]</td>

</tr>

<tr>

<th><span class="required">必須</span>電話番号</th>

<td>[tel* your-tel]</td>

</tr>

<tr>

<th><span class="required">必須</span>お問い合わせ項目</th>

<td>[checkbox* checkbox01 use_label_element "制作依頼" "無料相談" "その他"]</td>

</tr>

<tr>

<th><span class="optional">任意</span>お問い合わせ内容</th>

<td>[textarea your-message]</td>

</tr>

</table>

<p>[acceptance acceptance-187]プライバシーポリシーに同意[/acceptance]<p>

</tbody>

</div>

[submit "送信する"]

＝＝＝＝＝

↓「contact form 7」CSSテンプレート

（コピペしてお使いください）

＝＝＝＝＝

#form-wrapper　{

width: 100%;

}

#form-wrapper　table{

width: 100%;

border-collapse: collapse;

}

#form-wrapper table tr th,

#form-wrapper table tr td{

padding: 1em;

text-align: left;

vertical-align: top;

vertical-align: middle;

}

#form-wrapper table tr th{

width: 30%;

}

@media screen and (max-width:960px){

#form-wrapper{

width: 100%;

}

#form-wrapper table,

#form-wrapper table tbody,

#form-wrapper table tr,

#form-wrapper table tr th,

#form-wrapper table tr td{

display: block;

}

#form-wrapper table{

width: 100%;

}

#form-wrapper table tr th,

#form-wrapper　table tr td{

width: 100%;

padding: 5%;

}

}

input.wpcf7-form-control.wpcf7-text,

textarea.wpcf7-form-control.wpcf7-textarea {

width: 100%;

padding: 5px 15px;

margin: 10px 0px;

}

textarea.wpcf7-form-control.wpcf7-textarea {

height: 250px;

}

/*「必須」文字デザイン*/

.required{

font-size: 0.75em;

padding: 5px;

color: white;

background-color: #A80604;

border-radius: 3px;

margin-right: 10px;

}

/*「任意」文字デザイン*/

.optional{

font-size: 0.75em;

padding: 5px;

color: white;

background-color: #646464;

border-radius: 3px;

margin-right: 10px;

}

/* 「送信する」ボタン */

input.wpcf7-submit {

   display: block;

color: white;

background-color: #323232;

   padding: 5px 0;

width: 100%;

   margin-top: 50px

＝＝＝＝＝

↓メッセージ本文１（自分宛）
＝＝＝＝＝

差出人: [your-name] <[your-email]>

＝＝＝＝【お問い合わせ内容】＝＝＝＝＝＝

お名前: [your-name]

メールアドレス: [your-email]

電話番号: [your-tel]

お問い合わせ項目: [checkbox01]

お問い合わせ内容: [your-message]

----------

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

＝＝＝＝＝

↓メッセージ本文２（相手宛）
＝＝＝＝＝

この度はお問い合わせありがとうございました。

担当者より後日連絡いたしますので、しばらくお待ちください。

以下、送信内容になります。

----------

お名前: [your-name]

メールアドレス: [your-email]

電話番号: [your-tel]

お問い合わせ項目: [checkbox01]

お問い合わせ内容: [your-message]

----------

このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

↓Twitterカード用コード

＝＝＝＝＝

<meta name="twitter:card" content="　カードタイプ（*1）　" />

<meta name="twitter:site" content="　Twitterアカウント名（*２）　" />

<meta name="twitter:title" content="　タイトル　" />

<meta name="twitter:description" content="　説明文　" />

<meta name="twitter:image" content="　画像パス　" />

＝＝＝＝＝

(*1)サマリーカードの場合は”summary“、大型画像のサマリーカードの場合は”summary_large_image”と指定

(*2）「@〇〇」と指定

＞＞ 画像素材はこちら

https://drive.google.com/drive/folders/1U79sa0vYObUUIRKVLlljRvkV45Bwrsbw

※イラスト素材は必要に応じてデザイン編で紹介した素材サイト等より各自ダウンロードをお願いします。

＞＞ テキスト素材はこちら

https://docs.google.com/document/d/1vfEkKic_VLjANTBaZ99NqLYRfSlL5nAetlbY_5TJ140/edit?tab=t.0

追記：ボタンアニメーションのCSSテンプレートコードは特典で用意しておりますので、よろしければご活用ください。