たて長サイトテンプレート216

思い立ったらすぐに作れる
「たて長サイト」のテンプレート216個

セールスレター、LP(ランディングページ)、アフィリエイトページ、etc..などに使えます。


2013年5月、岩手の自室にて
柴田真輔

サンプルサイト

主な背景色のサンプルです。

背景色 サンプルサイト
           サンプル(K)
           サンプル(白)
           サンプル(グレー)
           サンプル(緑)
           サンプル(青)
           サンプル(ピンク)
           サンプル(茶色)

上記のサンプルは、

今回のテンプレートで、実際に作ったページを
画像として表示したモノです。(なので、クリックできません)

製品版では、ページ一番下に表示されている、

  • 特定商取引法に基づく表記
  • プライバシーポリシー

これらは、クリックできます。

サンプルページフッターの法律関連リンクはクリックできます。

(特商法ページなどを作ったら、そのURLをHTMLファイルに書き込むと、簡単にページ一番下にリンクとして表示できます。)

このようなテンプレートを216個用意しました。

(デザイン1つに、背景色を216色から選べます。
最初のサンプルは、216色の中から主要なモノを選びました。)

セールスレターのような「たて長サイト」を作れる、
テンプレートセット(「HTML&CSS」ファイル計216個)になります。

  • セールスレター
  • ランディングページ、オプトインページ
  • 簡単な告知、動画の紹介ページ

などに使うことができます。
(他にも自分好みに使うことが可能です。)

次からテンプレートの特長を紹介します。

シンプルデザイン

基本デザインは1つです。

そして、出来る限りシンプルに作りました。

HTMLファイル内の「法律関連リンク」部分
  • 四隅をうっすら丸角に
  • キャッチコピーを一番上中央に大きめに表示(h1で指定)
  • 文字を見やすいサイズに指定(1.8em)
  • ページの下中央に著作権表記
  • ページの枠外右下に「法律関連リンク」を表示

このようになっています。

CSSやHTMLをいじれば、自分好みにカスタマイズも可能です。

また、「特商法やプライバシーポリシー」部分のリンクは、
何も書かなければ(HTMLファイルに)、非表示になります。

具体的には、HTMLファイル内の法律関連部分は次のようになっています。

HTMLファイル内の「法律関連リンク」部分

なので、何も書き込まなければ非表示になります。

書き込めば、ページ一番下にリンクとして表示されます。

背景色は216色から選べる

背景色は216色から選べます。

(この216色は、どのブラウザ・パソコンでも同じように表示される、
 安全な色=ウェブセーフカラー、といわれるモノです。)

次のようなページで、直感的に背景色を選ぶことができます。

背景色選択ページサンプル

背景選択ページ(サムネイル)

実際の背景色選択ページでは、色の真ん中をクリックすると、
「その色」が背景色になったページに移動します。

(上記はサンプルなので、クリックできません)

例えば次のようになります。

このように、背景色にしてみたい色をクリックすると、
その色が背景色になったページに移動します。

そのページを見て、背景色が好みに合うかを直感的に判断できます。

また、移動したページにはテンプレートを
ダウンロードできるリンクが表示されています。

例:黒背景色ページのダウンロードリンク

テンプレートダンロードリンクサンプル(例:K)

もし、その背景色が好みに合えば、
このリンクを右クリックしてパソコンに保存します。

これで、テンプレートのダウンロードは完了です。

あとは、HTMLファイルに文章を追加したり、
CSSファイルをいじって、自分好みにカスタマイズして、

ネット上にアップロードすれば、サイトを公開できます。

カスタマイズも可能

カスタマイズも可能です。

  • 「文字やキャッチコピー」の大きさや色を変える
  • サイト横幅を変える
  • 背景色を変える
  • etc..

など、自分好みにカスタマイズ可能です。

また、カスタマイズマニュアルも用意しています。

  • HTMLファイル用 カスタマイズマニュアル
  • CSSファイル用 カスタマイズマニュアル

両方とも用意しました。(状況によって、加筆修正予定)

これを見ながら、作業することで、
自分好みの「たて長サイト」を作ることが可能です。

テンプレートは技術的チェック済み

次の2つのチェックを終わらせてあります。

  • W3Cチェック
  • ブラウザチェック

W3Cチェック

W3C提供のチェックツールで、
「HTMLファイル、CSSファイル」共に合格をもらっています。

次が合格証明シールになります。

Valid XHTML 1.0 Transitional

正当なCSSです!

ブラウザチェック

ブラウザチェックも終わらせています。

次のブラウザで正常に表示されることを確認しています。

ブラウザ OS
Chrome Windows
Chrome Mac
Firefox 3.5 Windows
Firefox 4 Windows
Firefox 4.0.1 Windows
Firefox 4.0.1 Mac
Firefox 15 Windows
Opera 10 Mac
Opera 11.11 Windows
Opera 11.11 Mac
Safari 5 Mac
Safari 5.1.6 Mac
Safari 5.1.6 Windows
Internet Explorer 6 Windows
Internet Explorer 7 Windows
Internet Explorer 8 Windows
Internet Explorer 9 Windows
Internet Explorer 10 Windows

(チェックには、GoogleChrome拡張機能のUser-Agent Switcher、User-Agent Switcher for Chrome、Safariの開発者ツールを使用)

サイトを公開する流れ

次の流れでサイトを公開できます。

  1. テンプレートを選ぶ
  2. テンプレートファイル(HTML、CSS)をパソコンにダウンロードする
  3. HTMLファイルに文章などを追加して、アップロードする

1.テンプレートを選ぶ

まず、「背景色選択ページ」で背景色を選びます。

背景選択ページ(サムネイル)

例えば、黒背景色に決めたとしたら、
次のようなページに移動します。

黒背景色ページ

2.テンプレートファイル(HTML、CSS)をパソコンにダウンロードする

そして、背景色が決まったら、そのページのリンクから
テンプレートをパソコンにダウンロードします。

テンプレートダンロードリンクサンプル(例:K)

次の2つを、パソコンにダウンロードします。

  • HTMLファイル
  • CSSファイル

例えば、K背景色のテンプレートをパソコンに
ダウンロードすると、次のようになります。

黒背景色のHTMLファイル、CSSファイルをパソコンにダウンロード

3.HTMLファイルに文章などを追加して、アップロードする

あとは、HTMLファイルをエディタなどで開いて、文章を書き込んだり、

カスタマイズマニュアルを参考にしながら、
「HTMLファイル、CSSファイル」を自分好みにカスタマイズします。

また、次に紹介する「スペシャル特典」を利用すれば
かなり簡単に文章を書くことが可能になります。

文章を作成やカスタマイズが終わったら、ファイルをネット上にアップロードします。

※ファイルのアップロード方法や、サイトの公開方法を解説したマニュアルも用意していますので、そちらを参考にアップロードできます。

これで、サイト公開が完了します。

【特典1】ゼロからサイトを公開する方法

初心者の方でもサイトを公開できるようにマニュアルを作成しました。

  1. テンプレートをダウンロードして
  2. それを編集し
  3. ネット上にアップロードして公開するまで

これを詳しく解説してあります。

初心者の方でもこのマニュアルを見ながらサイト作成することで、スムーズに自分のサイトをネット上に公開できるようにしました。

よければ参考にしてください。

ゼロからサイトを公開する方法(PDFマニュアル)

【特典2】できるだけHTMLに触らないでサイトを作る方法

アメブロを利用すると、

HTMLタグを極力触らないで、サイトを作ることが可能です。

その方法を特典レポートにまとめました。

ただし、この方法だけでは、
画像を表示することはできません。

次の方法のみが可能になります。

  1. 文章を書く
  2. 文字色、文字サイズの変更
  3. 文字装飾(太字、アンダーライン、打ち消し線、斜体)
  4. 絵文字の挿入((=⌒▽⌒=)のような、テキストを使った絵文字)

次に例をお見せします。

  1. アメブロで文章を作って、「文章部分」をコピーする
  2. それをHTMLファイル内に貼り付ける
  3. HTMLファイルを上書き保存する

このような流れで、できるだけHTMLタグに触らないで、
直観的にHTML文章を作ることが可能です。

1.アメブロで文章を作って、「文章部分」をコピーする

例えば、次のようにアメブロ記事更新画面で、文章を作ります。

アメブロで作った文章例

そして、それを「HTMLタグ入りの文章」としてコピーします。

2.それをHTMLファイル内に貼り付ける

それを今回の「たて長サイトテンプレート」の
HTMLファイル内に貼り付けます。

すると、こうなります。

HTMLファイルの貼りつけた例(UFO目撃文章)

(文章にHTMLタグが付加されているのがわかると思います)

3.HTMLファイルを上書き保存する

あとは、HTMLファイルを上書き保存します。

そうすれば、このように「たて長のサイト」として公開できます。

アメブロで作った文章で「たて長サイト」を作った例

この詳しい方法を、特典としてPDFファイルにまとめました。

アメブロを利用して文章を作る方法(PDFファイル)

【特典3】テンプレート・カスタマイズマニュアル

テンプレートを自分なりに編集したくなることもあると思います。

そんな時のために、「どこをどういじれば、どうなるのか」を解説したマニュアルを作成しました。

HTMLファイル、CSSファイル共に編集マニュアルを用意しましたので、これを参考にすれべ、テンプレートを自分なりに編集できるはずです。

ちなみにテンプレートを編集することで、次のことが可能になります。

  • サイト横幅の変更
  • キャッチコピーのサイズ、文字色、文字装飾の変更
  • 本文の文字サイズ、色、装飾の変更
  • 背景色の変更
  • リンクの色、装飾の変更
  • etc..

などなど、様々は変化を加えることができます。

テンプレート編集マニュアル(PDFファイル)

【特典4】超便利なテキストエディタの紹介

私も実際に使っていて、

「これは超便利だっ」

と思っている、無料のテキストエディタがあります。

これを使うと、次のことができます。

  • 改行タグを一発挿入
  • 画像貼り付けも一瞬
  • リンクタグ挿入も一瞬

さらに、閉じタグも一瞬で挿入できますし、
タグの文字予測までしてくれます。

この無料テキストエディタのインストール方法や
使い方などを、特典としてPDFファイルにまとめました。

超便利なテキストエディタ(PDFファイルアイコン)

【特典5】コピペで使える「見出し」集

セールスレターなどの「たて長のサイト」を公開するとき、見出しを使いたい場面は必ずと言っていいほど出てきます。

その見出しをコピペで利用できるようにしました。

次がそのサンプルページになります。

【特典6】背景に画像を使う方法

サイトの背景に画像を使うと、シンプル無地では出せない印象を出すことができます。

例えば次のようなサイトを作ることができます。

背景ミッドナイト、サムネイル 背景ファイア、サムネイル

このように、背景に画像を使えばシンプル無地には無い魅力を出すことが可能です。

ネット上には大量の「背景画像を配布しているサイト」があるので、それらから好みのモノをダウンロードすれば、様々なサイト背景を作ることができます。

その方法をマニュアルにまとめました。

サイトの背景に画像を使う方法(PDFマニュアル)

購入方法

商品の購入方法を解説します。

(商品購入にはインフォトップという決済サービスを利用しています。
ここではインフォトップで決済したことのない方向けの解説になります。)

まず、このサイトの一番下にある
「今すぐ手に入れる」というボタンをクリックします。

そうすると、次のようなページに移動しますので、

青字の解説のように、商品内容を確認して、
必要な情報を入力すれば、商品を購入することができます。

インフォトップ、申し込み方法解説

「次へ」をクリックした後は、

入力内容を確認して、注文を確定させれば購入は完了です。

決済手続きが完了すると、
入力したメールアドレス宛てに商品ファイルが届きます。

次は、商品が届いてから、サイトを公開するまでを解説します。

商品が届いてから、サイトを公開するまで

商品が届いてから、サイトを公開するまでは、次の流れになります。

  1. 商品ファイル(PDF)が届く
  2. その中の「メンバー専用ページURL」をクリックしてアクセス
  3. テンプレートを選んで、パソコンにダウンロード
  4. 文章などを作成する
  5. ネット上にアップロードして公開する

1.商品ファイル(PDF)が届く

商品を購入すると、入力したメールアドレス宛てに、
商品PDFファイルが届きます。

商品PDFファイル

まずは、それを開きます。

PDFファイルの閲覧には、アドビシステムズ社のAdobe Readerが必要です。もしご自分のパソコンにインストールされていない場合は、次のリンクからインストールしてください。
自分のパソコンがWindowsならこちらMacならこちら

2.その中の「メンバー専用ページURL」をクリックしてアクセス

そのPDFファイルの中にパスワード保護した
「メンバー専用ページ」のURLがあります。

そのURLをクリックして、「パスワードとID」を入力します。

そうすると、次のようなメンバー専用ページにアクセスできます。

メンバーサイトサンプル(サムネイル)

3.テンプレートを選んで、パソコンにダウンロード

そこに表示されている「テンプレート選択ページ」
というリンクをクリックします。

そうるすと、「背景色選択ページ」に移動できます。

背景選択ページ(サムネイル)

このページからテンプレートを決めていきます。

使いたいテンプレートが決まったら、次のファイルをダウンロードします。

  • HTMLファイル
  • CSSファイル

この2つを自分のパソコンにダウンロードします。

4.文章などを作成する

あとはHTMLファイルをテキストエディタなどで開いて、文章を作成します。(必要ならHTMLやCSSを直接編集します。)

次の特典を利用すると効果的に文章を作成したり、テンプレートを編集できます。

  • ゼロからサイトを公開する方法
  • できるだけHTMLに触らないでサイトを作る方法
  • テンプレート・カスタマイズマニュアル
  • 超便利なテキストエディタの紹介
  • コピペで使える「見出し」集
  • 背景に画像を使う方法

特に特典の「アメブロを使ってHTMLに触れないでサイトを作る方法」を使えば、初心者でもかなり簡単に文章を作成することができます。

5.ネット上にアップロードして公開する

最後にファイルをアップロードします。

  • HTMLファイル
  • CSSファイル
  • 画像フォルダ

基本的にはこれらをアップロードすることになると思います。

特典の「サイト公開マニュアル」を参考にすれば、比較的簡単にサイトファイルをアップロードできるはずです。

これでサイトの公開は完了です。

今すぐ手に入れる方法

このテンプレートを使いたい場合は、

すぐ下の「今すぐ手に入れる」ボタンをクリックしてください。

その後、「簡単な購入手続き」を済ませれば、
このテンプレートを手に入れる(ダウンロードする)ことができます。

(クレジットカードでお支払いすると、最短「数分」でテンプレートが手に入ります)

たて長サイトテンプレート216

商品名 たて長サイトテンプレート216
価格 1200円
商品内容 「たて長サイト」を作る専用テンプレート216個
特典
  • ゼロからサイトを公開する方法
  • できるだけHTMLに触らないでサイトを作る方法
  • テンプレート・カスタマイズマニュアル
  • 超便利なテキストエディタの紹介
  • コピペで使える「見出し」集
  • 背景に画像を使う方法
セールスタイプ ダウンロード
決済方法 クレジットカード、銀行振込、郵便振替、コンビニ、BitCach、ちょこむeマネー
決済イメージ
inserted by FC2 system