記事作成

ついさっき、昔書いた情報商材のレビュー記事を読んで、その下手さに驚愕しました。そうです。「下手だなぁと思うレビュー記事」というのは自分が書いたレビュー記事のことです。今もまだ上手とは言えないけれど、「これじゃ誰もほしくならない」と思うほど昔のレビューはひどかった。

問題はいろいろあるけど、一番ダメだなと思ったのは「具体性が無い」こと。一般論を並べているだけで、私個人の考えや、具体的な経験などが一切述べられておらず、また情報商材の紹介をするにしてもレターを読めばわかるようなことばかりを書いて紹介しています。それじゃー売れない。

間違ったことを書きたくない。

そういう想いがあって「具体的なこと」や「自分の考え」を書かず、「一般論」や「常識」などが主体の記事を書いてしまっていたのかなと思います。でも、そういう記事はあんまり気持ちが動かないんですよね。

「これはすごい人が作った商材です。内容を読むとそのレベルの高さに圧倒されるはずです。○○や○○と書いてあり、それには私も完全に同意します。他にもここに書き切れないくらいとても多くのことが学べます。商材を買ってから私は多くを学び、見る目が変わりました。あなたにもぜひおすすめします。」

みたいなレビュー。文章は悪くないし間違っていることは書いてないけど、ふ～んとなって終わり。もっと知りたい！ほしい！とはなかなかならないです。

「内容を読んで私は圧倒されました。今までやってきたことはなんだったのかと。私はすぐに商材の指示通り○○をしました。すると１ヶ月でメルマガの読者を約３００人集めることに成功！読者が集まってからは○○の法則を使いながら１日か２日おきにメールを配信しました。そしてメールを配信し始めてから３週間後。いよいよ商品の販売・・。なんと１０００円の商品を３０本売ることに成功！あまりに簡単に売れたので拍子抜けしてしまいました。今まで全く売れなかった私でも売ることができました。オススメの情報商材です！」

みたいに書いていたらちょっと違うと思います。まぁこれも結構微妙かもしれないですが（笑）でも、あんな記事でもちょこちょこ売れていたのだから驚きです。

このサイトでは１記事に必ず一つは画像を入れるようにしています。しかし、ただ画像タグを記入しただけだと左寄せで表示されます。

<img src="http://www.snizm.com/img/a2011110603.jpg" alt="バスケ試合前の円陣" />

↑のように記述しただけだと↓こんな感じで左寄せで表示されます。

そこでCSSに以下のような記述を追加。

.alc {
display: block;
margin-left: auto;
margin-right: auto;
}

その上で記入する画像タグにclass=”alc”を指定します。

<img src="http://www.snizm.com/img/a2011110604.jpg" alt="チアリーダーの円陣" class="alc" />

すると↓のように真ん中に表示されるようになります。

枠線の表示と合わせて記述しておけばセンタリングと枠線が同時に表現されます。

.conimg{
margin: 10px auto 10px auto;
padding: 1px;
border: 1px solid #666;
display: block;
}

<img src="http://www.snizm.com/img/a2011110605.jpg" alt="バスケダンクシュート" class="conimg" />

本文と画像との境目が曖昧で間の文章が目立たない感じだったので、画像の周りに枠線を表示させるようにして、ついでに今回は画像の上下に10ピクセルのマージンも入れました。下はこの記事のスクリーンショット画像です。

枠線が無いと本文と画像との境目が曖昧で間にある文章（↑が↓こうなりました）が目立ちません。

枠線があると画像と画像の間に文章があるということがはっきりとわかります。

.conimg{
margin-top: 10px;
margin-bottom: 10px;
padding: 1px;
border: 1px solid #ccc;
}

というのをスタイルシートに記述し、本文中の画像タグにclass=”conimg”を追加すると上のような感じになります。例えば以下のような感じで。

<img src="http://www.snizm.com/img/a2011110508.jpg" alt="枠線ありの場合" class="conimg" />

ちなみに

.conimg2{
margin-top: 10px;
margin-bottom: 10px;
box-shadow: 0 0 5px 2px grey;
border: 7px solid white;
}

というのをスタイルシートに記述しておいて、画像タグにclass=”conimg2″を追加すると、下のように写真みたいな枠線を作ることもできます（CSS3 IE9だと表示されないっぽい）。

写真を紹介するサイトなんかはこんなふうにしておくといいかもしれませんね。