【LPテンプレート】カラフルで作成したソースコードをそのまま公開
こちらから確認することができます↓
こんにちは、ゾノです。
ちょっと大胆かもしれませんが、「ブログ勉強会の募集ページ」で使用するランディングページのソースコードをそのまま公開します。
あまりゴチャゴチャさせずにシンプルにLPを作りたい人は、ぜひ参考にしてみてください。
制作環境
キャッチコピーが、「最短3分パズル感覚でつくれるWordPressテーマ型のLP(ランディングページ)テンプレート」のとおりで、真剣に使いやすいので、心からおすすめです。
Colorful(カラフル)のご購入はこちら
LPテンプレートクリエイティブパック「Colorful(カラフル)」 |最短3分で制作可能なLP(ランディングページ)がつくれます
最短3分でワンタッチ操作+成約率を上げる36種類以上の機能を兼ね備えたLP(ランディングページ)のテンプレート
【LPテンプレート】カラフルで作成したソースコードをそのまま公開
LPテンプレート「Colorful(カラフル)」を使用した、ランディングページのソースコードは下記のとおりです。
LPをアップデートしたら、本記事も更新していきますので定期的に見に来てくださると嬉しいです。
<table class="headParts003" style="background-image: url('https://nakazononorifumi.net/wp-content/uploads/2020/03/sponsor-04.jpg');">
<tbody>
<tr>
<td>
<div class="headParts003_container po_r">
<div class="headParts003_content">
<div class="headParts003_content_left">
<div class="headParts003_ttl_wrap">
<p class="headParts003_subTitle" style="text-shadow: 1px 2px 3px #FFFFFF;">まずは、<span style="font-size: 24pt;">5万</span>を目指す!</p>
<p class="headParts003_mainTitle" style="text-shadow: 1px 2px 3px #FFFFFF;">「実践的」に学ぶ
稼げるブログ勉強会</p>
</div>
<p class="headParts003_txt" style="text-shadow: 1px 2px 3px #FFFFFF;"><strong><span style="font-size: 16pt;">「もう、初心者なんて言わせない」</span></strong>
概論的に学ぶ遠回りをしないで、本当にブログで稼げるようになるための必要最低限のスキルを一気に習得することだけを目的にした圧倒的実践力を身につけるオンライン勉強会。</p>
</div>
<div class="headParts003_content_right"><img class="shadow-border" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/blog-planning-room-02.jpg" alt="" width="960" height="600" /></div>
</div>
</div></td>
</tr>
</tbody>
</table>
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">
自ら<span style="color: #ffff99;">「初心者です」と名乗る癖</span>
<span style="color: #ffff99;">今日で終わり</span>にしませんか?
</div></td>
</tr>
</tbody>
</table>
こんにちは、ゾノです。
僕は、昨年6月に立ち上げた「<a href="https://01blog.org/"><strong>01blog(ゼロイチブログ)</strong></a>」の月間PVが、約7万ほどで安定し、ライターも雇わず、デザイナーも雇わず、完全に1人でブログ運営をしております。
<div class="link-box">
<div class="img-box">
<div style="background-image: url('https://nakazononorifumi.net/wp-content/uploads/2020/03/prof_head_01.jpg');"></div>
</div>
<div class="text-box">
<p class="title">01blog|ゼロイチブログ(ゾノ)</p>
<p class="description">「IT技術」と「教育問題」を主軸に、Web Marketing(特にワードプレス)情報や教育問題(特に不登校、引きこもり)など幅広く発信しています。自らの人生で経験した実体験をもとに、世の中のためになる情報をアウトプットするブログです。</p>
</div>
</div>
<strong>今日はあなたに、超現実的でツマラナイ話をします。</strong>
<span style="color: #ff0000;"><strong><span style="background-color: #ffff99;">ただ、このツマラナイ話に共感できる人は、今後結果を出していく人だろうな、、と思いつつ、執筆していきます。</span></strong></span>
<strong>その前に、ざっくりとですが、僕のSEO実績としてはこんなになっております。</strong>
<ul class="image-horizontal-scroll">
<li class="box">
<div><a href="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-01.jpg"><img class="aligncenter size-full wp-image-7509" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-01.jpg" alt="" width="1200" height="814" /></a></div></li>
<li class="box">
<div><a href="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-02.jpg"><img class="aligncenter size-full wp-image-7509" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-02.jpg" alt="" width="1200" height="814" /></a></div></li>
<li class="box">
<div><a href="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-03.jpg"><img class="aligncenter size-full wp-image-7509" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-03.jpg" alt="" width="1200" height="814" /></a></div></li>
<li class="box">
<div><a href="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-04.jpg"><img class="aligncenter size-full wp-image-7509" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/seo-2020-03-02-04.jpg" alt="" width="1200" height="814" /></a></div></li>
</ul>
ご覧のように100記事ほどの記事が、検索結果ページの1枚目に表示されている状況です。
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;">僕が行っている手法は<strong>コアなキーワードを狙い、しっかりと記事を書いて、コアな読者さんから強い共感を得ることを目的としたもの</strong>です。</td>
</tr>
</tbody>
</table>
では、さっそく本題です。
<span style="background-color: #ffff99;"><strong>最初に言っておきますが下記のことを言っているようでは、残念ながらブログで稼いでいくのはシンドイということをご理解ください。</strong></span>
<ul class="List-chk-A_3">
<li><strong>私はブログ初心者です…</strong></li>
<li><strong>始めたてなので、よろしくお願いします…</strong></li>
<li><strong>右も左も分からず、困っています…</strong></li>
</ul>
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;">※おねがい:このページでの僕の発言は、本気でビジネスとしてメディア運営で結果を出したい人向けに、魂込めて書いているので、趣味程度にブログで稼げたらいいな・・・程度の人は、大変恐縮なのですが、ポチッとこのページを閉じてください。</td>
</tr>
</tbody>
</table>
<table class="subHeadParts002">
<tbody>
<tr>
<td>
<div class="subHeadParts002_container">
<div class="subHeadParts002_subTitle_wrap">
<p class="subHeadParts002_subTitle"><span style="color: #ff0000;">ブログを始めた時点で立派なブロガー!</span>
「私は初心者です…」なんて
言っている人から
商品を買いたいと思いますか?</p>
</div>
</div></td>
</tr>
</tbody>
</table>
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">
今から、<span style="color: #ffff99;">プロ意識</span>を持ってOKです
</div></td>
</tr>
</tbody>
</table>
<img class="aligncenter size-full wp-image-3304" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/earn-web-production-00.jpg" alt="" width="1200" height="734" />
<span style="background-color: #ffff99;"><strong>ブログで結果がなかなか出ない人の特徴の1つに、<span style="color: #ff0000;">「ブログ に仕事意識を持っていない」</span>という大きな問題があります。</strong></span>
はい、、ブログをなめている人があまりにも多いのです。
人生の99.9%をブログに魂を込めている僕からすると、ゴツンとゲンコツしたいレベルの人が多いわけです。
<ul class="List-chk-A_3">
<li><strong>ブログ始めた時点で、立派なブロガーです</strong></li>
<li><strong>始めたてでも、胸を張って立ち振る舞う</strong></li>
<li><strong>正々堂々と、自信を持つことから始める</strong></li>
</ul>
<span style="text-decoration: underline;"><strong><span style="font-size: 18px;">「私、、初心者なんです……」</span></strong></span>
<span style="font-size: 18px;">とか、自信なさそうに言っている人に、お仕事を頼みますか?</span>
そんなサイトのアフィリエイトリンクをクリックしようと思いますか?
たぶんですが、仕事は受注できないし、アフィリエイトをやってもそんなに稼げないですよね。
<p class="btn-n btn-l btn-a4 btn-round"><a href="https://docs.google.com/forms/d/e/1FAIpQLSfCaa0t8NFsgLzJnwvEdQEY_DOXKDHcjK3iPQP4S3SSizGrdQ/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">無料ブログ勉強会に予約する
<small>Googleフォームに移動します</small></a></p>
<span style="font-size: 10pt;">※安心安全のセキュリティーを誇る、Googleフォームを使用しております。ぜひ、ご安心してお申し込みください。また、個人情報の取り扱いはページ下部のプライバシーポリシーをご確認ください。</span>
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">
<span style="color: #ffff99;">最低限</span>知っておくべき
ブログラミング言語を<span style="color: #ffff99;">知ればOK</span>です
</div></td>
</tr>
</tbody>
</table>
<img class="aligncenter size-full wp-image-3305" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/earn-web-production-03.jpg" alt="" width="1200" height="852" />
僕は、料理がまったくできません。
カレーライスの作り方も、サッパリのレベルです。
これをブログに置き換えて考えると、こんな感じです。
<span style="text-decoration: underline;"><span style="font-size: 14pt;"><strong>カレーを盛り付ける=ブログを書く</strong></span></span>
はい、、<strong>この状態にもなれていない人が、はっきり言って多すぎなんです。</strong>
<strong><span style="font-size: 18px; background-color: #ffff99;">かなりぶっちゃけて言えば、最低限の器を用意して、盛り付けて、食べることができればオッケイなんですよ。</span></strong>
なので、僕の勉強会では「HTMLとは…」とか「CSSとは…」なんてところからはやりません。
なぜなら、<strong>あなたの狙うセンターピンは「ブログで稼ぐ」ことだからです。</strong>
概論チックに学んでも、意味無しですm(_ _)m
<strong>一気に、ブログで稼ぐために「最低限必要なスキル」を習得しちゃいましょう。</strong>
<p class="btn-n btn-l btn-a4 btn-round"><a href="https://docs.google.com/forms/d/e/1FAIpQLSfCaa0t8NFsgLzJnwvEdQEY_DOXKDHcjK3iPQP4S3SSizGrdQ/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">無料ブログ勉強会に予約する
<small>Googleフォームに移動します</small></a></p>
<span style="font-size: 10pt;">※安心安全のセキュリティーを誇る、Googleフォームを使用しております。ぜひ、ご安心してお申し込みください。また、個人情報の取り扱いはページ下部のプライバシーポリシーをご確認ください。</span>
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">
稼げるブログ勉強会【無料】
<span style="color: #ffff99;">学べる内容</span>について
<p class="subHeadParts001_txt">今日から使える実践的な学びを、バシバシと進めていきます</p>
</div></td>
</tr>
</tbody>
</table>
<img class="aligncenter size-full wp-image-3306" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/earn-web-production-02.jpg" alt="" width="1200" height="900" />
ブログやメディア運営のことを学べる合計120分の「稼げるブログ勉強会(無料)」です。
<span style="background-color: #ffff99;"><strong>オンライン勉強会なので、時間と場所には余裕を持ってご参加いただけます。</strong></span>
<strong><span style="font-size: 18pt;">✓ 勉強会の内容</span></strong>
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;"><span style="font-size: 14pt;">①:HTMLとCSSの基礎</span>
<span style="font-size: 14pt;">②:ブログをモデリングする方法</span>
<span style="font-size: 14pt;">③:ブログの書き方(初級編)</span>
<span style="font-size: 14pt;">④:アフィリエイトの基本</span>
<span style="font-size: 14pt;">⑤:独自商品を作る3ステップ</span>
<span style="font-size: 14pt;">⑥:質疑応答</span>
<span style="font-size: 14pt;">⑦:個別相談</span></td>
</tr>
</tbody>
</table>
<strong><span style="font-size: 18pt;">✓ 参加特典</span></strong>
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;"><span style="font-size: 14pt;">①:「60分の個別相談」</span>
<span style="font-size: 14pt;">②:「<a href="https://01blog.org/blog-planning-room/"><strong>980円で販売しているブログ企画室</strong></a>」に無料ご招待</span></td>
</tr>
</tbody>
</table>
<span style="text-decoration: underline;"><strong>かなりお得感満載で結構学べると思います。</strong></span>
<strong><span style="font-size: 18pt;">✓ 開催日時</span></strong>
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;"><span style="font-size: 14pt;">4月17日㈮ 5:00〜7:00<strong>【残り2席】</strong>
4月17日㈮ 21:00〜23:00<strong>【残り2席】</strong>
4月18日㈯ 5:00〜7:00<strong>【残り3席】</strong>
4月18日㈯ 21:00〜23:00<strong>【残り3席】</strong>
4月19日㈰ 5:00〜7:00<strong>【残り2席】</strong>
4月19日㈰ 21:00〜23:00<strong>【残り3席】</strong></span></td>
</tr>
</tbody>
</table>
<p class="btn-n btn-l btn-a4 btn-round"><a href="https://docs.google.com/forms/d/e/1FAIpQLSfCaa0t8NFsgLzJnwvEdQEY_DOXKDHcjK3iPQP4S3SSizGrdQ/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">無料ブログ勉強会に予約する
<small>Googleフォームに移動します</small></a></p>
<span style="font-size: 10pt;">※安心安全のセキュリティーを誇る、Googleフォームを使用しております。ぜひ、ご安心してお申し込みください。また、個人情報の取り扱いはページ下部のプライバシーポリシーをご確認ください。</span>
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">
ブログ勉強会の<span style="color: #ffff99;">時間帯</span>にも
こだわりを持っています
</div></td>
</tr>
</tbody>
</table>
<img class="aligncenter size-full wp-image-3307" src="https://nakazononorifumi.net/wp-content/uploads/2020/03/blog-technique-03.jpg" alt="" width="1200" height="784" />
上記日程の時間帯に「あれ、、朝の5時???」と思った方もいらっしゃるかなと思います。
<strong>平日の日中はお仕事で忙しい毎日で、週末は週末で家族と過ごす時間を大切にしたいですよね。</strong>
という思いから、開催時間は下記2パターンです。
<strong><span style="font-size: 18pt;">✓ 開催時間</span></strong>
<table class="frame-4" style="border: dashed 1px; border-color: #ddd;">
<tbody>
<tr>
<td style="line-height: 40px;"><span style="font-size: 14pt;">①:5:00〜7:00
②:21:00〜23:00</span></td>
</tr>
</tbody>
</table>
<strong><span style="text-decoration: underline;">「お子様の送迎や、ご主人のお弁当作りの前に…」</span></strong>
<strong><span style="text-decoration: underline;">「夜、子どもを寝かしつけて落ち着いた環境で…」</span></strong>
というニーズにお答えできるように、上記の時間帯で開催しております。
また、<span style="background-color: #ffff99;"><strong>オンライン勉強会なので、時間と場所には余裕を持ってご参加いただけます。</strong></span>
どうぞ、お気軽にご参加くださいませ🙇‍
<p class="btn-n btn-l btn-a4 btn-round"><a href="https://docs.google.com/forms/d/e/1FAIpQLSfCaa0t8NFsgLzJnwvEdQEY_DOXKDHcjK3iPQP4S3SSizGrdQ/viewform?usp=sf_link" target="_blank" rel="noopener noreferrer">無料ブログ勉強会に予約する
<small>Googleフォームに移動します</small></a></p>
<span style="font-size: 10pt;">※安心安全のセキュリティーを誇る、Googleフォームを使用しております。ぜひ、ご安心してお申し込みください。また、個人情報の取り扱いはページ下部のプライバシーポリシーをご確認ください。</span>
それでは、勉強会当日に、お会いできますことを心より楽しみにしています🙇‍
<p style="text-align: right;">01blog「ゼロイチブログ」
Norifumi Nakazono</p>
<div class="full-width">
<table style="background-color: #103656; background-position: 50% 0; border-width: 0px; border-style: solid;" border="0">
<tbody>
<tr>
<td>
<p style="text-align: center;"><span style="font-size: 8pt; color: #ffffff;"><a style="color: #ffffff;" href="https://01blog.org/tokusyo/" target="_blank" rel="noopener noreferrer">特定商取引法に関する表示</a> | <a style="color: #ffffff;" href="https://01blog.org/privacy-policy/" target="_blank" rel="noopener noreferrer">プライバシーポリシー</a></span></p>
<p style="text-align: center;"><span style="color: #ffffff;"><span style="font-size: 8pt;">Copyright - Norifumi Nakazono, 2020 All Rights Reserved.</span></span></p>
</td>
</tr>
</tbody>
</table>
</div>
以上です。
どうぞ、お気軽にお使いください🙇
Colorful(カラフル)のご購入はこちら
LPテンプレートクリエイティブパック「Colorful(カラフル)」 |最短3分で制作可能なLP(ランディングページ)がつくれます
最短3分でワンタッチ操作+成約率を上げる36種類以上の機能を兼ね備えたLP(ランディングページ)のテンプレート
更新情報:2020年4月27日
僕がカラフルで使用するCSSは、下記記事を参考にどうぞ。すべて公開しています🙇
【LPテンプレート】カラフルで使用する、CSSを全部公開します
本記事では、LPテンプレ「カラフル」で僕が使用するCSSをそのまま公開します。美しくLPを制作できるかどうかはCSSのテクニックが大切です。といっても、僕が使用するCSSは厳選したものしかないので、わりとシンプルかなと思います。カラフル愛用者のために参考になればと思います。
こちらから確認することができます↓
こちらから受け取ることができます↓
お知らせ:厳選した下記のコンテンツがおすすめです
個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇
無料コンテンツ
- 先生2.0 〜完全在宅&好きなことで稼ぎ毎日感謝される働き方〜
- ブログ記事テンプレート【基本構造】(無料配布)
- 30分の無料相談会&体験レッスン(オンライン開催)
- 【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ
有料コンテンツ
- 【1人で完結】完全在宅「リモートワークビジネス講座」
- 【ネット集客】『01blog Boot Camp』【7日間プログラム】
- 【最短1日で完成】ベース構築キット【早期的に、環境を構築しよう】
- 【1つ目の壁】ブログ100記事パートナー【4ヶ月で乗り越える】
- ブログやメディア運営を学べるオンラインスクール【初心者歓迎】
当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。
どうしても分からなかったり、1人で悩むことがあればご相談ください。
その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ
私は、こんな人です
ゾノ@オンラインティーチャー
オンラインティーチャー養成講師(Kajabi特化型)・メディア運営の基礎・ヒット商品企画。『2〜3歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中!
チップをいただけると、心から喜びます
無料配信【先生2.0】完全在宅&好きなことで稼ぎ毎日感謝される働き方【無料】
人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】