スモール起業ビルダー・ZONOのブログ

【LPテンプレート】カラフルで作成したソースコードをそのまま公開

DESIGN TOOL

こんにちは、ゾノです。

ちょっと大胆かもですが、「ブログ勉強会の募集ページ」で使用するランディングページのソースコードをそのまま公開します。

あまりゴチャゴチャさせずにシンプルにLPを作りたい人は、ぜひ参考にしてみてください。

制作環境

WordPressテーマ「LPテンプレートクリエイティブパック「Colorful(カラフル)」」を使用です。導入をご検討の場合は、ぜひこの機会にどうぞ。

キャッチコピーが、「最短3分パズル感覚でつくれるWordPressテーマ型のLP(ランディングページ)テンプレート」のとおりで、真剣に使いやすいので、心からおすすめです。

Colorful(カラフル)のご購入はこちら

【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>
&nbsp;

&nbsp;

こんにちは、ゾノです。

&nbsp;

僕は、昨年6月に立ち上げた「<a href="https://01blog.org/"><strong>01blog(ゼロイチブログ)</strong></a>」の月間PVが、約7万ほどで安定し、ライターも雇わず、デザイナーも雇わず、完全に1人でブログ運営をしております。

&nbsp;

&nbsp;
<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>
&nbsp;

&nbsp;

<strong>今日はあなたに、超現実的でツマラナイ話をします。</strong>

&nbsp;

<span style="color: #ff0000;"><strong><span style="background-color: #ffff99;">ただ、このツマラナイ話に共感できる人は、今後結果を出していく人だろうな、、と思いつつ、執筆していきます。</span></strong></span>

&nbsp;

&nbsp;

<strong>その前に、ざっくりとですが、僕のSEO実績としてはこんなになっております。</strong>

&nbsp;
<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>
&nbsp;

ご覧のように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>
&nbsp;

では、さっそく本題です。

&nbsp;

&nbsp;

<span style="background-color: #ffff99;"><strong>最初に言っておきますが下記のことを言っているようでは、残念ながらブログで稼いでいくのはシンドイということをご理解ください。</strong></span>

&nbsp;

&nbsp;
<ul class="List-chk-A_3">
 	<li><strong>私はブログ初心者です…</strong></li>
 	<li><strong>始めたてなので、よろしくお願いします…</strong></li>
 	<li><strong>右も左も分からず、困っています…</strong></li>
</ul>
&nbsp;
<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>
&nbsp;

&nbsp;

<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" />

&nbsp;

<span style="background-color: #ffff99;"><strong>ブログで結果がなかなか出ない人の特徴の1つに、<span style="color: #ff0000;">「ブログ に仕事意識を持っていない」</span>という大きな問題があります。</strong></span>

&nbsp;

はい、、ブログをなめている人があまりにも多いのです。

&nbsp;

&nbsp;

人生の99.9%をブログに魂を込めている僕からすると、ゴツンとゲンコツしたいレベルの人が多いわけです。

&nbsp;

&nbsp;
<ul class="List-chk-A_3">
 	<li><strong>ブログ始めた時点で、立派なブロガーです</strong></li>
 	<li><strong>始めたてでも、胸を張って立ち振る舞う</strong></li>
 	<li><strong>正々堂々と、自信を持つことから始める</strong></li>
</ul>
&nbsp;

&nbsp;

<span style="text-decoration: underline;"><strong><span style="font-size: 18px;">「私、、初心者なんです……」</span></strong></span>

&nbsp;

<span style="font-size: 18px;">とか、自信なさそうに言っている人に、お仕事を頼みますか?</span>

&nbsp;

そんなサイトのアフィリエイトリンクをクリックしようと思いますか?

&nbsp;

&nbsp;

たぶんですが、仕事は受注できないし、アフィリエイトをやってもそんなに稼げないですよね。

&nbsp;

&nbsp;
<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>

&nbsp;
<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>
&nbsp;

&nbsp;

<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" />

&nbsp;

僕は、料理がまったくできません。

&nbsp;

カレーライスの作り方も、サッパリのレベルです。

&nbsp;

&nbsp;

これをブログに置き換えて考えると、こんな感じです。

&nbsp;

&nbsp;

<span style="text-decoration: underline;"><span style="font-size: 14pt;"><strong>カレーを盛り付ける=ブログを書く</strong></span></span>

&nbsp;

はい、、<strong>この状態にもなれていない人が、はっきり言って多すぎなんです。</strong>

&nbsp;

&nbsp;

<strong><span style="font-size: 18px; background-color: #ffff99;">かなりぶっちゃけて言えば、最低限の器を用意して、盛り付けて、食べることができればオッケイなんですよ。</span></strong>

&nbsp;

&nbsp;

なので、僕の勉強会では「HTMLとは…」とか「CSSとは…」なんてところからはやりません。

&nbsp;

なぜなら、<strong>あなたの狙うセンターピンは「ブログで稼ぐ」ことだからです。</strong>

&nbsp;

概論チックに学んでも、意味無しですm(_ _)m

&nbsp;

&nbsp;

<strong>一気に、ブログで稼ぐために「最低限必要なスキル」を習得しちゃいましょう。</strong>

&nbsp;

&nbsp;
<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>

&nbsp;
<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>
&nbsp;

&nbsp;

<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" />

&nbsp;

ブログやメディア運営のことを学べる合計120分の「稼げるブログ勉強会(無料)」です。

&nbsp;

<span style="background-color: #ffff99;"><strong>オンライン勉強会なので、時間と場所には余裕を持ってご参加いただけます。</strong></span>

&nbsp;

&nbsp;

<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>

&nbsp;

&nbsp;

<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>
&nbsp;
<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>

&nbsp;
<table class="subHeadParts001" style="background-color: #103656;">
<tbody>
<tr>
<td>
<div class="subHeadParts001_container">

ブログ勉強会の<span style="color: #ffff99;">時間帯</span>にも
こだわりを持っています

</div></td>
</tr>
</tbody>
</table>
&nbsp;

&nbsp;

<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" />

&nbsp;

上記日程の時間帯に「あれ、、朝の5時???」と思った方もいらっしゃるかなと思います。

&nbsp;

<strong>平日の日中はお仕事で忙しい毎日で、週末は週末で家族と過ごす時間を大切にしたいですよね。</strong>

&nbsp;

&nbsp;

という思いから、開催時間は下記2パターンです。

&nbsp;

&nbsp;

<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>

&nbsp;

<strong><span style="text-decoration: underline;">「夜、子どもを寝かしつけて落ち着いた環境で…」</span></strong>

&nbsp;

というニーズにお答えできるように、上記の時間帯で開催しております。

&nbsp;

また、<span style="background-color: #ffff99;"><strong>オンライン勉強会なので、時間と場所には余裕を持ってご参加いただけます。</strong></span>

&nbsp;

どうぞ、お気軽にご参加くださいませ&#x1f647;&#x200d;

&nbsp;
<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>

&nbsp;

それでは、勉強会当日に、お会いできますことを心より楽しみにしています&#x1f647;&#x200d;

&nbsp;
<p style="text-align: right;">01blog「ゼロイチブログ」
Norifumi Nakazono</p>
&nbsp;
<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>
&nbsp;

</div>

以上です。

どうぞ、お気軽にお使いください🙇‍

Colorful(カラフル)のご購入はこちら

更新情報:2020年4月27日

僕がカラフルで使用するCSSは、下記記事を参考にどうぞ。すべて公開しています🙇‍

稼げる「無料ブログ勉強会」

朝5時〜 or 夜9時〜の時間帯で「ブログ運営の基礎」が無料で学べます。「Zoom」を利用して開催しますので、ご自宅からご参加可能です😌

参加者限定の特典があります

参加特典は「60分の個別相談」&「980円で販売しているブログ企画室に無料ご招待」なので、お得感満載で結構学べると思います。

嬉しいお声をいただいております

5時起床。今日は朝からオンラインでホームページ作りの勉強会でした。サイト構築にHTMLやCSSの基礎理解は必須。仕組みに慣れればそんなに難しくないです。固定費はサーバー代とドメイン代ぐらいでそんなにお金もかかりません。無料で有益でここまで高品質な勉強会って中々ないんじゃないかな🙇‍
朝5時。しかも人多い。ゾノさんはZoomの扱いがすごいスマート。全てに無駄がない。WordPressのcssの変更の仕方が参考になりました。
  • 7月17日㈮ 5:00〜7:00【残り1名】
  • 7月17日㈮ 21:00〜23:00【残り2名】
  • 7月18日㈯ 5:00〜7:00【残り2名】
  • 7月18日㈯ 21:00〜23:00【残り1名】
» 今すぐ「無料ブログ勉強会」に予約する

お知らせ:厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。

どうしても分からなかったり、1人で悩むことがあればご相談ください。

その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

チップをいただけると、心から喜びます


僕は、こんな人です

ゾノ
当ブログの筆者。4年間勤めた高校教師を退職後にITベンチャーに転職し、2016年に独立。「外出せずに学べるパソコン教室」を運営し、ブログ初心者のサポートに取り組んでいる。生徒数は累計160名。ブログ初心者から抜け出す方法や、不登校などの教育問題について発信している。
» プロフィール詳細はこちら

人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

人気記事【持ち物公開】場所を問わないノマドワーカーのバックパックLIFE