MilkyStep Official Community

アメブロの記事の上下にメルマガ登録フォームを設置するには？

基本的にフォームの設置等はお客様にてカスタマイズしてご自身で設置していただくのが基本ですが、需要がありそうなので、以下に一例を書かせていただきたいと思います。

なお、この情報は2012-3-8現在のものです。アメブロの仕様変更により、今後できなくなる可能性もありますので、あらかじめご了承ください。

１．アメブロにログインします。

２．「ブログを書く」→「デザインの変更」から、現在使用しているデザインが、「カスタム可能」なものかどうか確認します。もしそうでなければ、下部から「カスタム可能」なデザインを選択して適用してください。

３．次に「サイドバーの設定」→「プラグインの追加」→「フリープラグイン」を選択します。

４．テキストエリアに、下記のように入力します。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(‘jquery’, ‘1.6.2’);</script>
<script type=”text/javascript”>
(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});
</script>

<script type=”text/javascript”>
$(function(){
var form = $(‘div#milkystep_form’);
$(‘.pagingArea:first’).before(form.clone()); /*上*/
$(‘.pagingArea:last’).after(form.clone()); /*下*/
form.hide();
});
</script>

<div id=’milkystep_form’>

</div>

５．上記の<div id=’milkystep_form’>~</div>の間に、設置したいフォームのHTMLコードのCSS以外の部分（※）を貼り付けます。

※CSS以外の部分とは、

————————

–>
</style>

————————
となっている個所から下の部分です。

６．「保存」をクリックして保存します。

６－２（追記）．その後「サイドバーの設定」→「サイドバーの配置」から、「フリープラグイン」を「使用する機能」の中の一番下の方の目立たないあたりに、ドラッグ＆ドロップして保存します。

７．次に、「デザインの変更」→「CSSの編集」を選択します。

８．一番下までスクロールし、「その他拡張」という行の下に、先ほど貼り付けなかったCSSの部分（※）を貼り付けます。

※<style type=’text/css’>~</style>の部分がCSSになります。

９．保存して完了です。

うまく設定できれば、このような感じで記事の上下にフォームが表示されます。↓

http://ameblo.jp/milkystep/

Login