FC2ブログの各個別記事をペラサイト化するテンプレート1944種類【Fペラ】



FC2ブログの各個別記事をペラサイト化する
専用テンプレート(全1944パターン)



  • W3C準拠
  • コピペで完了
  • 背景色216種類
  • デザイン9パターン
  • 簡単3ステップ


2012年7月31日、柴田真輔


9つのデザイン


次のような9つのデザインから、 好きなモノを選ぶことができます。

1.左上に『ブログタイトルと記事タイトル』を配置、四隅がうっすら丸角タイプ


2.右上に『ブログタイトルと記事タイトル』を配置、四隅がうっすら丸角タイプ


3.左上に『記事タイトル』を配置、四隅がうっすら丸角タイプ


4.右上に『記事タイトル』を配置、四隅がうっすら丸角タイプ


5.左上に『ブログタイトル』、キャッチコピーに『記事タイトル』を配置、四隅がうっすら丸角タイプ


6.右上に『ブログタイトル』、キャッチコピーに『記事タイトル』を配置、四隅がうっすら丸角タイプ


7.キャッチコピーに『記事タイトル』を配置、四隅がうっすら丸角タイプ


8.何も無し、四隅がうっすら丸角タイプ


9.画像でキャッチコピー、四隅がきっかり直角タイプ


選べる背景色は216種類


ウェブセーフカラーと言われる、

どのパソコン、ブラウザでも正常に表示される、
216色の中から、好きな背景色を選ぶことができます。

次のような背景色選択ページから選ぶことができます。

クリックで拡大
Webセーフカラー216色

■背景色サンプル

背景色のサンプルを紹介します。

(左上にブログタイトルと、記事タイトルが表示される、
 デザインでのサンプルです。)


全部で1944パターンのテンプレート


このように、

9つのデザイン×背景色216パターン = 1944パターン

全部で約2000種類のパターンから自分の好きな
デザインのテンプレートを選ぶことができます。

コピー&ペーストで
FC2ブログがペラサイト化


簡単なコピペ作業で、FC2ブログをペラサイト化できます。

使うテンプレートを決めたら、HTMLとCSSをコピーして、
FC2ブログのテンプレート編集部分に貼付けるだけです。

最後に変更を保存すれば、完了です。

これで、ブログの各個別記事が一瞬でペラサイトになります。

ブログで記事を書くだけで
それがペラサイトになる


メンドクサイことはいりません。

サイトを作るときのような、HTML、CSS、FTP、アップロード、etc..

こんなメンドクサイ作業や知識、スキルは入りません。

ただ単純に、そして普通にブログの記事を更新すると、
それがペラサイトになります。

なので、サイト作成がめんどくさくて、やっていなかったとしても、
これを使うと、簡単にペラサイトを作ることができます。

HTMLやCSSの知識がなかったとしても、ブログ感覚でペラサイトを作ることができます。

W3Cチェック済み


テンプレートはW3Cチェック済みです。

W3CはWorld Wide Web Consortiumの略で、
WWW技術の標準化を進める団体です。

「HTMLはこう書きなさい」
「XHTMLはこう書きなさい」
「CSSはこう書くんだよ」

みたいな発言をする、インターネット界のボス&教師的な団体です。

そのW3Cが提供しているチェックツールを使って、
テンプレートを構成しているHTMLファイルとCSSファイルをチェックしました。

この内、HTMLファイルは、
FC2ブログに必ず自動で表示されるテキスト広告部分と、
IEのバグ対策部分以外はチェックにパスしています。

CSSファイルは満点でチェックにパスしました。

ブラウザチェック済み


ブラウザチェックもしてあります。

今はたくさんのブラウザがあります。

そのいろんなブラウザでテンプレートを使ったブログ記事が
正常に表示されるかどうかのチェックをしました。

使用したツールはAdobeSystems提供のAdobe BrowserLab。
それに加えて、様々なIEのバージョン毎にチェックできるIETester。

この2つを使って、ブラウザチェックをしました。

その結果、以下のブラウザで正常に表示されることを確認しています。

  • IE5.5-Windows
  • IE6.0-Windows
  • IE7.0-Windows
  • IE8.0-Windows
  • IE9.0-Windows
  • Firefox5.0-Windows
  • Firefox7.0-Windows
  • Chrome13.0-Windows
  • Chrome14.0-Windows
  • Firefox5.0-OSX
  • Firefox7.0-OSX
  • Safari5.1-OSX

見やすいフォントサイズ


読みやすいフォントサイズにしました。

たまに読みにくかったり、ブラウザ側でフォントサイズを変えられない
サイトやブログを見かけることがあります。

そんなことが無いように、読みやすくて、
ブラウザ側でフォントサイズを自由に変えられるように、
フォントサイズは1emに指定しました。

こうすることで、ペラサイトに訪れた方が、スムーズに文章を読めるようにしました。

もちろん、CSSファイルをいじことで、
文字サイズは自分好みに変えることができます。

リンク色はGoogleをパクりました


リンクの色はGoogleをパクりました。

リンク色は一般的には青ですが、その青にもいろんな種類があります。

そのいろんな青の中でも、Googleが検索結果画面で、
採用しているモノを使いました。(2012年3月11日確認)

なぜかというと、インターネット界をほぼ牛耳ってるGoogleが、
採用しているリンク色ならば、

  • 読みやすい
  • クリックされやすい
  • 邪魔になりにくい
  • etc..

などの効果が期待できると思ったからです。

Googleは色んなサービスを提供していますが、
それらを利用した方の利用状況を承諾の上で、収集しています。

その中には、クリック率や、精読率、サイト滞在時間なども、
含まれていると予想しました。

そうなら、Googleが採用しているリンク色なら、使って間違いなしっ。
そう思いました。

なので、リンク色はGoogleが使っているモノを丸々パクって採用しました。

もちろん、CSSをいじって、リンク色を自分好みに変えることもできます。

ミニノートPCでも
見切れないようなサイト横幅


サイト横幅は小さめにしました。

今は、いろんなパソコンがあります。

  • デスクトップ
  • ノートPC
  • ミニノートPC
  • etc..

中でも、小型のミニノートなどを使っている場合を考えて、
小さなモニターでも見切れて表示されないように、
サイト横幅を730pxに指定しました。

こうすることで、どんなパソコンを使ってる、見込み客でも
ストレスなくブログを見られることを目指しました。

これもCSSをいじると、自由にサイト横幅を変えることができます。

各記事のページタイトルは
記事タイトルに設定


各記事のページタイトルが、『その記事のタイトル』になるように設定しました。

ページタイトルとは、そのページをブラウザで表示させた時に、
一番上の青い部分(インターネットエクスプローラーなら)に表示される部分です。

このセールスレターなら、

FC2ブログの各個別記事をペラサイト化するテンプレート1944種類【Fペラ】

という部分がページタイトルです。

また、Googleなどの検索結果に表示される部分も、このページタイトルになります。

例えば、

『ダイエットで1kg痩せました』

というタイトルの記事を書いたとします。

そうすると、この記事を表示させた時に、
ブラウザの一番上に『ダイエットで1kg痩せました』と表示されます。

また、Googleなどの検索結果に表示される部分も、
この『ダイエットで1kg痩せました』になります。

(HTMLをいじると、この部分にブログタイトルを含めることもできます)

個別記事のmeta keywordsに
『その記事につけたタグ』を自動挿入


個別記事のmeta keywordsに
『その記事につけたタグ』が自動で挿入されるようにしました。

FC2ブログでは記事ごとに『タグ』をつけることができます。

たとえば、ダイエット関連の記事を作ったら、
『ダイエット、太もも、カロリー』などのタグをつけることができます

つまり、FC2ブログの各個別記事にタグをつけておけば、
ペラページそれぞれに独自のmeta keywordsを設定することができます。


こうすることで、検索エンジンのロボットが、
それぞれの記事内容を理解しやすくなるようにしました。

個別記事のmeta descriptionに
『記事本文冒頭200文字』を自動挿入


個別記事のmeta descriptionには記事本文の最初の200文字が
自動で挿入されるようにしました。

こうすることで、記事それぞれにmeta descriptionを設定できます。

こうすることで、検索エンジンのロボットが
その記事内容を理解しやすくなるようにしました。

また、Googleなどの検索結果ページに
meta description部分が表示される場合もあるので、
その効果も目指しました。

また、ブログのトップページ(例:http://xxxxxxxxblog.com)では、
そのブログの説明文がmeta descriptionに挿入されます。

画像を使ってないので、軽くて、
カスタマイズも簡単


テンプレートは画像を使わないで作りました。

1つも使っていません。

画像が使われているテンプレートをカスタマイズしようとしたら、
簡単に表示が崩れてしまって、自分ではどうにもできなくなって、
キーッ(怒)となった経験があるかもしれません。

(私は何度もあります ^^)

そんなことが無いように、テンプレートでは、画像を1つも使いませんでした。

例えば、サイト横幅を変えたいと思ったら、
CSSの1箇所の数字を変えるだけで、一瞬でサイト横幅が変えられます。

スムーズに崩れること無く、スッと横幅が変わります。

また、画像を使っていないので、早い読み込み時間も期待できます。

テンプレートを適用する、3ステップ


次のような、簡単な3ステップで、
テンプレートを適用することができます。

■ステップ1:背景色を選ぶ

まず、好みの背景色を選びます。

次のサイト(サンプル画像)から選びます。

クリックで拡大
Webセーフカラー216色

色の真ん中をクリックすると、
それが背景色となった、サイトに移動します。

それを見て、

「これは好みの背景色だな」
「これはちょっと違うな」

など、その背景色が自分の好みに、合うかどうかを
判断することができます。

サンプル)


好みの背景色が決まったら、次のステップに進みます

■ステップ2:デザインを選ぶ

例えば、黒の真ん中をクリックしたとすると、
次のようなサイトに移動します。

クリックで拡大
デザイン選択サイトサンプル(黒)

このようなサイトでデザインを選択します。

9つのデザインはの中から、好きなモノを選びます。

■ステップ3:ソースをコピー&ペーストして、変更を保存する

デザインが決まったら、そのすぐ下にある、
『HTMLソース』と『CSSソース』のリンクから次の作業に入ります。

『HTMLソース』をクリックすると次のようなサイトに移動します。

クリックで拡大
HTMLソース選択サイト(サンプル)

このボックスの中身を全てコピーして、
FC2ブログテンプレート編集画面の『HTML』部分に貼り付けます。

次はCSSです。

『CSSソース』をクリックすると次のようなサイトに移動します。

クリックで拡大
CSSソース選択サイト(サンプル)

同じように、ボックスの中身を全てコピーして、
今度は、『スタイルシート』部分に貼り付けます。

次で最後です。

最後に、テンプレートの変更を保存するために、
同じ画面にある『更新』ボタンをクリックします。

これでテンプレートの適用は完了です。

購入者限定の交流掲示板


購入者限定の交流掲示板も用意しました。

クリックで拡大
Fペラメンバー専用掲示板

この掲示板を通して、いろんな情報交換などが
できるようにしました。

是非、使ってみてください。

簡単な初期設定が必要


FC2ブログを開設した時に、簡単な初期設定をする必要があります。

ブログの1ページに表示される記事数を『1』に設定します。

こうすることで、トップページを表示した時にも、
1記事だけが表示されるようになるので、不自然になりません。

この初期設定だけをしてしまえば、あとは普通どおり、
自分の好みでお使いください。

この部分を解説したマニュアルも用意しました。

お問い合わせ


質問などありましたら、
下記アドレスまで連絡ください。



まとめ


■商品名

FC2ブログの各個別記事をペラサイト化するテンプレート1944種類【Fペラ】

■商品内容

  • FC2ブログ専用ペラサイト風テンプレート1944パターン
    (9つのデザイン×背景色216パターン=1944、専用ページで選べます)
  • 購入者限定の交流掲示板
  • テンプレート適用マニュアル(PDFファイル、7ページ)
  • 初期設定マニュアル(PDFファイル、6ページ)

■注意点

FC2ブログの初期設定で、1ページに表示される記事数を『1』に設定する。
(専用マニュアルで詳しく解説しています。)

■価格

2700円

■セールスタイプ

ダウンロード版

■決済方法

  • クレジットカード
  • 銀行振込
  • BitCash
  • アフィリポイント


inserted by FC2 system