全ページにメッセージボード設置しちゃおう

こんどは全ページにメッセージをつけます

本来はメッセージボードはトップページだけしか表示されません

ここのブログのようにどのページにも表示させることが出来ます

告知したい場合とかに使えるのではないでしょうか・・・・

※いつもの事ですが携帯ではフリープラグインを読み込みませんので表示できません

ヘッドの下に表示されますので前回までの記事下にランキングバナー等を付ける場合と違うと思います
たぶん注意や告知、アフェリエイトなどを貼り付ける方が多いと思いますので

今回は上地雄輔さんのメッセージボードを無断借用して見本説明します

・・・・別に他の方より短くて見本にしやすかっただけですが・・・・・

まずは記事を書くでレイアウトを決めます

文章を書き画像を配置、文字サイズ、色を決めて、リンクを貼ります・・・
といって・・あまりこったのは文字数オーバーの可能性が出てきますから注意ください

何度も書きますが・・・フリープラグインには3800文字って字数制限があります

OKでしたらHTMLタグを表示します

初回でも 説明したように余計な改行を取り除きます

行頭のカーソルをあててBackSpaceキーで改行を削除していきます

1ヶ所でも残っていると動作しませんので確認ください

全部の改行を削除し終わったらコピーします

　　　　　　1ヶ所改行削除を見逃しました・・これでは絶対に動作しません・・・↑

ここにタグを書いてください　この部分に貼り付けてから（それ以外はさわらないで下さい）

　' を使っていますのでこの中で使えるのは　" だけです

<script language="javascript"><!--
function myT() {
var myTm ='ここにタグを書いてください'
//http://ameblo.jp/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.jp/exlink/entry-10157975843.html

CSS　メッセージボード3
http://ameblo.jp/exlink/entry-10158428512.html

CSS メッセージボード4
http://ameblo.jp/exlink/entry-10158874915.html


※携帯はフリープラグインを読み込みませんので携帯では表示できません

※動作しないほとんどの原因はタグに改行が入っています

※Thickboxとか管理人コメントを分けたりとかラインカレンダーを設置してある場合は細工が必要です

ランキングのタグなどの書き方と
他のフリープラグインとのwindow.onloadのかち合い回避方法は

JavaScript 記事下に定型文を自動挿入してみる

JavaScript 記事下に定型文を自動挿入してみる2

JavaScript 記事下に定型文を自動挿入してみる3

こちらを参考にしてください

設置できた方は「できたよ～」ってコメントください

どのような使い方をされているのか

他のみなさまにも参考になると思います

次回予定は・・・・

どうやっても文字数が足りない方で・・・・

外部にファイルをおける方・・・

外部ファイルの作り方です

フリープラグインのダイエット

フリープラグインには3800文字の文字数制限があります

このブログでもいろいろとフリープラグインに設置するものを紹介してきました

すでに・・・フリープラグインの文字数制限に引っかかっている方も多いと思います

話は変わりますが・・・

先週・・・アメブロにフリープラグインの文字数制限緩和のお願いをしました

返事が来るといいな～

で・・・・

次回予定・・・・の

メッセージボードタイプは記事下のバナーとは違い

告知、注意、アフェリエイト等で使うと思われます・・・・

当然・・文字数もタグも多いと思われますので

ダイエット方法についてももう一回やっておきます

次回の記事は上地雄輔さんのメッセージボードを無断でお借りして参考にしています

・・・ので

今回も上地雄輔さんのメッセージボードで説明します

そのまま使うとダイエット前・・・・・・・　↓

var myTm ='<p><font color="#0000ff" size="3"><strong><a href="http://profile.ameba.jp/kamijiyusuke/" target="_blank">【最新情報】はこちら！</a> </strong></font></p><p>テレビ・雑誌・WEB。</p><p>上地雄輔の出演情報を知りたい方は<a href="http://profile.ameba.jp/kamijiyusuke/" target="_blank">クリック</a> ！ </p><p>※<a href="http://m.profile.ameba.jp/pub/roomTop?targetAmebaId=kamijiyusuke&amp;guid=ON" target="_blank">モバイルの方はこちら</a></p><br /><p><a href="http://secret.ameba.jp/kamijiyusuke/amemberentry-10083340214.html" target="_blank"><strong><font color="#0000ff">アメンバー限定記事はこちら</font></strong></a><img height="16" alt="！！" src="http://stat.ameba.jp/blog/ucs/img/char/char2/176.gif" width="16" /></p><p>上地雄輔の<img height="16" alt="ヒミツ" src="http://stat.ameba.jp/blog/ucs/img/char/char2/137.gif" width="16" />とは…<img height="16" alt="！？" src="http://stat.ameba.jp/blog/ucs/img/char/char2/177.gif" width="16" /></p><br /><p><font size="3"><strong><img height="16" alt="携帯" src="http://stat.ameba.jp/blog/ucs/img/char/char2/107.gif" width="16" />携帯でチェック！</strong> </font><br /><a href="http://stat.ameba.jp/user_images/d2/a2/10131855883.jpg"><img style="CLEAR: both; FLOAT: left" height="74" alt="上地雄輔オフィシャルブログ「神児遊助」 Powered by Ameba" src="http://stat.ameba.jp/user_images/d2/a2/10131855883_s.jpg" width="74" border="0" /></a></p><br /><p>　<a href="mailto:?subject=Amebaモバイル&amp;body=http://ameblo.jp/kamijiyusuke/">携帯にURLを送る</a><br />　※ドメイン指定されている方は解除をお願いいたします。</p>'

こうです・・・・・

文字数にして1600文字・・・　フリープラグイン3800文字の約4割だって・・・・

（3800文字は1バイトで3800文字です、漢字のような2バイトでは1900文字です）

まずは・・・・　<br /> を　<br> に変更します

続いてalt属性　alt="上地雄輔オフィシャルブログ「神児遊助」 Powered by Ameba"　を削除します
それから　border="0" と　>の前の　/ />を削除

ココでは全体を<div> と　</div> で囲っていますので　中の　<p> と　</p> は削除

※　</p><p> は　行が変わりますから　<br> に変更します

height="74"　　　画像の高さを削除・・・・なくても何とかなります

width="74" 　　　画像の幅も削除しちゃいます

あとは余分なスペースも削除です・・・スペースも1文字全角スペースは2文字です

それでも入りきらなければ　<strong>　</strong>　太文字は我慢しましょう

まだ・・ダメって～場合は文字色も・・・・

で、ダイエット後・・・・・・・　↓

var myTm ='<font color="#0000ff" size="3"><a href="http://profile.ameba.jp/kamijiyusuke/" target="_blank">【最新情報】はこちら！</a></font><br>テレビ・雑誌・WEB。<br>上地雄輔の出演情報を知りたい方は<a href="http://profile.ameba.jp/kamijiyusuke/" target="_blank">クリック</a> ！ <br>※<a href="http://m.profile.ameba.jp/pub/roomTop?targetAmebaId=kamijiyusuke&amp;guid=ON" target="_blank">モバイルの方はこちら</a><br><a href="http://secret.ameba.jp/kamijiyusuke/amemberentry-10083340214.html" target="_blank"><font color="#0000ff">アメンバー限定記事はこちら</font></a><img src="http://stat.ameba.jp/blog/ucs/img/char/char2/176.gif" ><br>上地雄輔の<img src="http://stat.ameba.jp/blog/ucs/img/char/char2/137.gif">とは…<img height="16" alt="！？" src="http://stat.ameba.jp/blog/ucs/img/char/char2/177.gif" width="16" /></p><br /><p><font size="3"><img src="http://stat.ameba.jp/blog/ucs/img/char/char2/107.gif">携帯でチェック！</font><br><a href="http://stat.ameba.jp/user_images/d2/a2/10131855883.jpg"><img style="CLEAR: both; FLOAT: left" src="http://stat.ameba.jp/user_images/d2/a2/10131855883_s.jpg" ></a><br>　<a href="mailto:?subject=Amebaモバイル&amp;body=http://ameblo.jp/kamijiyusuke/">携帯にURLを送る</a><br>　※ドメイン指定されている方は解除をお願いいたします。'

結果・・・・320文字　約2割のダイエットできました

※これらのタグは不必要なのではありません

　必要なんですが・・・3800文字制限の前では　やむを得ずいなくなっていただくだけです

JavaScript 記事下に定型文を自動挿入してみる3

たぶんみなさまのフリープラグインの文字数がきつくなっているかと思いますが・・・

遠慮しないでもう一つ・・・・
全ページ貼り付けのメッセージボードタイプはまだ記事がまとまっていませんので・・・
記事下の定型文をもう一回・・・・

今度は・・・記事下でも・・・・　フッターより下・・・

見本サイト　http://ameblo.jp/exlink001/

記事下フッターの下に表示されます
1ページ1記事の場合にピッタリではないでしょうか

（１ページ3記事でしたら3つの記事下に3つ表示されます）

※Thickboxとか管理人コメントを分けたりとかラインカレンダーを設置してある場合は細工が必要です

ランキングのタグなどの書き方と
他のフリープラグインとのwindow.onloadのかち合い回避方法は

JavaScript 記事下に定型文を自動挿入してみる

JavaScript 記事下に定型文を自動挿入してみる2

こちらを参考にしてください

ここにタグを書いてください　←ここに貼り付けてから　フリープラグインに貼り付けます
ここにタグを書いてください　←さわるのはこの部分だけです

前後についています　' は、消さないようにしてください

また　ここで　'　を使用していますので　タグで使えるのは　" だけです

動作しないほとんどの原因はタグに改行が入っています

フリープラグインに・・・

（サイドバーの配置で使用する方になっているのを確認ください）

<script language="javascript"><!--
//http://ameblo.jp/exlink/
function myU() {
var myUm ='ここにタグを書いてください'
var myfix = document.getElementsByTagName('div');
for(i = 0; i < myfix.length; i++){
myObj=document.getElementsByTagName('div')[i];
if((myObj.className=='entry') || (myObj.className=='entry new')){
myObj.innerHTML += ( '<div id="ume">'+ myUm + '</div>');}}}
window.onload = function(){myU();}
// --></script>

できましたらＣＳＳの最後に

#ume{/*Ａ*/
padding:20px 0 0 0;
text-align:center;
}

※　注意　Ｂ はすでに既存のCSSで設定済みです

ベーシックは40pxのスキマが
.entry{
margin-bottom:40px;
}

グリーン、ブルー、ピーチ、グレイは20pxのスキマが

.entry{
width:99%;
margin-bottom:20px;
}

もし・・・　間隔を変更したい場合はＣＳＳの最後に

.entry{
margin-bottom:30px;
}

フリースペースの文字数制限に余裕がある場合は記事下の

JavaScript 記事下に定型文を自動挿入してみる

これと両方使うことができます

バナー等の内容は変えて表示できます

その場合もwindow.onloadのかち合い回避が必要になります

↓たとえば・・　実際にはもう少し削除できますがわかりやすく

<script language="javascript"><!--
//http://ameblo.jp/exlink/

function myF() {
var myMe ='ここにタグを書いてください'
var myfix = document.getElementsByTagName('div');
for(i = 0; i < myfix.length; i++){
myObj=document.getElementsByTagName('div')[i];
if(myObj.className=='contents'){
myObj.innerHTML += ( '<p class="fix">'+ myMe + '</p>');}}}

　　　　←ここの1行削除します（window.onload = function(){myF();}）※注1
// --></script>
<script language="javascript"><!--
//http://ameblo.jp/exlink/
function myU() {
var myUm ='ここにタグを書いてください'
var myObj = document.getElementById('footer_ad');
myObj.innerHTML = ( '<div id="ume">'+ myUm + '</div>') + myObj.innerHTML;}
window.onload = function(){myF(),myU();}　←ここに上で削除したmyF()を加えます※注2
// --></script>

window.onload命令も最後に書かれたものが実行されますのでこのようにします

※注1
下に書かれているものが動作しますから削除しなくてもOKです（文字数節約のため削除した方が）

※注2

もしラインカレンダーも使っている場合　window.onload = function(){myC(),myF(),myU();}　

コメント分けも使っているよ～って場合　window.onload = function(){enThickbox(),myF(),myU();}　

フリープラグインに書かれているwindow.onload の中で一番下に書かれているものを変更すればOKです

ＣＳＳは

#message .fix{
display:none;
}
.entry .fix{
padding:50px 0 0 0;
text-align:center;
}
#ume{
padding:20px 0 0 0;
text-align:center;
}

・・・・次回予定の全ページにメッセージボードタイプはタグ部分を多く使うと思いますので

使う予定のある方はフリースペースはあけておいてください

※携帯はフリープラグインを読み込みませんので表示できません

JavaScript 記事下に定型文を自動挿入してみる

JavaScript 記事下に定型文を自動挿入してみる2

フリープラグインのダイエット

全ページにメッセージボード設置しちゃおう