僕のアメブロでは記事の下にメールセミナー（メルマガ）のフォームを設置しています。

アメブロでは、記事の中にフォームを設置することができないので、フリープラグインを使って記事下に表示されるようにカスタマイズしています。

⇒　内藤のアメブロ

記事を読んだ後に登録フォームがあるので効果的です。

設置の仕方を紹介しますね。
（【CSS編集用デザイン】の場合）

フリープラグインに以下のコードを書きます。
※フリープラグインは、　[クイックリンク]　⇒　[プラグインの追加]　から編集可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".articleText ").append('<div class="mailmagform">●メルマガフォームのHTMLタグ</div>');
}
);
</script>

もし既にこの部分がフリープラグイン内に書かれている場合は、こちらは不要です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js">

『●メルマガフォームのHTMLタグ』　の部分に、発行されるメルマガフォームのタグを”1行”で書くようにします。

まぐまぐの場合

まぐまぐの場合、タグが非常に長いですから、『●メルマガフォームのHTMLタグ』の部分を

■メルマガタイトル<br>メールアドレス<form action="http://regist.mag2.com/reader/Magrdadd" method="post" target="_blank"><input name="MfcISAPICommand" value="MagRdAdd" type="hidden"><input name="rdemail" size="18" type="text"><input name="magid" value="<span style="color:red;text-weight:bold;">メルマガID</span>" type="hidden"><input value="登録" type="submit"></form>

にすると短くシンプルになります。
■メルマガタイトル、メルマガIDの部分は変更してください。

そして、【CSSの編集】で、以下を一番下に付け加えると、メルマガフォームの装飾が可能になります。

.mailmagform{
color:#000000; /*文字色*/
font-weight:bold; /*文字の太さ*/
text-align:left;
background-color:#F7F7F7; /*背景色*/
border:1px dotted #CCCCCC; /*枠線*/
padding:10px;
}

オートビズの場合

僕も使っているオートビズの場合は、『●メルマガフォームのHTMLタグ』の部分を

■メルマガタイトル<br><form action="<span style="color:red;text-weight:bold;">オートビズで発行されるアドレス</span>" method="post"><input type="hidden" name="mcode" value="UTF-8"><input type="hidden" name="pid" value="1"><br>お名前<br><input type="text" name="name1" size="18" class="onamae" title="お名前">　<br>メール<br><input type="text" name="email" size="18"><br><input type="submit" name="sbm" value="登録"></form>

のようにすると良いでしょう

■メルマガタイトル、『オートビズで発行されるアドレス』は変更してください

同様に【CSSの編集】で、以下を一番下に付け加えると、メルマガフォームの装飾が可能になります。

.mailmagform{
color:#000000; /*文字色*/
font-weight:bold; /*文字の太さ*/
text-align:left;
background-color:#F7F7F7; /*背景色*/
border:1px dotted #CCCCCC; /*枠線*/
padding:10px;
}

記事下に設置したいという方は参考にしてみてくださいね。

※携帯電話やスマートフォンのアメブロアプリではメルマガフォームは表示されません。

たった6記事で、先行予約時点で完売になったお花屋さんがあります。

【大きな花束＊母の日ギフト】フラワーショップ 辰花Tatubana

普通6記事で、予約完売なんてことはありえません。

では、なぜこちらのお店は6記事だけで予約完売になったのでしょう

• リピーター向けのブログだった
• 「母の日」という期間限定の商品だった
• ブログが見やすかった

という点が挙げられます。

○リピーター向けのブログだった
1からお客さんを集めたわけではなくリピーターさん向けのブログなので、リピーターさんに案内を出せばブログを見てもらう事ができます。

○「母の日」という期間限定の商品だった
また、期間限定にすることで購買意欲も高まります。

○ブログが見やすかった
いくらリピーターさん向けといえども、ブログをみて欲しいと思わなければ注文しません。

写真を使った説明が分かりやすいですし、太字や文字の色を変える箇所も必要なところだけで、とても読みやすいです。
また、枠を部分部分で使い、より見やすい工夫をしています。

また、見逃してはいけないのが、プロフィールページ。
期間限定にもかかわらず、プロフィールもきちんと書かれています。

全体的にとてもシンプルなブログですが、見やすく、読みやすく、伝わりやすければ完売という結果もついてくるんですね。

「初心者にもできるアメブロカスタマイズ」を使ってご自身でカスタマイズされています。

たった6記事しかありませんので、全記事見て、見やすさや書き方など参考にされると良いと思います。

【大きな花束＊母の日ギフト】フラワーショップ 辰花Tatubana

こちらのサイトで、スマートフォンのアプリと、WordPressのプラグインを使って、WordPressとFacebookに写真を同時に掲載できるようにしました。

ちょうどこちらのサイトのサイドバーにある「田舎フォト」がそうです。

使っているアプリは「Instagram」。
iPhone、androidに対応しています。

WordPressで使っているプラグインは「Instapress」
ウィジェットから、簡単に設定ができます

●スマートフォンで撮った写真をその場でアップロード

●Facebookだけでなく、Twitterにも共有が可能です

●Instagramに保存された画像を、WordPressの方から読み込み、サイドバーに表示。

WordPressをわざわざ開いてアップする必要もありませんので便利です^^

便利に使う事のできる、「フリースペース」
サイドバーにあるパーツで、文字や画像を自由に配置できます。

告知板として使う事もできますので、非常に重要なパーツです。

このフリースペースをこんな風に使いたくないでしょうか？

“お知らせ”　というサイドバーのパーツはありませんが、フリースペース内でこんな風に他のサイドバー項目と同じような感じで表示させることができます。

本来フリースペースはこんな感じになってしまいます。

やり方は、フリースペースで以下のように書きます

<div class="skinMenu"><div class="skinMenuHeader"><span class="skinMenuTitle">お知らせ</span></div><div class="skinMenuBody">セミナーの開催

日時：○月○日
料金：10000円

<a href="http://ameblo.jp/***">お申込みはこちらから</a>
</div></div>

※「CSS編集用デザイン」になります。

“お知らせ”　が入っている部分が、見出し部分になります。

そして、
<div class="skinMenuBody">　と　</div>　の間の部分が中の部分になります。

コピーして使ってみてくださいね。

構造的にはこんな感じです。

※フリースペースの上に隙間ができるので

スキンCSSの編集で以下を最後に付け足してみてくださいね

.freespaceArea{
margin-top:0;
}

カスタマイズの手順やその他のカスタマイズはこちらを参考にしてみてください

よく質問をいただきますので、お問合せフォームの作り方を説明します。
WordPressでしたら、プラグインでContactForm7がありますが、アメブロですとフォームメーラーを使うのが便利です。
無料版もあります。

⇒　フォームメーラー

アメブロの記事の中には設置できませんが、専用のフォームページができますので、リンクさせておけばOKですね。

こちらに動画で解説してみました。

良かったら参考にしてみてくださいね

アウトレットモールとか、デパート、商業施設などはお店が集合しています。

そういった場所は、人が集まりやすいので、自分のお店にも来てもらいやすいです。

他のお店目当てで来た、映画を見に来たなど、他の目的で来た場合でも立ち寄ってもらえる可能性があります。

人の多い場所とはそういう効果も期待できます。

また、どこそこに出店すること自体がイメージアップになることもあります。

一方、自分の店舗を持つということは、存在を知ってもらい来てもらうという流れになります。

モールやデパートに比べて最初から人は集まりません。

アメブロが集客に向いているといわれるのは、大型モールに出店しているようなものだからです。
人の集まりがダントツですから、自分のブログに来てもらえる可能性も高くなります。

ホームページは、自分のお店を持つようなもので、人が集まるようになるためには時間がかかります。
人の集まりを自分で作っていかなければならないので。

『予約が全てアメブロからです』
『アメブロを見て来店するお客様が多いです』
という方が多いのも分かりますよね。

アメブロという大型モールには、無料で出店できますから、まずはそこから始めてみるのがお勧めです。

16日から募集しておりました「利用されるブログ作りメールセミナー」が5/6までの募集となっています。
あと1週間にて終了となります。次回募集は未定です。

こちらのページに、90日間配信のメールタイトルを記載しましたので、参考にしてみてくださいね。

新カスタム可能デザイン（2011年8月以降）の【CSS編集用デザイン】で、記事タイトルの部分は、最初このような感じです。

左側に縦線がついています。
この部分の変更の仕方です。

[クイックリンク]　⇒　[スキンCSSの編集]　で

/* (3-6) 記事
——————————————–*/

という部分のところに

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}

があります。

この部分の

border-left:5px solid #e4e4e4;

というのが、　左側の線を　5px　実線　カラーを#e4e4e4　にするという事です。

border-left:5px solid #000000;

と、カラーコードを変更してみると

このように縦線が＃000000（黒）になります。

border-left:5px solid #000000;　を border-left:0px solid #000000;　にして
border-bottom:5px solid #000000;　を　}　の前に付け加えてみると

左の縦線がなくなり、下線が付くようになります

さらに、}　の前に　 background:#F2F2F2;　　を付け加えると

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:0px solid #e4e4e4;
border-bottom:5px solid #000000;
background:#F2F2F2;
}

このように背景にも色が付きます

ブログに応じて変えてみてくださいね

カラーコードはこちら

■その他のカスタマイズの目次はこちら

2011年8月以降の新カスタム可能デザイン【CSS編集用デザイン】では、メッセージボードの上下に点線がついて表示されます。

これが嫌だという方が結構います＾＾；

『点線じゃなくて、枠にしたい』とよく言われます。

やり方は、CSSの

/* (3-5) メッセージボード
--------------------------------------------*/

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border-top:1px dotted #979797;
border-bottom:1px dotted #979797;
background:#ffffff;/* ←メッセージボードに背景を敷きたいとき */
}

を探します。
そして以下のように変えます

.skinMessageBoard{
/* 注 ベースのcssに margin-bottom の記述有り */
border:1px solid #FFC7DA;
background:#FFF0F5;/* ←メッセージボードに背景を敷きたいとき */

}

するとこのような感じになります

カラーコードを変更すると、枠の線や、内部の色も変更できます。

カラーコードはこちらから

その他の自分でできるカスタマイズは、こちらを参考にしてみてください

アメブロで記事中の文章を囲みたい場合ってあると思います。

そんな時は、投稿エディタをHTML表示にして（もしくはタグ編集エディタ）、囲みたい文章を

<div style="border:2px dotted #CCCCCC; padding:10px;">　と　</div>

で囲みます。

こんな感じになります。

border:2px dotted #CCCCCC; padding:10px;のうち、
border:2px dotted #CCCCCC; は　
線の太さが2pxで、破線、線の色が#CCCCCC（グレー）を意味しています。

padding:10px;　は枠と文章との余白を意味します。

枠内の色

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のように background-color:#F2F2F2;を付け加えると、枠の内部に色を付けることも可能です。

こんな感じです。

線の種類

線の種類には

• solid　（実線）
• dotted　（破線）
• dashed　（点線）
• double　（二重線、3px以上）

などがあります。

▼太さ2px、破線、線の色#CCCCCC、余白10pxの枠の場合

<div style="border:2px dotted #CCCCCC; padding:10px;">
囲みの中の文章　
</div>　

↓

▼太さ2px、実線、線の色#FF0000、余白10px、背景色#F9DCDAの枠

<div style="border:2px solid #FF0000;padding:10px;background-color:#F9DCDA;">
囲みの中の文章
</div>

↓

▼太さ3px、点線、線の色#000000、余白10px、背景色#CCCCCCの枠

<div style="border:3px dashed #000000;padding:10px;background-color:#CCCCCC;">
囲みの中の文章
</div>

↓

▼太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠

<div style="border:3px double #0000FF;padding:10px;background-color:#F2F2F2;">
囲みの中の文章
</div>

↓

※カラーコードはこちらを参照してください