ランディングページ作成ができる「LP Designer 」テンプレートセット

2014/3/9 テンプレートが大幅バージョンアップ!

更に便利な機能を追加し、LP Designerが大幅にバージョンアップしました!

レイアウトの変更が、驚くほど簡単になりました。もう、テンプレートファイルでコードを編集する必要はありません。

それに加えて、今回からマニュアルが動画になりました。実際に操作している動画と、解説入りの動画マニュアルで、細かな操作もわかりやすくなりました。

動画マニュアル http://lp-designer.net

LP Designerのインストールとデザインの正常化




プラグインのインストールと説明




カスタマイズの説明と設定





ウィジェットエリアの説明と設定




ウィジェットの説明と設定




テーマオプションの説明と設定




ランディングページ作成の説明




全画面での動画再生

最新情報

2013年11月21日

2カラムテンプレート サイドシャドウバージョン(LP Designer2CR02D)と3カラムテンプレート サイドシャドウバージョン(LP Designer3CR02D)のバージョンアップを行いました。

2013年11月03日

ミニマルデザインテンプレート(LP Designer2CR02mini)を追加しました。

2013年10月31日

2カラムテンプレート(LP Designer2CR02)と3カラムテンプレート(LP Designer3CR02)のバージョンアップを行いました。



ミニマルデザイン
ランディンページ作成ができるワードプレス用レスポンシブテンプレート「LP Designer」に、新しくミニマルデザイン(Minimal Design)のテンプレートが加わりました。

そして、「テンプレートセット」にも加わります!

ミニマルデザインの「LP Designer」のデモサイトをご用意しましたので、ぜひご覧ください!

ミニマルデザイン


10月末に、2カラムテンプレートと3カラムテンプレートもバージョンアップし、一段と使いやすくなりました。詳しくは、各テンプレートのセールスページをご覧ください。

3カラムバージョンの詳細はこちら → http://tips-web.biz/lpdesigner3c01

2カラムバージョンの詳細はこちら → http://tips-web.biz/2col_lpdesigner





LP Designer テンプレートセットが登場!

通常のホームページやブログの作成ができて、更にランディングページの作成機能が付いた、ワードプレス用テンプレート「LP Designer」にテンプレートセットが登場しました!

今のところ、2カラムテンプレートが4種類、3カラムテンプレートが3種類の、合計7種類のテンプレートがセットになっています。

これに、あと4つのテンプレートをラインナップに追加していきます。

追加するテンプレートは、購入者の方の希望を取り入れながら、テンプレートを作成していくという、これまでに誰もやろうとしなかった手法をとっていきます。

なぜ、そのようなことをするのか?

答えは簡単です。使う側の意見を取り入れた方が、より実践で使えるテンプレートができるからです。

但し、ベースのテンプレートが必要です。何もないところから、希望を出すのは難しいものです。

その為に、これまでに実績のあるデザイン、シンプルなデザイン、新たなデザインのテンプレート、そして、それぞれ2カラムバージョンと3カラムバージョンをご用意し、合計6種類からのスタートです。(現在7種類です。)

早く、「こんなテンプレートが欲しい!」と言うことができれば、まさしく自分が欲しかったテンプレートを手にすることができるかもしれません。

そして、そのテンプレートを使って、ビジネスを始めることも、今のビジネスを更に加速させることもできるかもしれません。

自己満足のテンプレートはつまらない

私は、自己満足のテンプレートを、世に送り出す気は全くありません。そんなことをしても、楽しくありませんからね。

自己満足のテンプレートではなく、使えるテンプレート稼ぐことができるテンプレートを作ることに意味があると思っています。

その為には、多くの方の意見を取り入れた方が、その完成度は当然高くなるはずです。

そんなテンプレートを使いたいですよね?僕だって使いたいです!

アフィリエイトを楽しく!

アフィリエイトは、皆さん、様々な分野で活躍していらっしゃいます。それぞれに得意分野があるんですね。

長くやっていると、売れるカテゴリーなんかもわかるようです。この「長くやっていると」が、少しだけ重要なことのようです。

では、長くやり続けるには・・・。やっぱり、楽しくないと続かないんです。

私はそう思うんです。正しいことよりも、楽しいこと。型にはまらず、いろんなことにチャレンジしてみる。

そうすると、面白いものができちゃったり、思わぬ効果が現れたりするんですね。

だから、アフィリエイトも楽しくやりたい。楽しくやれるテンプレートを作りたいと思うんです。

こんにちは、テンプレートを作っているナカジです

ナカジ私はちょっと変わっています。

本業は、お店や会社のホームページを作成したり、パソコンの修理やメンテナンス、様々な設定などを行なっています。

そんな中、ホームページを簡単に作れるテンプレートを販売したり、カスタマイズ方法を教えたりしているわけです。

時々、「そんなことしていると、仕事が減るんじゃないの?」なんて言われたりします。でも、どうやら逆のようです。最近、どうも忙しいのです。テンプレート作成も本業も。

多分、一般的には、「ノウハウは教えない」というのが正しいのかもしれません。しかし、私は正しいではなく、楽しいを選ぶ人間なのです。

お陰様で、テンプレートを販売するようになり、全国の方と知り合いになることができ、しかも私が知らないようなことを沢山教えてくれます。楽しい方を選んだ結果、こうなったということですね。

だから私は、ワードプレスのテンプレートを作りながら、ネットビジネスやアフィリエイトで、ワードプレスを使うと楽しいよ!私が作ったテンプレートを使うと、もっと楽しいよ!ということを、これからも伝えて行きます。

そんな私が作った「LP Designer」を使って、ネットビジネスやアフィリエイトを始めてみませんか?そして、更に稼げるテンプレート開発に加わりませんか?絶対、楽しいですよ!


テンプレートデザイン

3カラムテンプレート(LP Designer 3CR02)

3cr02_720
3カラムテンプレート


3カラムテンプレート サイドシャドウバージョン(LP Designer 3CR02D)

3cr02d_720
3カラムテンプレート


3カラムテンプレート 画像なしシンプルバージョン(LP Designer 3CR01S)

LP Designer 3CR01S

2カラムテンプレート(LP Designer 2CR02)

※図は右サイドバーですが、設定で簡単に左サイドバーにも変更できます。
2cr02_720
2カラムテンプレート


2カラムテンプレート サイドシャドウバージョン(LP Designer 2CR02D)

※図は右サイドバーですが、設定で簡単に左サイドバーにも変更できます。
2cr02d_720
2カラムテンプレート


2カラムテンプレート シンプルバージョン(LP Designer 2CR01S)

※図は右サイドバーですが、設定で簡単に左サイドバーにも変更できます。
LP Designer 2CR01S

2カラムテンプレート ブログでアドセンスバージョン(LP Designer add) サイドバー左右切り替えOK

LP Designer add

以上が、テンプレートトップページのスクリーンショットです。

LP Designerバージョンアップ


ランディングページが重要視
ランディングページ LP Designer開発



レスポンシブWEBデザイン

レスポンシブWEBデザインとは、パソコン用、タブレット用、スマートフォン用に自動的に、しかも最適に表示されるサイトデザインのことをいいます。

今回のバージョンアップで、LP Designerは、このレスポンシブWEBデザインに対応しました。よって、LP Designerを使用することで、スマートフォン用のサイトを別に起こしたり、スマートホン用のテンプレートを作成する必要もありません。

全ては、LP Designerが解決してくれます!


タブレット・スマートフォンタブレット用ページの全体画像はコチラ
スマートフォン用ページの全体画像はコチラ


それだけではありません!

1カラムページ(ランディングページ)

このテンプレートの一番の目玉である「1カラムページ」が、ランディングページに使用するページになります。

これまでも、一般のワードプレスのテンプレートに「1カラムページ」を作成する機能はありました。しかし、ヘッダー部分とフッター部分を共通で使用しているため、1カラムページにヘッダー画像が表示されたり、ヘッダーナビゲーションやフッターナビゲーションなどが表示されてしまいます。

これでは、ランディングページが台無しになってしまいます。

そういう事もあり、ワードプレスはブログやホームページ用としてのみ使用され、ランディングページの作成には別のソフトを使用していました。

しかし、今回ご紹介するテンプレートでは、1カラム固定ページを真っ白にしました。どういうことかといいますと、ヘッダー画像も、ナビゲーションも表示されていないということです。

これで、思う存分、ランディングページの作成ができるようになったわけです。


そして、今回のバージョンアップで、これまでランディングページの作成は「固定ページ」のみでしたが、要望が多かった「投稿ページ」でもランディングページの作成ができるようになりました。

しかも、新しく機能を追加することで、もっとデザインに凝ったランディングページの作成が可能になりました!


ヘッダー画像の設定

ヘッダー画像の設定ランディングページには、必ずといっていいほどある「大きなヘッダー画像」。今回は、ヘッダー画像のアップロード機能を追加しました。

コンテンツ枠いっぱいのサイズ幅で画像を作成し、ヘッダー画像としてアップロードすると、コンテンツ幅にピッタリの画像が配置されます。このページもその機能を活用して作成しています。

ヘッダー画像の背景の色と、ページの背景の色を合わせることで、ページ全体が一体化したランディングページが完成します。

※左図はヘッダー画像をアップロードした状態です。


コンテンツサイド装飾

コンテンツのサイドの装飾の設定を追加しました。設定は、「シャドウ」、「ライン」、「なし」の3種類です。
ページごとに設定を変えることができますので、ページの雰囲気に合わせて設定をしてください。

コンテンツサイド装飾

コンテンツエリア背景

コンテンツエリアの背景の設定が可能になりました。背景は、「」の設定と「画像」の設定が可能です。

」の設定は、カラーパレットが表示されますので、簡単に、しかも実際の色を確認しながら設定ができます。

コンテンツエリア背

画像」の設定は、画像のアップロード機能が付いていますので、簡単に設定することが可能です。コンテンツエリアの背景画像は、縦方向にリピートされます。

コンテンツエリア背景

ページ背景

これまでのLP Designerにもランディングページの背景カラーを設定する機能はありました。しかし、その設定は、全てのランディングページの背景カラーが同じになるというデメリットも有りました。

1ページのみのランディングページでしたら、特に問題はないのですが、複数のランディングページを作成したい場合は、できればページごとに設定したい場合も出てきます。

そこで今回のバージョンアップでは、各ページに背景カラーの設定を設けました。しかも、背景カラーだけではなく、背景画像の設定もできるようにしました。

設定方法は、「コンテンツエリア背景」の設定とほぼ同じです。画像背景に関しては、アップロードした画像をリピートして表示する設定になっています。


タイトルバーカラーの設定

各ランディングページごとに、H2~H5のタイトルバーのボーダーカラーの設定ができます。設定は、背景色などの設定と同じく、カラーパレットで設定できるので簡単です。

タイトルバーカラー設定

左メニュー2カラムページ ※3カラムテンプレートのみ

左メニュー2カラムページは、1カラムページとは違い、通常のページと同じようにヘッダーやフッターが表示されます。

ネットビジネスやアフィリエイトに使用するテンプレートは、トップページに多くの情報を表示したいので、3カラムのテンプレートを使用することが多いようです。

しかし3カラムになると、どうしても記事を表示する部分が狭くなってしまいます。そうなると、当然、貼り付ける画像も小さくなってしまいます。

そんな時は、投稿時に「2カラムページ」を選択することで、2カラムページを作成することができます。

左メニュー2カラムページ
記事の表示スペースが、かなり違うのを確認できると思います。2カラムページになると、右メニューが無くなるので220pxほど広くなります。

これでしたら、ちょっと大きめの画像も難なく表示することができます。使い方によって、簡単に3カラムページにしたり、2カラムページにすることができます。


サイドバーは、管理画面で簡単に左右切り替え可能 ※2カラムテンプレートのみ

サイドバーは、管理画面で左右の切り替えが簡単にできます。

サイトの運営途中での切り替えも、全く問題ありません。また、切り替える前に、プレビューでの確認もできます。

サイドバー切り替え
サイドバー切り替え

サイドバナー 3個

これまでのLP Designerのサイドバナーは「画像」でした。

画像の方が見栄えは良いですが、画像にしてしまうと、画像編集ソフトが必要になり、初めて自分のサイトを作ろうとしている方にとって、更に画像編集ソフトの勉強や作成の手間がかかり、サイト完成までに時間がかかってしまいます。

サイドバナーそこで、新しいLP Designerでは、画像バナーではなく、CSSでバナーを作成し、テキストを管理画面から簡単に入力できるようにしました。

リンク先URLは、これまでと同じように、管理画面から簡単に入力できます。

サイドバナー左図は、サイドバナーの設定画面です。

右側にプレビューが表示されますので、実際のページを確認しながら設定ができ、非常に便利です。


トップページメインバナー 3個

これまでのLP Designerのトップページメインバナーも、サイドバナーと同じく「画像」でした。これらのバナー作成においても、作成のしやすさと、作成時間短縮のために、画像とテキストを別にしました。

トップページメインバナー画像に文字をのせる作業が上手くできない方は、画像サイズのみを合わせて作成し、文字は管理画面からテキストとして入力することで、簡単にメインバナーを作成することができます。

左図では、青枠の部分が画像で、赤枠の部分がテキストです。

トップページメインバナー左図は、トップページメインバナーの設定画面です。

リンクURLは、リンク先のURLを入力します。

画像URLは、一旦ワードプレスの機能である「メディア」の新規追加からアップロードして、そのURLをコピーして貼り付けます。

テキストは、リンク先の名称として入力します。

これでトップページメインバナーは完成します。


ウィジェット

通常のテンプレートにあるウィジェットは、サイドウィジェットとフッターウィジェットが一般的です。

一般的なテンプレートで、ウィジェットに対応しているのは下図の赤枠の部分です。LP Designerは、それに加え、青枠の部分もウィジェットに対応させました。

3カラムテンプレート
ウィジェット
2カラムテンプレート
ウィジェット

サイドバー用の新着記事一覧ウィジェット

サイドウィジェト 記事一覧トップページ以外のサイドバーにのみ表示するウィジェットエリアを設けております。

ここには、左図のような、サイドバーに「新着記事一覧」を表示するウィジェットを追加することができます。

アイキャッチ画像を設定していると、その画像も一緒に表示しますので、クリック率が高くなります。


ロゴ画像

ロゴ画像ロゴ画像の設定は、サイドバナーやメインバナーと同じ設定画面で行います。

ロゴ画像は、画像URLのみの設定です。画像URLは、一旦ワードプレスの機能である「メディア」の新規追加からアップロードして、そのURLをコピーして貼り付けます。


サイトカラー

一般的なテーマは、色違いのテンプレートをその数だけ用意します。12色であれば、12個のテンプレートが用意されます。

しかし、LP Designerは、管理画面で好きなサイトカラーに簡単に変更できます。

サイトカラーカラーパレットを使用しますので、サイトカラーは無限です。また、微妙な色の設定も思いのままです。

テーマカスタマイザーというワードプレスの標準機能にサイトカラーの設定を追加していますので、プレビューを見ながらの設定が可能です。

色が変わるのは、ページ最上部のライン、メイン画像の背景、タイトルバーのラインなどです。これらの色が変わると、サイトの印象がガラっと変わります。


サイトカラー

リンクカラー

サイト内のテキストリンクのカラーを管理画面で変更できます。

設定箇所はサイトカラーの設定と同じで、カラーパレットで設定します。また、プレビューを見ながら設定ができますので、サイトカラーとのバランスを見ながら調整することができます。

これは、とても便利な機能です。


リンクホバーカラー

テキストリンクにカーソルを載せた時に変わる色を設定することができます。

この設定も、サイトカラーや、リンクカラーと同じように、管理画面のカラーパレットで設定します。リンクカラーと同じく、プレビューを見ながら設定ができます。


カスタムメニュー(グローバルメニュー)

カスタムメニューは、ワードプレスの標準機能です。

カスタムメニューとは、固定ページやカテゴリーや投稿記事などを織り交ぜたオリジナルのメニュー作成し、ウィジェットとして、サイドバーウィジェトやフッターウィジェットに追加することができる機能です。

また、ヘッダーナビゲーション(グローバルメニュー)にカスタムメニューを対応させれば、ヘッダーナビゲーションも同じように、メニューの内容を自由に設定できます。また、サブメニュープルダウンにも対応しています。

ヘッダーナビゲーション

カスタムヘッダー ※シンプルバージョンにはありません

カスタムヘッダーとは、トップページのヘッダーに表示されている、ヘッダー画像を管理画面から変更できる機能です。

ヘッダー画像
設定は、管理画面のカスタムヘッダーで行います。パソコン内の画像を選択し、アップロードするだけで、メイン画像の変更ができます。

カスタムヘッダー

テーマオプション アドセンスコード貼り付け ※LP Designer add専用

2013年3月22日に新たに追加したテンプレートです。

このテンプレートは、ブログでアドセンスアフィリエイトを行うのに最適なテンプレートです。予め、アドセンスの広告を表示する場所を決め、管理画面内に「テーマオプション」のページを用意していますので、そこにアドセンスのコードを貼り付けるだけでOKというテンプレートです。

ベースのテンプレートは「LP Designer 2CR01S」です。

レスポンシブWEBデザイン対応ということを活かし、パソコン用の広告と、スマートフォン用の広告を別々に設定できるようにしています。当然、パソコンで見た場合と、スマートフォンで見た場合の広告が変わります。

広告の表示箇所は、
・ヘッダーの右側(スマートフォンは非表示)
・サイドバーの上
・投稿記事の下

の3箇所です。

下図は、アドセンスのコードを入力する「テーマオプション」のページです。
テーマオプション
表示する広告は、アドセンスに限らず、他の広告バナーでもいいですし、独自で作成したバナーでもOKです。



以上が、LP Designerの代表的な機能です。

今回のバージョンアップで新しく加わった「レスポンシブWEBデザイン」対応と、ランディングページ作成機能の強化が大きな進化です。

LP Designerは、独自のブログやホームページを運営しながら、その中でランディングページを作成できるという、他のテンプレートには無い機能を持っています。

もう、新たにランディングページを作成する為だけのソフトを購入する必要はありません。


既に、ワードプレスを使用している方は、テンプレートを変更するだけで、パソコン、タブレット、スマートフォンに対応するサイトに変わり、ランディングページが作成できる高機能なテンプレートに変わります。

また、複数のサイトを運営している方は、LP Designerを使用し、サイトカラーとヘッダー画像などを変更するだけで、全く別のサイトが出来上がります。もう、いくつもテンプレートを購入する必要はありません。


これからワードプレスを使用される方にも、超オススメのテンプレートです。

全ての作業を管理画面からできるため、すぐにブログやホームページの運営に取り掛かれます。


今回は、テンプレートファイルに加え、インストール&設定マニュアルをお付け致します。また、90日間の無料メールサポートもお付けしますので、全ての方が、きちんと設定でき、ブログやホームページを運営していくところまで見届けることができると思います。

また、サポートサイトも運営しておりますので、購入者の方は、こちらでもサポートを受けることができます。


LP Dsigner使用者の生の声をご紹介!


それではここで、実際にLP Designerを使用して、成果を上げていらっしゃる方から届いた「生の声」をご紹介します。

アマツカゼ 様「設置翌日、アクセスが約3倍に膨れ上がったんです!」

amatsukaze運営サイト:http://usccocks.com

お世話になります。

アフィリエイトでサイト・ブログ運営をしている、アマツカゼと申します。今回、LP Designerを使用して感じた、率直な感想レビューをお送りさせて頂きます。

私が、LP Designerを購入した理由は、

■デザイン性が気に入ったこと。
■本格的なランディングページ作成が可能なこと。

この2点です。

以前からワードプレスを使用しており、特に1カラムページでも、ヘッダーやフッターがそのまま残ってしまう事に不満を感じていました。

今までは、メインサイト・ブログとは、別のソフトを使っていたのです。しかし、LP Designerの本格的なランディングページ作成機能により、同じワードプレスで、ヘッダーやフッターが残らなくなった事で、この不満が一気に解決しました。この事は、私にとって大きな喜びだったのですが、実は私がLP Designerで、特に、一番感銘を受けたことは、これらの購入理由とは別の形で現れたのです。

なんと、LP Designer設置翌日に、アクセスが約3倍に膨れ上がったんです!アクセス解析を見た時は、「えっ!何かの間違い!?」って一瞬目を疑いました。でもよくよく見てみると、その理由が判明したのです。

それは、スマートフォンのアクセス数でした。Googleアナリティクスの、モバイルのアクセス数だけで見てみると、設置前日と比較すると、なんと約35倍もアクセス数が増加していたのです。

正直、「こんなのアリ!?」って、今までのアクセスアップの苦労が、走馬灯のように頭の中を駆け巡りました。。。

もちろん、これは、自分のサイト・ブログのジャンルや、様々な要素で、どれだけ反応が変わるかはわかりません。それ以下のアクセスになるかもしれないし、逆にそれ以上になるかもしれません。ただ言えるのは、スマートフォンのアクセスアップの可能性が非常に高まるということです。

LP Designerは、レスポンシブWEBデザイン対応テンプレートです。つまり、スマートフォン・タブレットでも、最適表示が可能となります。

私自身、実は購入時に、この事については、そこまで意識していなかったので、このアクセスアップには正直驚かされました。それまで、何も対応していなかった訳ではなく、スマートフォン用と携帯用のプラグインで、表示対策はしていたのです。それでも、これだけアクセスアップ出来たのは、レスポンシブWEBデザイン対応の威力が、それだけ凄まじいということです。

実際に使ってみた操作性は、直感的操作がしやすいということ。もちろん、マニュアルは完備されているし、90日メールサポートがあるので、安心して設置作業や、構築を進めることが出来ます。

特に感じたのは、このメールサポートの対応が、非常に素晴らしいということです。私自身、自分好みに構築するため、1日に何度もやり取りしたこともあります。その度、的を得た具体的な解答を頂けたし、その対応の早さにも、販売者様の人柄を感じ取ることが出来ました。

私が感銘を受けたことをまとめると、以下の3つです。

■スマートフォン・タブレットユーザーの獲得。
■本格的なランディングページを作成可能。
■対応が素晴らしいメールサポート。

もちろん、LP Designerのメリットはこれだけではありません。しかし、私はこの3つに、特に感銘を受け、思った以上の成果を得られたことに感謝しております。

ワードプレスをやってみたい方や、私と同じ様に既にされていて、テンプレートを変更したい方には、迷わず、LP Designerをオススメします。

私自身が経験して感動したことなので、このテンプレートを設置することで、活路を開かれる方や、更なる飛躍をされる方が、一人でも増えれば嬉しく思います。



LP Designer 教材の内容

動画マニュアル

今回からマニュアルが動画になりました。実際に操作している動画と、解説入りの動画マニュアルで、細かな操作もわかりやすくなりました。

動画マニュアル http://lp-designer.net

ワードプレス用テンプレート LP Designer(ZIPファイル)

・2カラムテンプレートファイル 4個
・3カラムテンプレートファイル 3個

テンプレートファイル本体です。ZIPファイルにしてありますので、ワードプレスの管理画面(ダッシュボード)より、そのままインストールが可能です。

FTPソフトを使用してインストールする場合は、ファイルを解凍してご利用下さい。

購入者特典

・物販アフィリエイトに最適なワードプレス用テンプレート(詳細はこちら
・ボタン画像(それぞれ12色)
「お申込みはこちら」「ご購入はこちら」「メルマガ登録」の文字入りボタンと無地ボタン

・ロールオーバーボタン、角丸シャドウ付き枠(チェックリスト)、角丸シャドウ付き枠(購入者レビュー)HTMLファイル

※購入者特典について詳しくご紹介しています。

LP Designerの動作環境

動作環境

・WordPressバージョン:3.4.1以上
・PHP バージョン :5.2.4 以上
・MySQL バージョン :5.0 以上
・対応ブラウザー:Firefox 7.0以上 / Chrome 14.0以上 / IE8以上

動作確認済みサーバー

・エックスサーバー
・ロリポップ
・ヘテムルサーバー
・さくらインターネット
・お名前.comレンタルサーバー

サポートに関して

・サポート期間はご購入日より90日間とさせていただきます。
 サポートサイトでは、いつでも、いつまでもご質問いただけます。購入後も安心です。
 ※サポートサイトは、購入後にご案内致します。
・回数に制限はございません。
・サポートは、メールにてお願い致します。

現在の購入者特典

特典テンプレート

プラス
今回の特典
ネットビジネスやアフィリエイトでは絶対に必要といわれる「ボタン画像」。

特に「購入」ボタンに関しては、直接売り上げに関係してくる、大変重要なボタンになります。単なる画像による「購入」ボタンよりも、動きのある「購入」ボタンを、多くのサイト運営者は望んでいるようです。

そこで、よく利用されるのが、ロールオーバーを使用した「購入」ボタンです。

注目!!

よく使われるロールオーバーボタンは、スタイルシート(CSS)で、ボタン画像を背景として設定されています。しかし、この方法をとってしまうと、タブレットやスマートフォンでページを見た時に、最適に表示されません。

今回の特典は、タブレットやスマートフォンでも、最適に表示される方法を取り入れました。

下記が、その「ご購入はこちら」のロールオーバーボタンです。カーソルをのせると、青色から赤色に変わります。

button

そうは言っても、サイト作成を始めたばかりの方や、HTMLが苦手な方には、ちょっと敷居が高い作業でもあるようです。

そこで、今月の「LP Designer」の購入者特典は、誰でも簡単に、「ロールオーバーボタン」の設置ができるツールをご用意させていただきました。

しかも、テンプレート内であれば、どこでも設置ができます。サイドバーへの表示もOK、投稿記事内への表示もOKです。しかも、何個設置してもOKです。

ですので、「購入」ボタンをはじめ、「お申込み」ボタンや、「お問い合わせ」ボタン、「メルマガ登録」ボタンなど、何でもOKです。

通常表示のボタン画像と、カーソルをのせた時に表示するボタン画像の、2つの画像さえあれば、あとは簡単にロールオーバーボタンを設置することができます。


今回は、1サイズ(幅500px、高さ100px)ではありますが、「ご購入はこちら」、「お申込みはこちら」、「メルマガ登録」の文字をのせたボタン画像と、文字の無いボタン画像を、サンプルとしてお付け致しました。

色は全部で12色です。

ボタン画像

こんなボタンが欲しい!」というのがあれば、サポートサイトでリクエストすることも可能です。

それでは、ロールオーバーボタンの設置の流れをご紹介しましょう。


1.2種類の画像を用意


まず、通常表示状態でのボタン画像と、カーソルをのせた時に表示するボタン画像の、2種類のボタン画像を用意します。

ここでは、サンプルでお付けしている画像を使用して説明していきます。

ご購入はこちら」ボタンから、通常表示ボタンを「青色」、カーソルをのせた時のボタンを「赤色」にします。

buy_off

ファイル名:0066FF_1.png


buy_on

ファイル名:FF0000_1.png



2.それぞれの画像のファイル名を変更


次に、それぞれの画像のファイル名を変更します。

ファイル名には決め事がありますので、少し注意が必要です。しかし、難しいことではありませんので、ご安心下さい。

その決め事とは、このようなことです。

ファイル名の変更
以上で、画像のファイル名の変更は完了です。


3.2種類の画像をアップロード


ファイル名を変更した画像ファイルを、管理画面のメディアの新規追加からアップロードします。

画像アップロード

アップロードが完了したら、通常表示ボタン画像(ここでは青色)の画像URLをコピーしておきます。

画像URLをコピー

4.ページヘの追加


いよいよ、投稿記事への追加です。

ロールオーバーボタン用のサンプルHTMLをご用意していますので、コピーして、表示したい箇所に貼り付けます。

サンプルHTMLを貼り付ける時は、投稿エディタを「ビジュアル」から「テキスト」に変更しておいて下さい。

テキストエディタ

貼り付けたサンプルHTMLを修正します。修正作業はとても簡単です。

<div class="f_button">
<a href="リンク先URL(http://~)"><img src="画像URL(http://~)" alt="button" class="aligncenter" /></a>
</div>


リンク先URL(http://~)
ボタンをクリックした時に開きたいサイト(ページ)のURLを貼り付けます。

画像URL(http://~)
3でコピーした画像URLを貼り付けます。

「max-width:500px」
表示画像の幅(この画像の幅は500pxなのでそのまま)に修正します。


以上で完了です。ページを保存して、実際のページを表示して動作を確認してみましょう!



いかがでしたか?何か難しい作業はありましたでしょうか?

実際には、ロールオーバーボタンを設置するのは、こんなに簡単には行かないのです。

他のテンプレートで、上記の作業を行ったとしても、ロールオーバーボタンは動作しません。

それは、上記のような簡単な作業のみでロールオーバーボタンが動作するように、予め「LP Designer」にプログラムを組み込んでいるからなのです。


他にも、下記のような「角丸シャドウ枠 チェックリスト」や、「角丸シャドウ付き枠 購入者レビュー」が、すぐに使えるように、テンプレートファイルにコードを追加しておきました。

サンプルHTMLをお付けしておりますので、記事の投稿時に簡単にご使用になれます。

H3タイトルバー

チェックリスト1

チェックリスト1

チェックリスト1

チェックリスト1

チェックリスト1


H4タイトルバー

チェックリスト2

チェックリスト2

チェックリスト2

チェックリスト2

チェックリスト2


H5タイトルバー

チェックリスト3

チェックリスト4

チェックリスト5

チェックリスト6

チェックリスト7


H3タイトルバー

チェックリスト8

チェックリスト9

チェックリスト10

チェックリスト11


テンプレートざんまい 様

購入者レビュー利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。
利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。

利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。
利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。利用者のレビュー紹介。



いかがでしたか?


今回は、サイト作成時に、すぐに活用できるツールをお付け致しました。

特に「ロールオーバーボタン」に関しては、とても簡単に設置できると思います。

もし、これをカスタマイズとして依頼すると、きっと「ウン千円~」は請求されるかもです^^;


ご購入後も、サポートサイトにて、様々な素材を提供していきます。

また、「これぐらいの大きさで、こんな色で、こんな文字を入れたボタン画像が欲しい!」なんてリクエストをしてみると、次の日には、サポートサイトの素材カテゴリーにアップされているかもです^^

出来る限り、リクエストにはお応えしますので、遠慮なくリクエストしてみて下さい。




LP Designer セット

販売価格 13,820円(税込)


LP Designer テンプレートセット
(全7種類)

購入はこちら

決済

更に進化したLP Designerは、きっとあなたのビジネスを加速させる「必須のツール」になることでしょう!


テンプレートざんまい


Copyright© 2016 ランディングページ作成ができる「LP Designer 」テンプレートセット. All rights reserved.