西澤リュウジの宇宙（セカイ） -39ページ目

<< 前のページへ最新 | 37 | 38 | 39 | 40 | 41 | 最初次のページへ >>

Webマーケティング　提案型の分類をしよう。

こんばんは、ウインさんです。

トップページに提案型の分類で誘導しよう。

クリスマスが近づいてきました。

今なら、「クリスマス特集！」は当たり前。

これでは、どこも同じになってしまいます。

「彼女と一緒に窓辺にクリスマスデコレーションを飾ろう！」

これ、いいかも彼女と一緒にどの、デコレーション、イルミネーションを考えたり

一緒に窓辺を飾ったり、きっと楽しいだろうな。

そしたら、二人だけのクリスマスも盛り上がって・・・・

こんな想像を沸かせるようなページの導入ボタンをトップページにおきましょう。

「クリスマスに特別の誕生日を祝う」

１２月２５日頃が誕生日の人は

意外と誕生日ケーキにサンタが乗っていたり

誕生日とクリスマスが一緒だったりします。

今年は大切な人のために誕生日を祝いましょう。

こんな気遣いができるお店を

お客様は探しているんです。

ここまで気遣いのあるお店、

自分が気が付かなかったことを提案してくれる。

これで、一気にお店と、お客様の距離が近くなります。

信頼関係が生まれてきます。

トップページのバナーボタン一つで

お客様の心を掴んでみましょう。

有る目的を持って商品を探しているお客様は

値段や、機能で選ぼうとしています。

そこに、こんな提案がポンと目に入ったら

「あっ、そうだ！ただクリスマスツリーを買うだけじゃなく

大切な人と一緒に選んだり、飾りつけしたり

それ自体も楽しい時間に変わるんだ。」

こんなことを教えてくれたお店はきっとファンがついてきますよね。

ウインでした。

【目次】OFFICE Win代表東啓一のWebマーケティング

記事内ロールオーバーを活用しよう！【HTML＋CSS編集】

こんな画像を見たことありますか？

この画像はマウスのカーソルを合わせて画像が切り替わることによってユーザーを

任意のリンク先へと誘導する効果があるロールオーバー画像というものです。

今回はアメブロのCSSカスタマイズ可能なテンプレートを使用して記事内で

このロールオーバー画像を設置してみましょう！

これを使うことによって例えば

読者登録やペタを促したり、外部サイトへの誘導にも利用出来るのです。

ただの画像を貼るよりも明らかにクリック率が高まるのでオススメのカスタマイズですよ☆

では設置の仕方を説明します。

まずは何と言ってもロールオーバーで使用する画像の作成が必要不可欠です。

上記のロールオーバー画像（skype無料ブログ診断）では実際にこのような画像を使用しています。

切り替わる前の画像と切り替わった後の画像を１枚の画像で作ってあります。

別々の画像として作るのではなく初めから１枚の画像として読み込ませることで

チラつきがないスムーズなロールオーバーを表現出来ます。

この画像をアメブロにアップロードしたら画像のURLを控えておきます。

次に

【マイページ】→【ブログを書く】→【デザインの変更】→【CSSの編集】を開き

表示されたCSSの１番下に下記のコードをコピペします。

※下記のコードはスカイプ無料ブログ診断用になってます。

---------------------ここから下をCSSの１番下にコピペ-------------------------------

/* 記事内ロールオーバースカイプ無料ブログ診断*/
.skype img {
visibility : hidden ;
}
.skype a{
width:287px;/*画像の横幅*/
height:106px;/*画像の高さ（半分）*/
display:block;
background-repeat : no-repeat;
background-image : url(http://stat.ameba.jp/user_images/20111103/14/mnbb-visual/ec/96/p/o0287021211587803521.png );
}
.skype a:hover {
background-position: 0 -106px;/*画像の高さ（半分）*/
}

---------------------ここから上をCSSの１番下にコピペ-------------------------------

変更点は

■ skype のclass名のところを好きな(作成した画像を表す)半角英数表記に変更。

■ width:287px;　を作成した画像の横幅に合わせる。

■ height:106px;　を作成した画像の縦幅の半分に合わせる。

※元の画像の縦幅の半分にすることでマウスを合わせる前は上半分を表示させ

　　マウスを画像に合わせることで下半分が表示される仕組みです。

■ background-image : url(アップロードした画像のURLに変更)

■ background-position: 0 -106px;　を作成した画像の縦幅の半分に合わせる。

コードをコピペし作成した画像に合わせCSSを変更し【保存】をクリックしたら

CSS編集部分はこれで終わりです。

次は記事内にHTMLタグを挿入します。

【マイページ】→【ブログを書く】から編集エディタを開き

タグの非表示からからHTMLタグを表示に切り替え

下記のHTMLタグをコピペして下さい。

※下記のコードはスカイプ無料ブログ診断用になってます。

-----------ここから下のHTMLタグをコピペ------------------------------------

-----------ここから上のHTMLタグをコピペ------------------------------------

変更点は

■ skype　をCSS編集で変更したclass名と同じものにする。

■ <a href="誘導したいリンク先を挿入">

※プレビュー（表示を確認する）ではまだロールオーバー画像は表示されません。

　　保存（全員に公開）をした後にロールオーバー画像は表示されます。

これで完成です！

記事内の好きなところ（メッセージボードも含む）に設置できるのはもちろん、

サイドバーにも設置できるので読者が思わずクリックしたくなるような画像を

オリジナルでどんどん作ってみてください！

きっと、ブログがまた楽しくなってくると思いますよ☆

【記事内ロールオーバーのCSSテンプレート】

---------------------------------------------------------------

.class名 img {
visibility : hidden ;
}
.class名 a{
width:0px;/*画像の横幅*/
height:0px;/*画像の高さ（半分）*/
display:block;
background-repeat : no-repeat;
background-image : url(画像のアドレス );
}
.class名 a:hover {
background-position: 0 -0px;/*画像の高さ（半分）*/
}

---------------------------------------------------------------

【記事内ロールオーバーのHTMLテンプレート】

---------------------------------------------------------------

---------------------------------------------------------------

【目次】ビジュアルの伝道師が行うデザイン集客