カラフルでランディングページを作る方法【運用歴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(カラフル)

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

それではまた!

【期間限定】無料コンサルティング始めました

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

コメントを残す

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

ABOUT US

30代起業家&3児のパパ。得意分野はブログを中心とした不労所得の構築。中小企業に10年勤務▶️副業ブログで月収70万突破▶️転勤内示を機に34歳でセミリタイア→起業後の最高月収は500万。信念は『人生楽しんでナンボ』。仕事はソコソコにして自分の好きなことを飽きるまでやり尽くす人生を手に入れたい人に向けて自信の経験談を綴っています。 詳しいプロフィールはこちら