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

条件や注意点

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

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

閲覧環境に関する注意点

代替コンテンツの提供

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

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

スクロールバーについて

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

実践

メニューリストを、テキストエディタに貼り付け、この際に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>

<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>

メニューリストの記述消した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>

ためしに表示してみて、大体メニュー項目全体が表示できるよう適宜インラインフレームの高さをstyle.cssで指定します。
style.css
```
iframe.menu{
     height: 高さpx;
}
```
ファイルをアップロード