カラフルでランディングページを作る方法【運用歴3年超えてます】

カラフルでランディングページを作る方法について解説した記事のアイキャッチ画像

こんにちは、さんパパです!

読者さん
カラフル(Colorful)を使ってLPを作りたい

今のブログにテーマとして導入すれば使えるの?

できれば初心者っぽさを消した魅力的なページを作りたい

カラフルの導入方法からLPの作り方まで初心者向けに解説して欲しい

こういった疑問にお答えします。

この記事の信頼性
この記事を書いている僕はネットビジネス歴7年、メルマガ歴4年で現在は在宅起業家として子供と遊びながら自由な暮らしをしています。カラフルを使ったランディングページの作成に関しては数十個以上のLPを作り、数百時間もの時間を投資した経験を持っています。

このページを最後まで読むと『このブログで紹介しているLP』と同じものが作れるようになるので、しっかりと読みながら作業してみてください。

広告

カラフルをWordpressに導入する方法

カラフルの導入方法

手順①:サーバーとドメインを取得する

カラフルでランディングページを作るには『サーバー』と『独自ドメイン』を取得し『Wordpress』のインストールが必要です。

まずは『【サラリーマン向け】副業ブログの始め方を簡単解説←パパでもできます』を参考にワードプレスのインストールまで進めておきましょう。

尚、カラフルは既存のブログにインストールしても使えないため、今のブログを運用しながらカラフルでランディングページを作る場合は『新たに独自ドメインの取得とWordpressのインストールが必要』になります(レンタルサーバーに関しては既存の物を使えば大丈夫です)

ブログのURLが『https://sanpapa.com/』だとしたらランディングページは『https://sanpapa-lp.com/』といった形で、既存のブログとは別のドメインが必要になるということです。

手順②:クラシックエディタをインストールする

新しいWordpressの導入が終わり、ログインしたら『クラシックエディタ』というプラグインを下記からインストールして有効化します。

プラグインの詳細については『WordPressブログでおすすめのプラグイン【僕も使ってます】』で解説しているのでご覧ください。

手順③:Wordpressにカラフルをインストールする

続いてカラフルをWordpressにインストールしていきますので、購入がすんでいない場合は下記から購入しましょう。

カラフルの購入はこちら
LPテンプレートColorful(カラフル)

購入が完了すると会員専用ページからカラフルをダウンロードできるようになるので、下記をクリックしてダウンロードします。

カラフルの導入方法1

WordPressに戻り、『外観→テーマ』をクリックし、ダウンロードしたカラフルを新規追加して有効化。

カラフルの導入方法2

これでカラフルの導入は完了です。続いてランディングページを作っていきましょう。

カラフルでランディングページを作る方法

今回は僕が使っているLPにMyASPで作ったメルマガ登録フォームを設置する方法について解説します。

作成するランディングページ
ランディングページの見本

手順①:固定ページ→新規追加でタイトルを決める

カラフルを使ったランディングページは固定ページで作っていくため『固定ページ→新規追加』で新しいページを開きます。

続いてランディングページのタイトルを決めていきますが、今回は『練習用ランディングページ』とします。

カラフルを使ってランディングページを作る方法1

手順②:冒頭部分のメッセージを作る

続いてランディングページ最上部のメッセージを作っていきます。

カラフルを使ってランディングページを作る方法2

上記を作るには『カスタムボタン→サブヘッド白文字』をクリック。

カラフルを使ってランディングページを作る方法3

すると赤背景に白文字のテンプレートを出てくるので、文字サイズを24にしてから好きな文章を書いていけばOKです。

カラフルを使ってランディングページを作る方法4

手順③:画像を挿入する

続いて画像を挿入します。

カラフルを使ってランディングページを作る方法5

画像に関しては自分のテーマに合ったものを作成すればOKで、挿入の仕方はブログと同じです。

『メディアを追加→ファイルをアップロード→固定ページに挿入』しましょう。

カラフルを使ってランディングページを作る方法6

これで最初に作ったヘッダーの文字下に画像が挿入されたと思いますが、横に余白が残っていると思うので目一杯の大きさに広げましょう。

カラフルを使ってランディングページを作る方法10

まずは挿入した画像の上で右クリックし、鉛筆マークをクリックします。

カラフルを使ってランディングページを作る方法7

すると『画像CSSクラス』と書かれた余白が出てくるので『wide』と入力して更新をクリックします。

カラフルを使ってランディングページを作る方法8

これで画像が横幅一杯に広がり、左右の余白が消えるので下記の状態になると思います。

カラフルを使ってランディングページを作る方法9

手順④:メルマガ登録フォームを埋め込む

続いてMyASPで作ったシナリオのメルマガ登録フォームをランディングページに埋め込んできます。

※MyASPを使ってステップメールのシナリオを作る方法は『【MyASP】ステップメールの作り方【設定後は放置可能です】』で解説しています。

まずは『カスタムボタン→大フォーム』をクリックしてメルマガ登録フォームを埋め込みます。

カラフルを使ってランディングページを作る方法11

続いてステップメールの記事で作成した『ブログステップメール』の画面を開き『登録項目』をクリック。

カラフルを使ってランディングページを作る方法12

『性』の部分を『お名前』に変更して必須にチェックし、『名』の部分にあるチェックマークを外して『変更する』をクリック。

カラフルを使ってランディングページを作る方法13

次に『登録フォームタグの発行(HTML)』をクリックして、表示されたコードをコピーします。

カラフルを使ってランディングページを作る方法14
カラフルを使ってランディングページを作る方法15

タグをコピーしたらメモ帳などに貼り付け『下記のタグ』をそれぞれコピーします。

カラフルを使ってランディングページを作る方法16

そしたらランディングページの作成画面に戻り『テキスト』をクリック。

カラフルを使ってランディングページを作る方法17

下記の部分を先ほどコピーしたタグで上書きします。

カラフルを使ってランディングページを作る方法18
カラフルを使ってランディングページを作る方法19

これでMyASPで作ったシナリオのメルマガ登録フォームとカラフルで作ったランディングページが連動できるようになるため、このページで登録があると自動的にステップメールが読者さんに届くようになります。

あとはブログと同じように文章を書いていくだけ

というわけでカラフルでランディングページを作る方法についてのお話しでした。

ここまで来たら後はブログと同じように文章を書いていけばOKですし、メルマガ登録フォームを複数設置する場合は上記で作ったものをコピペすれば一瞬で終わります。

カラフルを使ってランディングページを作る方法20

ランディングページは読者さんを集めるために必須ですので、まずはカラフルを使って僕のLPを完コピするといいと思います。

■成果の出ているものを真似する

■作業の方法を理解する

■オリジナルなものを作る

成功への近道は上記の順番ですので、まずはご自身でランディングページを作るスキルを身につけ、それから好きなランディングページに仕上げていきましょう^^

カラフルの購入はこちら
LPテンプレートColorful(カラフル)

尚、ランディングページに書くべき要素については別の記事で詳しく解説しますね^^

それではまた!

3人の子供育てながら脱サラするまでの実話物語です

コロナ不況に立ち向かう唯一の手段です

2020年6月現在、新型コロナウイルスの流行により、世界はかつてないほどの経済危機に陥っています。

外出自粛、イベントの自粛要請、パチンコ屋の営業騒動、オリンピックの延期など、たった数ヶ月の間で多くの企業が経営不振の危機となり、いまだにその収束は終わりが見えません。

そんな中、僕らに与えられた選択肢は2つです。

選択肢①:景気の回復や会社がつぶれないように願いながら、今まで通り満員電車に乗り、コロナへの感染リスクに怯えながら毎日会社に行く。

選択肢②:会社の倒産リスク、電車等での感染リスクをゼロにするため、給料に変わる安定した収入源を在宅で稼げるよう個人で稼ぐスキルを蓄える。

今すぐに結果を出すのは難しいですが、コロナによって不況が続く未来が見える中、今まで通り会社に通って帰宅するだけの日々にはリスクしかありません。

これは会社の給料で今の生活を維持しつつ、きたる未来に向けて備えておくことが求められる時代に突入したということです。

僕は30歳の時に将来への不安を感じ、約4年サラリーマンパパをしながら副業として知識を蓄え、脱サラすることに成功しました。

たった4年、コソコソと副業しただけで残り40年近くの人生が自由になれるのです。

僕は3人も子供がいたので時間的不利が生じて4年もかかりましたが、独身の方や子供が僕より少ない方はもっと早く達成できると思います。

以下に僕が副業時代に実践したノウハウや学習した動画などをまとめたプレゼントを用意したので、1度、手に取ってみてください。

あなたがコロナ騒動で今の暮らしにや家族の将来に少しでもリスクを感じたのであれば、その問題の解決に役立つはずです。

記事が役に立ったらシェアしてね^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です