旧・ベーシックスキン用の
全ページにメッセージボード設置しちゃおう
これの新・ＣＳＳ編集用デザインバージョンです
今回はjqueryを使いますから文字数はそれほど気にしなくても大丈夫です
ただ・・全部のページの記事上に表示されますからあまり大きいと記事が下のほうに表示されてどのページを開いても同じメッセージボードしか見えないってことになりかねませんから肝心なことだけを書くようにしてください
長々と書きたい場合は普通のメッセージボードを使います
まずはメッセージボードに載せる文章を書きます
わかりやすいのはタグ編集エディタを使います
いつも標準エディタを使って記事を書いている方は・・・
タグ編集エディタに切り替えます（次に使うときにはいつもの標準エディタに戻ります）
記事を書く要領でメッセージボードに書く文章を作ります
プレビューを見てOKだったら・・
一番最初に<div id="apMe">
一番最後に</div>
この全ページにメッセージボードに背景をつける場合は・・・
一番最初に<div id="apMe"><div id="apMe2"><div id="apMe3">
一番最後に</div></div></div>
を加えます（これはプレビューには表示されません・・・)
できましたらコピーして記事を終了します
保存はしなくてもかまいませんが・・・
「全ページにメッセージボード」って記事タイトルをつけて保存しておくと
後から修正したり付け加えたりする場合に便利です
コピーしたらそれをフリースペースの編集で貼り付けます
プレビューに先ほどと同じように表示されていればOKです
最初につけた<div id="apMe">または<div id="apMe"><div id="apMe2"><div id="apMe3">や最後につけた</div>などは表示されないはずです
OKなら保存します
このままではサイドバーのフリースペースに表示されるだけですから記事上に移動させます
それでははフリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
または（ ↑↓どちらか1つが入っていれば大丈夫です ）
<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします
入れたあるいは入っているのを確認したら・・フリープラグインに↓コピペ
<script type="text/javascript">
$(function(){
$("#apMe").insertBefore(".skinMainArea2");
});
</script>
これを使って「読者になるボタン」を設置されている場合は・・
これより前に書けば全ページメッセージボードの下に「読者になるボタン」が
後に書けば全ページメッセージボードの上に「読者になるボタン」が表示されます
//おまじない
<div class="plugin"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
//全ページにメッセージボード
<script type="text/javascript">
$(function(){
$("#apMe").insertBefore(".skinMainArea2");
});
</script>
//記事の上に読者になるボタン
<script type="text/javascript">
$(function(){
$(".readerRequestBtnArea .readerBtn").clone().insertBefore(".skinMainArea2");
});
</script>
読者になるボタンより前に書くと・・・
読者になるボタンの上に全ページメッセージボードが表示されます
//おまじない
<div class="plugin"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
//記事の上に読者になるボタン
<script type="text/javascript">
$(function(){
$(".readerRequestBtnArea .readerBtn").clone().insertBefore(".skinMainArea2");
});
</script>
//全ページにメッセージボード
<script type="text/javascript">
$(function(){
$("#apMe").insertBefore(".skinMainArea2");
});
</script>
読者になるボタンより後に書くと・・・
読者になるボタンの下に全ページメッセージボードが表示されます
基本のＣＳＳです
/*全ページにメッセージボード*/
#apMe{
margin:10px 0;
}
全ページメッセージボードの上下に10pxの隙間ができます
ボーダー（線）で囲たり背景色をつけたり文字色を変更するには・・・
メッセージボード 線と背景色
この記事を参考にＣＳＳに
/*全ページにメッセージボード*/
#apMe{
border:1px solid #0000ff;/*線の太さ 線種 線の色*/
color:#0000ff;/*文字色*/
background-color:#ff0000;/*背景色*/
}
/*全ページにメッセージボードの中のスキマ*/
#apMe3{
padding: 16px 30px;/*上下 左右*/
}
CSSで背景画像を作るには・・・
これらの記事に書かれているＣＳＳのセレクタ部分を
.skinMessageBoard{ → #apMe{
.skinMessageBoard2{ → #apMe2{
.skinMessageBoard3{ → #apMe3{
にそれぞれ変更します