[Jan 27, 2019]

こちらのホームページは西暦2000年に開設し、それからというもの、非常に古いツールで作っています。<(^_^;; 無料版の FrontPage Express です

そして、開設以来10年以上に渡って、「上段メニュー」＋「本文」＋「下段メール/アクセスカウンタetc」の3つのhtmlファイルをフレーム構成で運営していたのです。

実例を挙げてみますと、まぁ、こんな↓具合ですね。

<frameset rows = "50,*,50" frameborder = 0>

<frame src="menu.html" name="menu" scrolling="NO">
<frame src="honbun.html" name="room" scrolling="YES">
<frame src="footer.html" name="foot" scrolling="NO">

<noframes>
<body>
すみません、このページを見るのにはフレームの表示ができるブラウザが必要です。<br>
代わりに、<a href="honbun.html"><strong>こちら</strong></a>へどうぞ。
</body>
</noframes>

</frameset>

で、参照している 3つの html ファイルのうち、真ん中の honbun.html から、他のファイルにリンクを続けていくことでホームページとなっていた訳です。

しかし、いつ頃からでしょうか。

検索エンジン最適化(SEO対策*1)や、スマホの台頭(*2)などの影響により、「フレーム形式のホームページなんてあり得ない」みたいな風潮に切り替わって行きましたよね。

*1: 検索対象ワードとヒットするページが一意になっていることが重要。フレーム形式だとヒットしづらくなる。

*2: 画面が狭い傾向にあるため、常時、表示されたままになる部分の面積が広いと嫌われる。

そこで大変に遅まきながら、当サイトも2年ほど前にフレーム表示を取りやめました。

もちろん、単純にフレーム表示をやめて honbun.html だけに置き換えてしまったら、上段メニューも、下段メール/アクセスカウンタも無くなってしまいます。

かと言って、全てのページ記載をひとつひとつ書き換えるのは大変です。仮に、最初の一回は置き換えをがんばるにしても、何かしらのメニューの一か所が変わるだけでも、全ファイルを編集し直さないといけなくなるのは絶対に避けたい・・・

そのように考える中で、いくつか対応方法はあろうかと思うのですが、私は javascript を使うことにして、上段メニューを header.js、下段メール/アクセスカウンタを footer.js に置き換える道を選びました。

また同時に、Googleの「モバイルフレンドリー対応」を実現するべく、Viewport の設定をしてみました。

具体的には、全ての html 本文ページに対して、

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>『おもちゃの部屋』 by ほわでび(howadebi)</title>
</head>

<body>
<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript" src="js/footer.js"></script>

<script type="text/javascript">header();</script>
:
:
: ここが元々書かれていた本文の内容に該当
:
:
<script type="text/javascript">footer();</script>
</body>

</html>

といった要領で、先頭にはviewport 属性の設定とヘッダ用の記述、末尾にはフッタ用の記述を javascript として呼び出すように追加。

そして、たとえばヘッダの実体は、js というフォルダ内に header.js というファイルを作成し、

function header(){

var html="";

html+= '<p><strong>ほわでびの「おもちゃの部屋」へようこそ!:</strong>';
html+= '<a href="index.html">最初にどうぞ</a>';
html+= ' 〜 ';
html+= '<a href="now/lunchbox.html">お弁当/お料理</a>';
html+= ' 〜 ';
html+= '<a href="now/goout4lunch.html">外食日記</a>';
html+= ' 〜 ';
html+= '<a href="now/link.html">リンク</a></p>';

document.write(html);
}

とかいった記述で、ヘッダやフッタの html を動的生成するようにしたのです。

一見、面倒くさそうですが、もともと使っていた menu.html の中身を、html という変数に代入する書式に変えるだけですから、作業は単純ですよ。

こうなってくると、メニュー表示なども、もう少し凝ってみたくなるのが人情というものです。(^_^)

ヘッダファイルで jQuery をロードしてから、load や scroll といったイベントで、メニューのスタイルシートを動的に切り替えるようにしてみました。

関連するファイルは、以下のようになっています。

ファイル 目的
js/header.js ヘッダ表示(index.html専用)
js/footer.js フッタ表示(index.html専用)
now/js/header.js ヘッダ表示(index.html以外の全html用)
now/js/footer.js フッタ表示(index.html以外の全html用)
now/js/main.js メニュー表示動的変更用javascript
now/js/style.css メニュー表示動的変更含むスタイルシート
now/js/jquery-*.*.*.min.js jQuery 本体

当ホームページは、若干トリッキーなディレクトリ階層となっており、また、そのトリッキーな構成に頼ったパスの記載になっている点が分かりづらいかもしれません。

今後、気が向いたときに、内容についての解説を記して行きたいと思います。p(^_^)

[Feb 13, 2019]

前回のアップから、だいぶ日があいてしまいましたが、メニュー表示を動的変更している仕組みについて、書いてみたいと思います。

ファイル 目的
js/header.js ヘッダ表示(index.html専用)
js/footer.js フッタ表示(index.html専用)
now/js/header.js ヘッダ表示(index.html以外の全html用)
now/js/footer.js フッタ表示(index.html以外の全html用)
now/js/main.js メニュー表示動的変更用javascript
now/js/style.css メニュー表示動的変更含むスタイルシート
now/js/jquery-*.*.*.min.js jQuery 本体

まず、大きな考え方なのですが、

という作戦になっています。

この目的を果たすために、各ファイルに記述してある内容をざっと追って行くとしましょう。

  1. ヘッダ表示用ファイル(header.js)にて、スタイルシート(stye.css)を参照するようにしておく。

    function header(){

    var html="";

    html+= '<link href="../now/js/style.css" rel="stylesheet" type="text/css">';
    html+= '<script src="../now/js/jquery-3.3.1.min.js"></script>';
    html+= '<script src="../now/js/main.js"></script>';

    html+= '<header class="site-header">';

    html+= '<p><strong>ほわでびの';
  2. 同ファイルにて、jQuery を使えるようにしておく。

    function header(){

    var html="";

    html+= '<link href="../now/js/style.css" rel="stylesheet" type="text/css">';
    html+= '<script src="../now/js/jquery-3.3.1.min.js"></script>';
    html+= '<script src="../now/js/main.js"></script>';

    html+= '<header class="site-header">';

    html+= '<p><strong>ほわでびの';
  3. 同ファイルにて、表示を動的制御するためのjavascript(main.js)をロードしておく。

    function header(){

    var html="";

    html+= '<link href="../now/js/style.css" rel="stylesheet" type="text/css">';
    html+= '<script src="../now/js/jquery-3.3.1.min.js"></script>';
    html+= '<script src="../now/js/main.js"></script>';

    html+= '<header class="site-header">';

    html+= '<p><strong>ほわでびの';
  4. 同ファイルにて、メニューを表示している部分を <header cass="適当なクラス名"> 〜〜〜 </header> のようにクラス名をつけたタグで囲っておく。(ここでは "site-header")

    function header(){

    var html="";

    html+= '<link href="../now/js/style.css" rel="stylesheet" type="text/css">';
    html+= '<script src="../now/js/jquery-3.3.1.min.js"></script>';
    html+= '<script src="../now/js/main.js"></script>';

    html+= '<header class="site-header">';

    html+= '<p><strong>ほわでびの「おもちゃの部屋」へようこそ!:</strong>';
    html+= '<BR>';
    html+= '<a href="../index.html">最初にどうぞ</a>';
    html+= ' 〜 ';
    html+= '<a href="../now/lunchbox.html">お弁当/お料理</a>';
    html+= ' 〜 ';
    html+= '<a href="../now/goout4lunch.html">外食日記</a>';
    html+= ' 〜 ';
    html+= '<a href="../now/link.html">リンク</a></p>';

    html+= '</header>';

    document.write(html);
    }
  5. 今後はスタイルシート(style.css)側。.site-header に関するスタイルを定義しておく。(メニューをデフォルトで表示するための記述)

    .site-header{

    background: #efefef;
    display: flex;
    position: fixed;
    padding: 0px 0px 0px 10px;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;

    }

    .site-header.transform{

    top: -100px;

    }
  6. 更に同じスタイルシート内で、.site-header.transform というスタイルを定義しておく。(メニューを隠すための記述。100ピクセル画面上部へ追い出す。)

    .site-header{

    background: #efefef;
    display: flex;
    position: fixed;
    padding: 0px 0px 0px 10px;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;

    }

    .site-header.transform{

    top: -100px;

    }
  7. 最後はmain.jsファイル。条件に応じて .site-header のクラス名に '.transform' という文字列を付加したり、消去したりする。(下スクロールかつ256ピクセル以上動いたら、クラス名に'transform'を付加してメニューを隠す)
    $(function(){

    　var _window = $(window),
    　_header=$('.site-header'),
    　startPos,
    　winScrollTop;
    　
    　_window.on('scroll',function(){

    　　winScrollTop=$(this).scrollTop();
    　　if( winScrollTop >= startPos ){

    　　　if(_window.scrollTop() > 256){

    　　　　_header.addClass('transform');

    　　　}

    　　}else{

    　　　　_header.removeClass('transform');

    　　}

    　　startPos=winScrollTop;

    　});

    　_window.trigger('scroll');

    　_window.on('load',function(){

    　　if( _window.scrollTop() > 10 ) {

    　　　_header.addClass('transform');

    　　}

    　});

    　_window.trigger('load');

    });

というものです。

通常であれば、スタイルシート中に定義されたクラス名で指定された書式に基づき、描画が行われている訳ですが、そのクラス名を強引に切り替えてしまうことで、別の書式での描画に切り替えるのがポイントです。これを行うのが 7番目の工程ですね。(^_^)p

また、上の解説では触れませんでしたが、7番目の工程で、

　_window.on('load',function(){

　　if( _window.scrollTop() > 10 ) {

　　　_header.addClass('transform');

　　}

　});

という記載があるのにも意味があります。

これは、リンクをクリックして別の html ファイルを開いた際、ブックマーク(＝ #マークの後に英数字などを付けて位置を指定すること)で、ページ途中からの表示をさせる場合への配慮です。

このようなケースでは、メニューが重なってしまうと表示したい内容が隠されてしまうことがあるため、ページ先頭付近ではない場所から表示が始まる(10ピクセルよりも多くスクロールされた位置だったら)、あえてメニューを隠すようにしているのでした。(^-^)p

[一覧に戻る] [次の年(2020)へ]