こんにちは。
ブログで「時間」と「収入」を手に入れる。
ブランディングプロデューサーの櫻井圭子です。
ブログを読んでいて、「この記事とっても役にたった!もっとお得な情報はないのかな」と思ったことはありませんか?
サロン系のブログなら、興味をもち「実際の施術例を見てみたいな」とか。
そんな時、すぐに「あなたの欲しい情報はここですよー」と教えてあげることができれば、クリックしてみてもらうことができます![]()
・ヘッダーの下にメニューバーもいれてる
・毎回記事下のあとにはご提供中メニューも入れてる
・関連記事のリンクは、記事の文中に差し込んでる
これが全部できていたら、”未来のお客様”への、あなたのブログの中の道案内はとても丁寧ですね![]()
でもね、お客様って基本的に、全部は見ていないのです。
なので、何度も何度も丁寧に、道案内してあげることが大事なのです。
クリックされやすい場所を知って、お役立ち情報をお客様にプレゼント
WEBページや、ブログのクリックされやすい場所は知ってますか?
まずは第一に「目立つ場所」です!
とにかく、”見てもらう”ことを意識しましょう。
【関連記事】
■アメブロで広告を外す方法
http://ameblo.mom/keiko-design/entry-12176038421.html![]()
満足していただいた後に、クリックしてもらう
誰かのブログを読んでいて共感すると、「いいね!」を押しますよね。
その時、”いいね!”ボタンは、記事の下にありますよね。
その時の自分の気持ちは、
「このブログを読んでとても共感しました。ワクワクさせてくれてありがとう♡」だったり。
「今までの悩みが解決しました。お役立ち記事をありがとう♡」というふうに、嬉しい気持ちになってることが多いのではないですか?
その時に、「あなたへの欲しい情報のプレゼント、もっとこっちにありますよ」と教えてもらえたら、とっても嬉しくないですか?
私ならすっごく嬉しい♡大好きになっちゃいます♡
アメブロの記事の下にもメニューバーを表示させる方法
誰かのブログを読んでいて、記事の1番最後に、こんな感じのものを見たことありませんか?
私はこれを”記事下メニューバー”と読んでいます。
ヘッダーの下にもメニューバーはいれてますが、このメニューバーだとスマホでは表示されないのです。

スマホから読んでくださっている未来のお客様の為にも、あなたのブログの中の道案内をしてあげましょう♡
記事を読んで満足度が高い状態だと「もっと読みたい」気持ちが強いのです。
未来のお客様に、どんどん、あなたのブログの中を道案内してあげましょう![]()
コピペで使える記事下メニューバーの作り方
今回は、未来のお客様が興味を持ってくれることが多い、”お役立ち記事”、”お客様の声”と、お申し込みへと繋がる、”ご提供中メニュー”、”お問い合わせ”でサンプルを作ってみました。
使い方![]()
記事の入力画面で、
・新エディタの場合は、”HTML表示”にしてコピペしてください。
・旧エディタの場合は、”タグ編集エディタ”にコピペしてください。
その後は通常表示メニュー名を変更、リンクを入れてください。
クリックできる事がわかるように、下線を入れたり、絵文字を入れてあげるのも親切です。
※枠の下に入力カーソルが進めない場合
HTML表示画面で、枠のタグの下に<br>といれてください。
<br>・・・改行
基本は、記事の中で使える囲み枠線と一緒です!
【関連記事】
■アメブロの記事の中で使える囲み枠線の作り方♡可愛い配色サンプル
http://ameblo.mom/keiko-design/entry-12156351678.html![]()
ピンク
<div align="center" style="background: #ffeff7; padding: 10px; border: 1px dotted #ffb7db;"><b><a href="リンク先">お役立ち記事</a> </b>/ <b><a href="リンク先">お客様の声</a> </b>/ <a href="リンク先"><b>ご提供中メニュー</b></a> / <a href="リンク先"><b>お問い合わせ</b></a> </div>
<div align="center" style="background: #fff4f4; padding: 10px; border: 1px dotted #ffd1d1;"><b><a href="リンク先">お役立ち記事</a> </b>/ <b><a href="リンク先">お客様の声</a> </b>/ <a href="リンク先"><b>ご提供中メニュー</b></a> / <a href="リンク先"><b>お問い合わせ</b></a> </div>
<div align="center" style="background: #f4fff9; padding: 10px; border: 1px dotted #00ac9a;"><b><a href="リンク先">お役立ち記事</a> </b>/ <b><a href="リンク先">お客様の声</a> </b>/ <a href="リンク先"><b>ご提供中メニュー</b></a> / <a href="リンク先"><b>お問い合わせ</b></a> </div>
<div align="center" style="background: #f4f9ff; padding: 10px; border: 1px dotted #a0d8ef;"><b><a href="リンク先">お役立ち記事</a> </b>/ <b><a href="リンク先">お客様の声</a> </b>/ <a href="リンク先"><b>ご提供中メニュー</b></a> / <a href="リンク先"><b>お問い合わせ</b></a> </div>
タグの解説![]()
background:背景色
padding:枠と文字の間の隙間の幅
border:線の太さ、種類、色を指定
・線の種類
→solid…直線/double…二重線/dashed…破線/dotted…水玉線
#fff、#ffdbffなどは色になります。
色を変更したい場合は、こちらのサイトを参考にしてください。
■原色大辞典
http://www.colordic.org/![]()
線の種類などのサンプルは、囲み枠線の記事を見てみてくださいね。
■アメブロの記事の中で使える囲み枠線の作り方♡可愛い配色サンプル
http://ameblo.mom/keiko-design/entry-12156351678.html![]()
ポイント![]()
”;”で閉じるのを忘れないようにしましょう。
大手企業のweb企画も経験した、web歴10年以上の私が、あなたのビジネスの集客につながるようにブログコンサルをさせていただきます
ブログで「時間」と「収入」の両方を手に入れる!
憧れの生活を手に入れて、みんなで世界で遊びましょう!
近々、お話させていただきますね![]()
(綺麗な空を見に行きたい♡)
みんなで幸せになりましょう♡
今日も最後までお読みいただき、ありがとうございました!
櫻井圭子

