アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -171ページ目

チョコットだけJavascript・・・

チョコットだけJavascriptの勉強・・・
といっても・・・私自身・・・よくわかっていないんですが・・・



<script language="javascript"><!--
var myTm ='ここにタグを書いてください'
//http://ameblo.jp/exlink/
function myT() {
var myObj = document.getElementById('main');
myObj.innerHTML = ( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;}
window.onload = function(){myT();}
// --></script>


これは前回の全ページにメッセージボードをのプラグイン(Javascript)です

var myObj = document.getElementById('main');
myObj #main の内容を入れます(classの場合は使えません)

( '<div id="tme">'+ myTm + '</div>') + myObj.innerHTML;


myTmの前後にCSSで使うための<div id="tme"></div>で囲ってから
その後に#mainの内容を加えます


結局・・・myTm が #mainの最初に付け加えられます


+ はなんとなく加えるとか足すでイメージできると思いますが・・・・

= だけ注意ください

数学の = とは違います 数学は C=A+B ですが・・・ A=A+B です

JavaScriptにおける = は、左辺の変数に右辺の値を代入する代入演算子です

A に A+Bを代入します・・・? わかるようなわからないような・・・?

でも・・これが基本なのでわかってください・・としか言いようがないです


A=A+B Aの後にBを加えたのをAに代入


では・・・#mainの最後に加えるにはどうすればいいのか?

上のA=A+Bそのままですね・・・
+は数字の加算でも使いますが・・この場合は文字列結合です

myObj.innerHTML これをA   '<div id="tme">'+ myTm + '</div>')コレをBとすれば・・


var myObj = document.getElementById('main');
myObj.innerHTML = ( myObj.innerHTML + '<div id="tme">'+ myTm + '</div>') ;}

と・・順番を変えればいいだけです

#mainの内容の後に<div id="tme">以下を加えます


で・・・ 文字数節約のために? += を使います
A = A + B と A += B は同じなんです

var myObj = document.getElementById('main');
myObj.innerHTML += ( '<div id="tme">'+ myTm + '</div>');}

これで#mainの最後に加えることが出来ました

#mainを別のid名に変更すれば 前にも後ろにもつけることが出来ますね

その場合・・
<div id="tme">のid名(ページ内で何度も使う場合はclass名)と
myTmは今までに使っていないものにすればかち合わずに使用できます

myObj はただの変数ですから a でも B でも なんでもいいんですけどね・・・



よくわからない場合はネットで検索ください m(_ _)m

疲れていますか・・・?

寝る前に・・・

ブログのソースを眺めてカスタマイズについて考えていました・・・





あっ・・・

新しいコメントにクラスが付いているジャン・・・


この間・・・コメントの順番が変わったときにつけてくれたんだ・・・



早速・・・ベッドから飛び起きてパソコンのスイッチを・・・



あれ?ソースを見てもそんなところがありません?






今までも

頭の中で・・・

ああしたら・・・とか

こうしよう・・・・なんて思いついたり考えたりしていました





が・・・・

夢で飛び起きてパソコンチェックしたのは初めてです・・・





いまでも・・・夢だなんて信じられません?


疲れていますか・・・?




追記・・・・

おはようございます・・・・・

記事を書いてから再度寝たら・・・

正夢になっていたって~夢をみました

なんか・・・ややこしや~・・・・ややこしや~・・・・・・・

表示崩れ自己診断チェックシート

「CSSをやっていたらブログの表示がおかしくなっちゃったんですけど~・・・」

よく問い合わせいただくフレーズです・・・

突然・・・文字が大きくなってしまいました・・・・

他にも小さくなってしまった、文字色が変わってしまった・・・
記事がサイドバーに入ってしまった・・・・などなど



みなさま・・ CSSを原因だと思われているのですが・・・



・・が!


・・・・が!!


CSSが原因で表示が崩れた例はほとんどありません!!!


ブラウザーによって見え方が違う場合は・・・

CSSかブラウザーのバグかです・・・


原因さえわかれば元の戻せますので落ち着いて対処ください





で・・・・・

表示崩れ自己診断チェックシート



質問に対して○(正常に表示)か×(表示が崩れている)をクリックしてください


表示が崩れる原因はいろいろありますので全部を説明はできませんが
原因がどこにあるのかは突き止めることができます


表示が崩れているのに気がつくのはトップページだと思います・・・・・・

自分のブログのトップページを別のウィンドウに表示させてから行ってください

どれにも当てはまらない場合のみCSSのエラーが疑われます


http://ameblo.jp/un001/

http://ameblo.jp/un002/

見本ブログは表示が崩れています
どこに原因があるのか試してください・・・・・



サイドバーの途中までしか表示されない・・・・

全部が表示されるのにいつもより極端に時間かかかるようになった・・・


そんな場合は・・・・・ こちらです






トップページ(表示が崩れているページ)以外を表示してください

どの方法でもかまいません1つだけ実行してください
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!







トップページに表示してある記事全部を
1記事ずつ記事のURLをクリックして表示してみます



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!








メッセージボードをメモ帳とかに保存してから
メッセージボードのHTMLタグを表示させて全部を削除します


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!








サイドバーの配置でフリースペースを使用しない方にドラッグします


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


使用するに戻してから○×ボタンをクリックして下さい







サイドバーの配置でフリープラグインを使用しない方にドラッグします


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!









表示が崩れている記事に原因があります

・fontタグの閉じ忘れ・・・
・余計な</div>が入っていませんか?








メッセージボードに原因があります

・fontタグの閉じ忘れ・・・







記事に原因があります

・ランキングバナーなどコピペで各記事に貼り付けている部分はありませんか?
 </div>が<div>になっていたりとか・・・・
 1ページに複数記事表示されることにより 1つでは崩れなくても複数個あることで影響している可能性があります







フリープラグインに原因があります

・途中まのプラグインがありませんか?
・余計なタグは入っていませんか?







フリースペースに原因があります

・ ・・・border="0"></a 一番最後タグが閉じられていますか?
 </a →  </a>
・<div align="center">など中央寄せをしたのに</div>閉じられていますか?
・逆に余計な</div>が入っていませんか?
・ブログパーツを貼り付けていないですか?







フリープラグインとフリースペース両方に原因があります
またはCSSに間違いがあります






こんなんが原因でおかしくなっていたよ~ってコメントください m(_ _)m

事例として枠内に載せます

もちのろん・・ これで見つからなかったって~場合もお願いします