締切済み

ヘッダをJavaScriptで追加する方法

2012/05/20 04:30

個人のWebサイトを運営している者です。今まですべてのページのヘッダにナビゲーションバーを逐一記述していたのですが、これだとコンテンツの追加・削除があるたびにすべてのページのナビゲーションバーを書き直さないといけないのでめんどうです。 SSIを使えばよいのでしょうが、私が借りているサーバはSSIやCGIが使えないので、JavaScriptで代用できないものかと考えています。 JavaScriptのdocument.createElementを使えばタグの追加はできるようですが、HTMLの追加はできるのでしょうか？ちなみに、ナビゲーションバーは <div id="header"> <ul> <li><a href="aaa.html">あああ</a></li> （中略） <li><a href="iii.html">いいい</a></li> </ul> </div> という感じです。

selfless
お礼率28% (579/2033)

JavaScript
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

みんなの回答

tracer
ベストアンサー率41% (255/621)

2012/05/21 23:14 回答No.5

No.3です。私が書くべきことは、No.4さんが簡潔にまとめられておりますが、ひとつだけ補足しますと、SEOは、直接的にアクセスを増やすためのものではなく、検索結果上位を獲得するための方法論でもなく、単に検索エンジンにサイトの構造を正確に渡すためのものだと認識しています。SEOという言葉を使った私が悪かったのかもしれませんね。ともあれ、検索エンジンにサイト構造を渡す必要がないサイトであれば、考慮する必要もありません。

mohumohu23
ベストアンサー率37% (438/1176)

2012/05/21 16:39 回答No.4

＞DreamWeaverというソフトウェアは使用したことがないのですが、調べたところ、ナビゲーションバーをテンプレートとして登録しておけば、すべてのページに一括してテンプレートを適用できるという感じなのでしょうか。ここにこのテンプレ埋める。と、コードに入れることでプレース指定することができる。＞> SEOの効果がなくなりますよ？これは、JavaScriptにナビゲーションバーを記述すると、HTMLソースからサブページへのリンクや名前がなくなってしまうからですよね？確かにSEO効果は失われますが、ナビゲーションバーってSEOではなくアクセシビリティのためのものではないでしょうか？ナビゲーションバーにそこまでSEO効果があるとも思えませんし。 seoてのは、ボットがサイトをクロールするときに、リンクを辿って行くのですから、もしそのナビゲーションとされる物以外にそこにたどり着くリンクが無ければ辿りつけない。そうすると場合によってはトップページ以外全く評価されない。ということになるので。当然ｓｅｏに響きます。

tracer
ベストアンサー率41% (255/621)

2012/05/20 10:19 回答No.3

JavaScriptでできますが、その部分に関してはSEOの効果がなくなりますよ？ No.1さんがおっしゃってるように、サーバーでできないなら、HTMLを書いているソフトウェアの機能を使えばいいと思います。たとえば、DreamWeaverにはテンプレートという機能があります。

質問者

お礼 2012/05/21 12:25

回答ありがとうございます。 No.1さんと同様の回答のようなので、こちらでまとめてお礼申し上げます。 DreamWeaverというソフトウェアは使用したことがないのですが、調べたところ、ナビゲーションバーをテンプレートとして登録しておけば、すべてのページに一括してテンプレートを適用できるという感じなのでしょうか。 > SEOの効果がなくなりますよ？これは、JavaScriptにナビゲーションバーを記述すると、HTMLソースからサブページへのリンクや名前がなくなってしまうからですよね？確かにSEO効果は失われますが、ナビゲーションバーってSEOではなくアクセシビリティのためのものではないでしょうか？ナビゲーションバーにそこまでSEO効果があるとも思えませんし。

yambejp
ベストアンサー率51% (3827/7415)

2012/05/20 09:16 回答No.2

その内容であればajaxで処理するのが簡単かも

質問者

お礼 2012/05/21 12:20

回答ありがとうございます。 ajaxについて調べてみましたが、確かにこれを使ったほうが簡単かもしれません。

dscripty
ベストアンサー率51% (166/325)

2012/05/20 05:42 回答No.1

サーバサイドでジェネレートできないならローカルでジェネレートしたファイルをサーバにコピーするといいと思う。

関連するQ&A

javascriptでCSVを読み込み表示する方法を探しています。
javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・・・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・（ulのところのCSS指定は、idではなく、classにしたいです）よろしくお願いいたします。
- 締切済み
- JavaScript
<ul>から</ul>の間をjavascriptで
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="images"> <ul> <li style="width: 354px"><a href="javascript:;">ああ</a></li> <li style="width: 354px"><a href="javascript:;">いい</a></li> <li style="width: 354px"><a href="javascript:;">うう</a></li> <li style="width: 354px"><a href="javascript:;">ええ</a></li> </ul> </div> </body> </html> の<ul>から</ul>の間の<li></li>を1個にしたり5個にしたり、<ul>から</ul>を無くしたり javascriptで動的に変更するスプリクトが知りたいです。
- ベストアンサー
- JavaScript
タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> 　<h2>page1</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab"> 　　　<li><a href="#page1"><span>page1を選択中</span></a></li> 　　　<li><a href="#page2"><span>page2</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> <div id="page2"> 　<h2>page2</h2> 　<p>パンクズ</p> 　<div class="nav"> 　　<ul id="tab2"> 　　　<li><a href="#page1"><span>page1</span></a></li> 　　　<li><a href="#page2"><span>page2を選択中</span></a></li> 　　　<li><a href="#page3"><span>pave3</span></a></li> 　　</ul> 　</div> 　<p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。よろしくお願いします。
- ベストアンサー
- JavaScript
IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。初心者です。よろしくお願いします。下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。他のブラウザでは動きました。どうしてでしょう？悩んでいます。どなたか教えてください。よろしくお願いいたします。 <html> 　　<head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> 　　</head> <body> 　　<div id="container"> 　　</div> 　　　　　　<div id="menu"> 　　　<ul> 　　　<li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> 　　　<li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> 　　　<li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> 　　　</ul> 　　</div> 　　　　</body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> 　<head> <script type="text/javascript" src="bbb.js"></script> 　</head> 　　<body> <div id="page-height"> <div id="a"> </div> </div> 　　</body> </html>
- ベストアンサー
- JavaScript
ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ 　　margin: 0px; 　　padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- HTML
Javascriptでプルダウンメニューを作りましたが関数化できません
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。初期状態では1の部分が開く。それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。縦長のプルダウンメニューです。たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。困っています。教えてください。
- ベストアンサー
- JavaScript
jqueryによるクリック時のclass名追加
サイドバーのメニューをクリックした際にどのページか分かるように、クリックしたリンクの色を変えたいと思います。例えばページAリンクをクリックした際にliタグにid=selectを追加し、他のリンクにもしid=selectがついている場合は、削除するという処理を jQueryで行いたいのですが、どのように記述すればよろしいでしょうか？分かる方、ご教授お願いします＞＜ ■HTML ----------------------------------- <div id="sidebar"> <ul> <li><a href="">ページA</a></li> <li><a href="">ページB</a></li> <li><a href="">ページC</a></li> <li><a href="">ページD</a></li> </ul> </div> ■CSS ----------------------------------- #sidebar li a { color: #F00; } #select a { color: #0F0; }
- ベストアンサー
- JavaScript
グローバルナビゲーション等の共通領域
グローバルナビゲーションをliで作っております。 <div id="header"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </div> 上記グローバルナビゲーションを、3ページで使用しております。 3ページ作成後、メニュー5が不要になったためメニュー5を消すことにしました。当然、3ページすべてでグローバルナビゲーションの修正が必要になりました。 phpでhpを作成する場合、共通部分をheader関数で抜きだし作成し、共通部分+各ページ異なる部分を結合すれば、グローバルナビゲーションの修正は、共通部分一か所の修正ですむと思います。 htmlとcssのみでグロバールナビゲーション(=共通部分)を使用し、HPを作成する時、 phpのheader関数のように、共通部分を抜き出し、必要時に結合させるといったことはできないのでしょうか？やはり、3ページすべてのグローバルナビゲーションの修正をするしか方法はないのでしょうか？ご教授お願いします。
- ベストアンサー
- HTML
cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。重ねて表示するのはどうすればいいのでしょうか？質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
javascriptとCSSを使ってのドロップダウンメニュー作成
CSSとJavaScriptを使ってドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();
- 締切済み
- JavaScript

ヘッダをJavaScriptで追加する方法