無料ブログはココログ

« Microsoft Office 2010のバグ? トリミングした画像をWord2010、 Powerpoint2010に取り込むと下図のように数ミリの小さい画像が載ります。拡大しても当然粗くなります。 | トップページ | 早春の花を求めて  »

2011年3月 9日 (水)

ページを移動せずに内容が変わるタブを作る

企業のホームページなどを見ていると、下図のように、タブ(見出し)をクリックすると、ページが移動せず、タブの中身の記事(ページ)が見られるサイトがあります(下図で言えば、タイトルは動かず、クリックしたタブの中身が変わる)。

今回こういうものを作ることになりました。
インターネット検索したところ、下記のサイトに詳しく載っていました。
All About forMというサイトです。
http://allabout.co.jp/gm/gc/23969/5/

私はホームページビルダーV11を使っていまして、本ソフトにも「スタイル」とか「イベント」というメニューがあるので、出来るのではないかと思いまして検索してみたのですが、どうにも分からず、上記のものを使わせて頂きました。

HTMLタグのことは全く知らなくても、あるいは意識しなくても、ホームページビルダーを使えば、ホームページは出来ますが、今回のAll Aboutの記事はHTMLタグが書かれていまして、これに導かれて完成することが出来ました。感謝申し上げます。

HTMLタグを知らない私の覚え書きのため、上記の記事で分からなかったところを私なりにまとめてみました。すんなり出来た訳ではなく、試行錯誤の連続でした。

ホームページビルダーで、トップページ(index.html)を作って、タイトルを入れておく。

ホームページビルダーのHTMLソースの上から4行目に、<HEAD>があるので、そこの次に、All About記事の(3-1)ChangeTab関数を記述のところに書いてある、ソースをコピペで貼りつける。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><script type="text/javascript"><!--
function ChangeTab(tabname) {
// 全部消す
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';



// --></script>

次に、(2)スタイルシートで装飾のところのソースを、すぐ上の// --></script>の次の行にコピペする。
<style type="text/css"><!--
/* 表示領域全体 */
DIV.tabbox {
margin: 0px; padding: 0px; width : 861px;
height : 1100px;
}



margin-right : 0px;
margin-bottom : 0px;
}
-->
</style>

この後、タイトル関係のHTMLタグが自然に出来ているので、(1)のHTMLを記述のところのソースをコピペする。また、(3-2)関数を呼び出す記述もコピペするという順序のようである。しかし、どこにコピペしていいものかよく分からず、適当に操作しました(HTMLの文法を知らないため)。あとで出来上がったものを、ここにコピーさせて頂きますが、(1)の中に(3-2)が混じっている下記のようなものが出来ていました。

</CENTER>
<CENTER>
<DIV class="tabbox">
<p class="tabs">
<A href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">(タブ1)</A>
<A href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">(タブ2)</A>

・(ここは、ページ数分のテキストが入ったり、画像が入ったりするが・ホームページビルダー上で作業が出来る)

</FONT></B></P>
</DIV>
 
最後に、(3-3)特定の1つを最初に表示しておく記述というのをコピペする。
 <script type="text/javascript"><!--
// デフォルトのタブを選択
ChangeTab('tab1');
// --></script>

配色とか、枠の大きさ等は、All Aboutの記事に従う。

こういう作業は、ホームページビルダーに頼っていると出来ない訳で大変なknowhowだろうと思います。しかしインターネット検索で大体のことが分かりますので、有り難いことです。

« Microsoft Office 2010のバグ? トリミングした画像をWord2010、 Powerpoint2010に取り込むと下図のように数ミリの小さい画像が載ります。拡大しても当然粗くなります。 | トップページ | 早春の花を求めて  »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« Microsoft Office 2010のバグ? トリミングした画像をWord2010、 Powerpoint2010に取り込むと下図のように数ミリの小さい画像が載ります。拡大しても当然粗くなります。 | トップページ | 早春の花を求めて  »

2017年8月
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31