iframeを使ってCDPのメニューを管理する

up:



条件や注意点

  • iframeの高さ等の修正のためstyle.cssの編集が必要です
  • 一部のデザインを再現できない場合があります
  • 現在のページを表す.menu-onは使えません。

iframeは閲覧者の環境によっては見れない場合があります。メニューを外部化するならばPHPやSSIなどサーバー側で処理することをお勧めします(サーバーで利用できるのであれば)。または、複数のファイルを一気に編集するにはローカルで置き換えソフトを利用するという方法もあり、閲覧者の環境を問わず確実です。

閲覧環境に関する注意点

代替コンテンツの提供

iframeの実行は閲覧者の閲覧環境によって左右されます。iframeに対応していない環境や、わざと無視する環境ではメニューを参照することができず、閲覧者は貴方のサイトをそれ以上見ることができません。src値を参照して閲覧者をメニューページに誘導してくれる優しい環境(ブラウザ)もあるかもしれませんが、そうではないの環境のほうが多いです。

<iframe>この間に記されること</iframe>がiframe未対応環境に対しての代替コンテンツになります(つまり、iframe有効環境では表示されず、無効環境で表示されます)。ここに、iframeで表示するメニューページへのリンクなどを記載すると、閲覧者がメニューページを参照することができます。

それでもiframeに対応していない閲覧者にとっては不便がともなっていることを忘れないでください。編集ファイルが増えることにもなりますが、indexだけはインラインフレームを使わずメニューを記載したり、各ページの代替コンテンツにメニューページへのリンク以外にそのページと関係が深いページ(エンターページからの詳細なaboutページへだとか、小説の個別ページから目次ページへ等)へのリンクを加えたりすると、閲覧者の利便性があがります。

スクロールバーについて

メニューリストを全て表示するためレイアウトによってiframeの高さを修正する必要がありますが、その際scroll="no"html,body{overflow:hidden;}を指定してスクロールバーを表示させなくすることは控えてください。文字を大きく表示している方や、iframeのサイズを小さく表示する環境だと全てのメニューを見ることが困難になります。 iPhoneやiPadのiOS Safariでは、scrollautoyesだとiframeの高さの指定を無視して、読み込むページの全てを表示するバグがあるようです。

実践

  1. メニューリストを、テキストエディタに貼り付け、この際にclass="menu-onの記述は削除する。
    <ul>
      <li id="MENU01"><a href="index.html">index</a></li>
      <li id="MENU02"><a href="mail.html">作品</a></li>
      <li id="MENU03"><a href="diary.html">日記2</a></li>
      <li id="MENU04"><a href="link.html">リンク</a></li>
    </ul>
  2. <ul>の前にはヘッダー情報</ul>のあとには</body></html>を挿入し、これをmenu.html(便宜上なので管理しやすい名前で構いません)という名前で保存。
    ヘッダー情報
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ja">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="content-style-type" content="text/css">
    <link rel="stylesheet" type="text/css" href="csstemplate/style.css">
    <style type="text/css" media="screen"><!--
    html,body,div#MENU{
    position:static; overflow:visible; 
    width:auto; height:auto; max-width:100%; min-height:0; 
    margin:0; padding:0; border:none; background:transparent none; }
    --></style>
    <title>menu</title>
    </head>
    <body>
  3. メニューリストの記述消したhtmlファイルの、メニューリストがあった位置に、<iframe src="menu.html" class="menu"><a href="menu.html">menu</a></iframe>を挿入
    完成例
    <!--================-->
    <!--  メニュー  -->
    <!--================-->
    <div id="MENU">
    
    <h2>menu</h2>
    
    <iframe src="menu.html" allowtransparency="true" frameborder="0" style="width:100%" class="menu">
       <p><a href="menu.html">menu</a></p>
    </iframe>
    
    
    </div>
    <hr>
  4. ためしに表示してみて、大体メニュー項目全体が表示できるよう適宜インラインフレームの高さをstyle.cssで指定します。
    style.css
    iframe.menu{
         height: 高さpx;
    }
  5. ファイルをアップロード