いつものブログとは少し趣が違い、刺繍の話が出てきません。。
忘備録です。
長い間、html内に文章を書き足すのに
document.write();
というJavaScriptを使ってきました。
いつのまにか、非推奨になり、最近では使用ＮＧとまでなっていました。
なぜこのようなややこしいものを使うようになったかというと、、、
思い起こせば、20年ほど前の話です、、、
ウチのサイト内には、刺繍屋なので当然刺繍に関することを書いています。
当然Googleも見ています(^^)
ところがリンクであったり、サーチエンジンであったりと
刺繍には関係ないことを書き加えたりもしていたことがあります。
この時、Javascriptでhtmlを書き足してやると、
人間には文字は見えますが、Googleにはプログラム言語として認識していました。
これをうまく利用して、刺繍とは直接関係のない内容は上記のJavascriptで文字を表示させていました。
なぜもっと早く変えなかったかというと、、、ただの勉強不足です。知りませんでした。ｷｯﾊﾟﾘ!(^^)
そこで奮起して見つけたのが、
一か所のみに書き換えの場合に使える、
document.getElementById('IDクラス名').innerHTML =
'書き換える内容';
これならサイトのフッターにもってこい＼(^o^)／
と思い、PCサイトには問題なく使うことができました。
scriptには、
document.getElementById('IDクラス名').innerHTML =
'書き換える内容';
htmlには
<div class="idクラス名"></div> <script="このスクリプトファイル名"></script>
idで位置を決めてやればOK。
と、PCサイトはうまくいったのですが、、
問題は、、、
スマホ用のページにJquerymobileを使い、
ページをめくるように横スライドするページを多用しております。
つまり、一つのhtml内にいくつものフッターがある(@_@)
id=”” は、一つのhtmlの中に一度だけの使用と決まっています。
なので、同じクラス名でいくつも使うことができないのです。。。
この問題でくじけて長い間、問題をスルーしておりました。
最近になって、複数個所の書き換えもＯＫ！！
document.getElementsByClassName('classクラス名');
なるものに出会いました。
全くの勉強不足でした。。
ただ、書き方が少々難解で、、、
html内には
<div class="classクラス名"></div> <script="このスクリプトファイル名"></script>
と、classで位置決めをし、
script内には
window.onload=function() {
var $replacement = document.getElementsByClassName('classクラス名');
for (i = 0; i < $replacement.length; i++) {
$replacement[i].innerHTML =
'書き換える内容';
}}
と、for文を使って要素の数だけ繰り返し書き換えていきます。
これでうまく解決したはずだったのですが、、、、
なぜか、スマホサイトのJquerymobileのクラスを継承せず、cssが効かないという事態に(>_<)
打開策として、Jquerymobileの立体的なデザインは使わずに、
今風の平面のフッターにしています。
まぁ、すべてのサイトでのフッターが解決しました。＼(^o^)／
いずれのフッターも外部ファイルjavascriptを呼び出しています。
PCサイト：
https://sishuu.com/sitemap.html
スマホサイト：
https://sishuu.com/ipn/sitemap.html
コメント