コメントフォームを記事内に設置する

★　コメントフォームを記事内に設置する。

コメントボタンのみ表示の記事は下記を参照
http://ameblo.jp/new-blue-777/entry-11259905841.html

コメントフォームを記事内に設置する②（コメント欄が表示されている場合も表示します）
http://ameblo.jp/new-blue-777/entry-11411492082.html

◆　条件

①　１記事内に設置する。（下記は例)・・・記事内であれば設置可能。
　　（相対配置すれば、記事外にも設置できます。
　　　１ページ１記事であれば、絶対配置すれば、どこにでも
　　　配置が可能です。）

　　・記事本文下（ '.articleText' )
　　・記事フッター下（ '.skinArticleFooter' )
　　・記事タイトル下（ '.skinArticleHeader' )
　　・記事テーマ下（ '.articleTheme' )
　　・記事投稿日時下（ '.articleTime' )

②　フォームの下記部分（図）は、自分で文字を変更できます。
　　画像にもできます。
　　下記は標準の表示です。（色部分は除く）

③　変更できる文字

・コメント投稿
・この記事へのコメントを投稿します。
・タイトル：
・コメント：
・投稿確認

④　投稿確認をクリックするとコメント投稿ページがポップアップ表示されます。
　　（投稿ボタンと同じ操作となります）
　　フォームに入力されたタイトルとコメント本文がコメント投稿ページに
　　表示されます。

⑤　名前、なう（同時に投稿する）、URLは、フォームから除外しています。

⑤　顔文字については、今後、追加する予定。
　　（当記事とは違う関数（スクリプト）名で紹介予定）しています。

⑥　アメンバー限定記事のコメントフォームの表示はしません。
　　コメント欄が表示されているページ（記事ページ）の表示はしません。
　　（記事番号がついているHTMLでパーマリンクのURL）

◆　フリープラグインへ追記する

①　コメントフォームを記事本文下に追加したい場合

②　コメントフォームを記事フッター下に追加したい場合

●　説明

・　下記はフリープラグインに１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

・　下記は既にフリープラグインに書かれていれば不要です。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>

・　Comment_Forms('.articleText','','','','','');　の　'.skinArticleFooter'　は
　　条件の① を参照してください。

・　Comment_Forms('.articleText','','','','','');の表示上の名称を変えたい場合は、
　　Comment_Forms('.articleText','','','','','');の状態は、下記と同じです。

Comment_Forms('.articleText','コメント投稿','この記事へのコメントを投稿します。','タイトル：','コメント：','投稿確認');

それぞれの表示名称を自由に変えればOKです。
但し、CSSで位置をうまく調整する必要があります。

▼　変えた例

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
Comment_Forms('.articleText','コメントフォーム','コメントしてね！','表題：','本文：','投稿で～す');
</script>

▼　画像（背景）にしたい場合は、全角スペースを入れる

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
Comment_Forms('.articleText','　','　','　','　','　');
</script>

または、直接HTMLタグを入れてもOKです。

◆　CSSを追記する

①　下記をCSSの最後に入れて、コメント投稿フォームの調整を行う。

/* --------------------------------------------------- */
/* コメント投稿フォームの調整　　　　　　　　　　　　　*/
/* --------------------------------------------------- */
.Comment_F form{/* コメント全体 */
border:1px solid #ff44ff !important;/* コメント全体の枠 */
padding:10px 10px 20px 10px !important;/* 内側余白 */
color:#ff44ff;/* 文字色(各表題) */
font-size:12px;/* 文字の大きさ(各表題) */
background-color:#ffffff;/* 背景色 */
}
.Comment_F .Comment_F1_input {/* タイトルの入力部分 */
color:#ff44ff;/* 入力部分の文字の色 */
border:1px solid #ff44ff;/* 入力部分の枠 */
width:300px;/* 入力部分の幅 */
font-size:12px;/* 文字の大きさ */
background-color:#ffffff;/* 背景色 */
}
.Comment_F .Comment_F1_textarea {/* コメント本文の入力部分 */
color:#ff44ff;/* 入力部分の文字の色 */
border:1px solid #ff44ff;/* 入力部分の枠 */
width:300px;/* 入力部分の幅 */
font-size:12px;/* 文字の大きさ */
background-color:#ffffff;/* 背景色 */
}
.Comment_F .form_com{/* コメント:（表題） */
float:left !important;/* 左寄せ */
padding-right:5px !important;/* 右に余白 */
}
.Comment_F .Comment_F1_button{/* 確認ボタン */
border:1px solid #ff44ff;/* 枠 */
color:#ff44ff;/* 文字の色 */
font-size:12px;/* 文字の大きさ */
margin:auto;/* 位置中央寄せ */
display:block;/* ブロックモード */
}
.Comment_F .Comment_F1_button:hover{/* 確認ボタンにカーソルを乗せた時 */
cursor:pointer;/* カーソル　ポインター */
color:#777733;/* 文字の色 */
}
/* -------- */
/* 個別調整 */
/* -------- */
.Comment_F .C_toukou{/* コメント投稿の文字 */
color:#000000;/* 文字の色 */
}
.Comment_F .desc{/* この記事へのコメントを投稿します。の文字 */
color:#000000;/* 文字の色 */
margin-left:10px;/* 左余白 */
}
.Comment_F .form_title{/* タイトル：の文字 */
color:#000000;/* 文字の色 */
}
.Comment_F .form_com{/* コメント：　の文字 */
color:#000000;/* 文字の色 */
}
/* --------------------------------------------------- */

★　追記　

前に入れたい場合は下記の様にする
（記事フッターの前に入れたいケース）

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

コメントフォームを記事内に設置する