ステップ 2 テンプレートをはめ込む FC2 ブログ専用のセールスレターテンプレートをはめ込む方法を解説します次のような手順です 1. テンプレートサイトにアクセス 2. セールスレターの背景色を決める 3. サンプルサイトを表示させておく ( 好みの背景色の ) 4. FC2 ブログのテンプレ

(1)

ステップ

₂

テンプレートを

はめ込む

FC2 ブログ専用のセールスレターテンプレートをはめ込む方法を解説します。次のような手順です。 1. テンプレートサイトにアクセス 2. セールスレターの背景色を決める 3. サンプルサイトを表示させておく（好みの背景色の） 4. FC2 ブログのテンプレート編集画面を表示させておく 5. ソースをコピーして、FC2 ブログに貼り付ける 6. 変更を保存する 1 つずつ行きます。

1.テンプレートサイトにアクセス

まず、テンプレートを選ぶサイトにアクセスします。

(2)

ID：●●●

パスワード：●●●

(3)

1. 好みの色の真ん中をクリック 2. サンプルサイトを見てみる 3. 好みかどうか判断 4. 好みだったら、次のステップへ （じゃなかったら、2 と 3 を繰り返す） テンプレートを選ぶサイトで、「背景色にしたいなぁ」という色があったら、それをクリックします。そうすると、サンプルサイトが表示されます。そのサイトを見て、「この背景色にするかどうか」を判断します。好みだったら、そのまま次のステップに移ります。好みじゃなかったら、ブラウザの『戻る』をクリックして、さっきの作業を繰り返します。こうして、好みの背景色を決めます。

3.サンプルサイトを表示させておく（好み

の背景色の）

今決めた、サンプルサイトを表示させておきます。例えば、黒の背景色にすると決めたら、次のようなサンプルサイトを表示させておきます。ここからは、このサンプルサイトと次の『FC2 ブログのテンプレート編集画面』を 行ったり来たりしながら、作業します。

4.FC2 ブログのテンプレート編集画面を

表示させておく

(4)

FC2 ブログのテンプレート編集画面を表示させます。次の手順でやります。 1. FC2ID にアクセスしてログイン 2. ブログ管理画面に移動 3. 左メニューを『環境設定＞テンプレート設定』と進む 1 つずつ見ていきます。 ■1.FC2ID にアクセスしてログイン まずFC2ID にアクセスしてログインします。 FC2ID http://id.fc2.com/ ■2.ブログ管理画面に移動 ブログ管理画面に移動します。ログインした状態で、ブログの横にある『かなづちマーク』をクリックします。 ■3.左メニューを『環境設定＞テンプレート設定』と進む ブログ管理画面に入ると左メニューに、緑色の『環境設定』という部分があります。そこのメニューを表示させた状態で、『テンプレート設定』をクリックします。

(5)

これで『テンプレート編集画面』が表示されました。このページはそのまま表示させておきます。

5.ソースをコピーして、FC2 ブログに貼り

付ける

サンプルサイトでソースをコピーして、 FC2 ブログのテンプレート編集画面に貼り付けます。次の手順で進めます。 1. サンプルサイトで『HTML ソース』をコピー 2. FC2 ブログテンプレート編集画面『HTML 部分』に貼付け 3. サンプルサイトで『CSS ソース』をコピー 4. FC2 ブログテンプレート編集画面『スタイルシート部分』に貼付け 1 つずつ見ていきますと。

1.サンプルサイトで『HTML ソース』をコピー

次のような手順で進めます。 1. サンプルサイトを表示（好みの背景色の） 2. 『HTML ソース』をクリック 3. ボックスの中身を全てコピー ■1.サンプルサイトを表示（好みの背景色の） さっきまでの作業で、好みの背景色のサンプルサイトを表示させたはずです。例えば黒の背景色にしようと決めたとしたら、次のようなサンプルサイトを表示させておきます。

(6)

■2.『HTML ソース』をクリック

サンプルサイトの上にある『HTML ソース』をクリックします。

そうすると、HTML ソースが表示されたページに移動します。

■3.ボックスの中身を全てコピー

(7)

この今、モザイクがかかっている部分が『HTML ソース』になります。

そのHTML ソースが収められているボックスの中身を全て選択して、コピーします。

(8)

3. コピーする（右クリック→コピー。もしくは、Ctrl+C）これで、ボックスの中身を全てコピーすることができます。これで、『HTML ソース』のコピーが完了しました。次は貼付けです。

2.FC2 ブログテンプレート編集画面『HTML 部分』に貼付

け

次の手順で行います。 1. FC2 ブログ『テンプレート編集画面』を表示 2. 『HTML 部分』に貼り付ける ■1.FC2 ブログ『テンプレート編集画面』を表示 FC2 ブログの『テンプレート編集画面』を表示させます。ここはさっき済ませたと思いますので、次に行きます。 ■2.『HTML 部分』に貼り付ける テンプレート変種画面に移動したら、そのページの『HTML 部分』に貼り付けます。

(9)

次の手順で貼り付けます。 1. ボックスの中身を全て消す 2. コピーした『HTML ソース』を貼り付ける 1）ボックスの中身を全て消す そこに表示されている、元のHTML ソースがあると思います。ここで、それを全て消します。手順は次のようになります。 1. ボックスの中のどこかをクリック（何処でも良い） 2. 全てを選択する（右クリック→全て選択。もしくは Ctrl+A）

(10)

2）コピーした『HTML ソース』を貼り付ける 最後に、コピーしたHTML ソースを貼り付けます。手順は次のようになります。 1. ボックスの中のどこかをクリック（何処でも良い） 2. 貼り付ける（右クリック→貼り付け。もしくは Ctrl+V）これで、さっきコピーした、HTML ソースを FC2 ブログの HTML 部分に張り付けることができました。次はサンプルサイトに戻ります。

3.サンプルサイトで『CSS ソース』をコピー

手順はこうなります。 1. サンプルサイトを表示（好みの背景色の） 2. 『CSS ソース』をクリック 3. ボックスの中身を全てコピー ■1.サンプルサイトを表示（好みの背景色の） 背景色にすると決めた、サンプルサイトを表示させます。ここもさっき済ませたはずなので、次に行きます。 ■2.『CSS ソース』をクリック サンプルサイトの上の方に、『CSS ソース』というリンクがあります。

(11)

この今、モザイクがかかっている部分が『HTML ソース』になります。

そのCSS ソースが収められているボックスの中身を全て選択して、コピーします。

(12)

これで、ボックスの中身を全てコピーすることができます。これで、『CSS ソース』のコピーが完了しました。次は貼付けです。

4.FC2 ブログテンプレート編集画面『スタイルシート部分』

に貼付け

次のような手順になります。 1. FC2 ブログ『テンプレート編集画面』を表示させる 2. 『スタイルシート部分』に貼付け ■1.FC2 ブログ『テンプレート編集画面』を表示させる FC2 ブログのテンプレート編集画面を表示させます。 ■2.『スタイルシート部分』に貼付け テンプレート編集画面に移動したら、そのページの『スタイルシート部分』に貼り付けます。

(13)

次の手順で貼り付けます。 1. ボックスの中身を全て消す 2. コピーした『CSS ソース』を貼り付ける 1）ボックスの中身を全て消す そこに表示されている、元のCSS ソースがあると思います。ここで、それを全て消します。手順は次のようになります。 1. ボックスの中のどこかをクリック（何処でも良い）

(14)

これでボックスの中身を全て消すことができます。 2）コピーした『CSS ソース』を貼り付ける 最後に、コピーしたCSS ソースを貼り付けます。手順は次のようになります。 1. ボックスの中のどこかをクリック（何処でも良い） 2. 貼り付ける（右クリック→貼り付け。もしくは Ctrl+V）これで、さっきコピーした、CSS ソースを FC2 ブログのスタイルシート部分に張り付けることができました。次はこの変更を保存します。

4.変更を保存する

貼り付けが終わったら、 FC2 ブログのテンプレートを保存します。『更新』をクリックすると、変更を保存できます。これで、ステップ2 は完了です。普通のFC2 ブログがセールスレターになりました。左メニュー『ブログの確認』をクリックしてブログを見てみてください。セールスレターになっているはずです。こんな感じになっているはずです。（黒背景にした場合）

(15)

本文を書くと、その内容がメインに表示されます。追記部分に『特商法とプライバシーポリシー』を書くと、右下にリンクが自動表示されます。まだ、記事を更新していない状態なので、こんな感じですが、次のステップをこなすと、イメージ通りのセールスレターになっていきます。これでステップ2 は完了ですっ。次に行きましょう♪ 執筆：柴田真輔メール：[email protected] サイト：http://saleslettertemplate.web.fc2.com/letter/