メールマガジンのLP（ランディングページ）を作るのは難しいと思われていますが、
1ページ2ページのシンプルなLPならカンタンに作れます。
バズ部のLP
こんな感じのシンプルなページ。
文章があまり無くても魅力的な特典があればついメルマガ登録しちゃいますよね。
今回僕もこれを参考に、独学ラボで同じようなLPを作ってみました。
ページ自体はハミングバードのランディングページ機能で使っていますが、
固定ページでも多分行けるはずです。
HTMLをコピペ
まずは僕が作ったページのHTMLを全部コピペして
新規追加の固定ページorランディングページに貼りましょう。
<div id="mainlp"> <pre>[voice icon="https://dokugakulabo.com/wp-content/uploads/2016/04/profile-yonamine2.jpg" name="与那嶺隆之" type="l"]<span style="color: #000000;">こんにちは。当ブログをお読み頂き有難う御座います。管理人の与那嶺隆之と申します。</span>[/voice]</pre> <p><img class=" wp-image-5923 alignright" src="https://dokugakulabo.com/wp-content/uploads/2015/11/e-book-waseda-studyway.jpg" alt="早稲田大学に合格するための勉強法Ebook" width="206" height="335" />もしかするとあなたは、闇雲に授業を受け、参考書を勉強してるだけで、全然結果に結びつかないとお悩みではありませんか？今回、ブログ読者様のご要望を受け、</p> <ul> <li><span style="color: #ff0000;"><strong>センター7割の医学部志望生が本番で94％得点した方法</strong></span></li> <li><span style="color: #ff0000;"><strong>2015年のT式学習塾生が第2回全統マーク模試で99.5％得点した秘密</strong></span></li> <li><span style="color: #ff0000;"><strong>センター英語を20分で解く「入試の構造を把握しきった解き方」</strong></span></li> </ul> <p>などのノウハウを、Ebookや動画、メール講座で解説することにしました。<span style="line-height: 1.5;">他にも今なら以下の5つ+1の教材が</span><span style="text-decoration: underline;"><strong>完全無料</strong></span><span style="line-height: 1.5;">で手に入ります。</span></p> <ol> <li>最速得点メソッド習得講座（約6時間分）の動画</li> <li>Ebook最速得点勉強法</li> <li>T式学習塾のオリジナルテキストのサンプル</li> <li>偏差値38から早稲田に宅浪で合格した早大生のオーディオ講義</li> <li>1ヶ月間無料メールサポート</li> <li>解法マニュアル（センター英語解法、評論・小説・古文・漢文の解法）</li> </ol> <p>ぜひ、あなたのこれからの受験勉強にお役立て下さい。</p> </div> <div id="sidelp"> <div class="lp-side-inner"> <div class="lp-form"> <form id="UserItemForm" accept-charset="utf-8" action="https://producelabo.jp/p/r/iLgMyxHq" enctype="multipart/form-data" method="post"> <p><input name="_method" type="hidden" value="POST" /></p> <table class="lp-form"> <tbody> <tr class="lp-form"> <td class="form-td name">姓（必須） <input id="Username1" name="data[User][name1]" type="text" value="" placeholder="例：与那嶺" /></td> </tr> <tr class="lp-form"> <td class="form-td mail">メールアドレス（必須） <input id="Usermail" name="data[User][mail]" type="text" value="" placeholder="例：mail@example.jp" /></td> </tr> <tr class="lp-form"> <td class="lp-form"><input type="submit" value="▶ 登録する" /> <input id="server_url" type="hidden" value="https://producelabo.jp/" /> <!-- ▼リファラ --> <input id="UserRefererFormUrl" name="data[User][referer_form_url]" type="hidden" value="" /> <input id="UserRefererUrl" name="data[User][referer_url]" type="hidden" value="" /></td> </tr> </tbody> </table> <p style="text-align: left;"><span class="rules">※健全なコミュニティ運営のため本名でのご登録をお願いしています。<span style="text-decoration: underline; font-size: 14px; color: #ff0000;"><strong>明らかな偽名の場合はこちらで予告無く登録を削除させて頂きます</strong></span>。予めご了承下さい。</span></p> <p><span class="rules"><a href="http://t-shiki.co.jp/privacy-policy">(プライバシーポリシー)</a></span></p> </form> </div> </div> </div>
CSSをコピペ
次にCSSで調整します。下記コードをコピペして下さい。
（ムダなCSSがたくさんありますがそこはご了承を！！m(_ _)m）
あ、追加CSSはテーマ依存にならないように
「Simple Custom CSS」というプラグインが便利ですよ。
/* ======================================
レイアウト
========================================= */
@media (max-width:480px) {
#content.lp-wrap {
margin-top: 0;
}
}
div#mainlp {
width: 60%;
float: left;
}
@media screen and (max-width: 480px) {
div#mainlp {
width: 100% !important;
float: none;
}
}
@media screen and (max-width: 1080px) {
div#mainlp {
width: 100% !important;
float: none;
}
}
div#sidelp {
width: 36%;
margin-top: 0;
float: left;
margin-left: 30px;
}
@media screen and (max-width: 480px) {
div#sidelp {
margin-left: 0;
}
}
@media screen and (max-width: 1080px) {
div#sidelp {
width: auto;
float: none;
}
}
.lp-wrap .entry-content {
padding: 4em;
}
@media screen and (max-width: 1080px) {
.lp-wrap .entry-content {
padding: 1em;
}
}
.lp-containar .catchcopy {
text-align: center;
margin: .5em .3em;
padding: 0;
font-size: 2em;
background: none;
}
/*===============================
formのCSS
===============================*/
@media(max-width:480px) {
#sidelp .lp-form form {
padding: 0 0 0 23px;
}
}
#sidelp .lp-form {
background: #494c4e;
color: #fff;
padding: 5px 20px 5px 15px;
}
@media (max-width:480px) {
#sidelp .lp-form {
padding: 2px 0 5px 10px;
margin: 0 -15px 15px;
}
}
table.lp-form, .entry-content table, .entry-content tr {
border: 0px !important;
}
td.form-td.name, td.form-td.mail, td.lp-form {
background: none;
}
tr.lp-form {
border-bottom: none;
}
#sidelp td.lp-form.btn {
padding: 7px 6px 10px 8px;
width: 100%;
margin: 6px 4px 7px 6px;
}
@media (max-width:480px) {
#main input[type="text"] {
width: 100%;
max-width: 100%;
}
}
span.rules {
/*注意書き*/
font-size: 10px;
display: block;
text-align: left;
}
@media (max-width:480px) {
span.rules {
padding: 0 23px 0 0;
}
}
input[type="submit"] {
padding: 14px 0 !important;
font-size: 18px;
font-weight: 700;
color: #fff;
background: #5ace5f;
width: 80%;
border: 0;
border-radius: 3px;
margin-top: 25px;
}
main#main #sidelp td.lp-form {
text-align: center;
}
.cta li {
list-style: disc;
}
これでおそらく2カラムでのLPが出来るハズです。
あとは文章や画像、そしてメルマガのフォームコードを入れ替えてしようして下さい。
メルマガのコード
メルマガフォームのコードなんですが、
僕はマイスピー使ってます。ソースはこんな感じ。
<form id="UserItemForm" accept-charset="utf-8" action="https://producelabo.jp/p/r/iLgMyxHq" enctype="multipart/form-data" method="post"> <p><input name="_method" type="hidden" value="POST" /></p> <table class="lp-form"> <tbody> <tr class="lp-form"> <td class="form-td name">姓（必須） <input id="Username1" name="data[User][name1]" type="text" value="" placeholder="例：与那嶺" /></td> </tr> <tr class="lp-form"> <td class="form-td mail">メールアドレス（必須） <input id="Usermail" name="data[User][mail]" type="text" value="" placeholder="例：mail@example.jp" /></td> </tr> <tr class="lp-form"> <td class="lp-form"><input type="submit" value="▶ 登録する" /> <input id="server_url" type="hidden" value="https://producelabo.jp/" /> <!-- ▼リファラ --> <input id="UserRefererFormUrl" name="data[User][referer_form_url]" type="hidden" value="" /> <input id="UserRefererUrl" name="data[User][referer_url]" type="hidden" value="" /></td> </tr> </tbody> </table> <p style="text-align: left;"><span class="rules">※健全なコミュニティ運営のため本名でのご登録をお願いしています。<span style="text-decoration: underline; font-size: 14px; color: #ff0000;"><strong>明らかな偽名の場合はこちらで予告無く登録を削除させて頂きます</strong></span>。予めご了承下さい。</span></p> <p><span class="rules"><a href="http://t-shiki.co.jp/privacy-policy">(プライバシーポリシー)</a></span></p> </form>
formタグ
メルマガHTMLソースは必ず<form></form>でくくられます。
お使いのスタンドのHTMLソースからコピペして入れ替えて下さい。
hiddenタグ
これ見落としがちです。見た目には反映されませんが、
<form></form>の中に入れておかなければなりません。
これはスタンドによって1つしかなかったり、
4つ5つあったりしますが、全てコピペして下さい。
inputタグ
これは名前やメルアドの入力欄です。
これもメルマガのHTMLソースからコピペして下さい。