全ページにメッセージボード設置しちゃおう
こんどは全ページにメッセージをつけます
本来はメッセージボードはトップページだけしか表示されません
ここのブログのようにどのページにも表示させることが出来ます
告知したい場合とかに使えるのではないでしょうか・・・・
※いつもの事ですが携帯ではフリープラグインを読み込みませんので表示できません
ヘッドの下に表示されますので前回までの記事下にランキングバナー等を付ける場合と違うと思います
たぶん注意や告知、アフェリエイトなどを貼り付ける方が多いと思いますので
今回は上地雄輔さんのメッセージボードを無断借用して見本説明します
・・・・別に他の方より短くて見本にしやすかっただけですが・・・・・
まずは記事を書くでレイアウトを決めます
文章を書き画像を配置、文字サイズ、色を決めて、リンクを貼ります・・・
といって・・あまりこったのは文字数オーバーの可能性が出てきますから注意ください
何度も書きますが・・・フリープラグインには3800文字って字数制限があります
OKでしたらHTMLタグを表示します
初回でも 説明したように余計な改行を取り除きます
行頭のカーソルをあててBackSpaceキーで改行を削除していきます
1ヶ所でも残っていると動作しませんので確認ください
全部の改行を削除し終わったらコピーします
1ヶ所改行削除を見逃しました・・これでは絶対に動作しません・・・↑
ここにタグを書いてください この部分に貼り付けてから（それ以外はさわらないで下さい）
' を使っていますのでこの中で使えるのは " だけです
<script language="javascript"><!--
function myT() {
var myTm ='ここにタグを書いてください'
//http://ameblo.mom/exlink/
var myObj = document.getElementById('main');
myObj.innerHTML = ( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;}
window.onload = function(){myT();}
// --></script>
フリープラグインに貼り付けます
フリープラグインには3800文字の文字数制限がありますので
文字数オーバーで保存できない場合もあります（半角で3800文字、当然スペースも1文字）
その場合は・・・・
JavaScript 記事下に定型文を自動挿入してみる
フリープラグインのダイエット
参考に減量できる部分は整理すれば収まる場合もあります・・・
このままでもいいのですが・・・・
トップページのメッセージボードと枠とか位置をそろえたほうが
トップページを表示したときに見栄えがよくなります
ここのブログのトップページを参考にしてください
または・・・・ これもトップページにも表示されますので
メッセージボードとダブッタ内容が表示されるとおかしな感じになります
その場合はメッセージボードを表示しないようにしてこちらだけを利用します↓
CSSは・・・・
#tme{
padding:15px 25px;/*上下、左右*/
border:1px solid #D4D4D4;/*枠線 太さ 線種 線色*/
font-size: 12px;
}
↑これは今回の場合のCSSです
みなさまのスキンに合わせて設定ください
#tme{ と ｝ の間に書いてください ↓このようになります
↑これは現在のこのブログのメッセージボードに合わせている例です・・・・
↓トップページではメッセージボードの上に表示されますからスキンに合わせてやってみてください
ここの 7px はCSSの初期設定で
スタンダードのグリーン、ブルー、ピーチ、グレイの場合は 7px
/* ----- page : ページリンク ----- */
.page{
margin-right:auto;
margin-left:auto;
text-align:center;
margin-top:7px;
margin-bottom:10px;
}
スタンダードのベーシックの場合は 0px
/*■ページ送り - 基本設定 - メインカラムり*/
.page{
margin:0 auto 14px auto;
padding:0;
font-size:0.85em;
text-align:center;
}
ここの間隔は・・・ もし15pxあけたい場合は・・・
#tme{
margin-bottom:15px;/*ページナビとの間隔*/
}
これらはメッセージボードのＣＳＳですが参考にしてください
#tme{ と } の間に書いてください
CSS メッセージボード2
http://ameblo.mom/exlink/entry-10157975843.html
CSS メッセージボード3
http://ameblo.mom/exlink/entry-10158428512.html
CSS メッセージボード4
http://ameblo.mom/exlink/entry-10158874915.html
※携帯はフリープラグインを読み込みませんので携帯では表示できません
※動作しないほとんどの原因はタグに改行が入っています
※Thickboxとか管理人コメントを分けたりとかラインカレンダーを設置してある場合は細工が必要です
ランキングのタグなどの書き方と
他のフリープラグインとのwindow.onloadのかち合い回避方法は
JavaScript 記事下に定型文を自動挿入してみる
JavaScript 記事下に定型文を自動挿入してみる3
こちらを参考にしてください
設置できた方は「できたよ～」ってコメントください
どのような使い方をされているのか
他のみなさまにも参考になると思います
次回予定は・・・・
どうやっても文字数が足りない方で・・・・
外部にファイルをおける方・・・
外部ファイルの作り方です