ファイル名を右クリックし、「対象をファイルに保存」で、自PCに保存して、仕組みを理解したり、書き換えて自サイトにお使いになったり、ご自由にご使用ください。下記5ファイルについては、ごく基本的な内容ですので、再配布もかまいません。画像については再配布不可です。自PCで書き換えて試用するときは、画像は適当にお手持ちのもので補ってください。
・index.htm(この頁)
・menu.htm(左メニュー)
・style.css(スタイルシート、メイン頁・メニュー兼用)
・sky.htm(コンテンツ頁サンプル)
書き換えはご自由にどうぞ。最低限、以下の3タグがわかれば、使用可能かと思います。
<br>=改行です。
<img src="[画像ファイル]">=imageの略。画像を挿入します。
<a href="[リンク先URL]">[リンク文字列]</a>=anchorの略。リンクを示します。
(<a href="[リンク先URL]"><img src="[画像ファイル]" border="0"></a> とすれば、画像にリンクが貼れます。)
このサイトのように、左側にメニューがあり、右側にコンテンツ(文章や画像)があるスタイルのレイアウトの需要は高い。
閲覧者に見やすく、次々に作品を開いていくような場合はことに便利である。作品ごとにファイルを切り分けているため、ファイルがあまり重くならない。
サイト作成者の側では、メニューファイルを1つ変更すればすべての頁に反映することができるため、便利である。
通常は、これをフレーム(frame)タグで実現する。
フレームの欠点は、主に下記の3つだろう。
1.個別の作品ページにURLが付与されない。(作品を載せたHTMLに直接アクセスすると、メニューが消えてしまう
2.SEO対策上、弱い(検索されにくい)
3.アクセシビリティ上問題がある(視覚障害用ブラウザで読み取れない)
上に、フレームが王道と書いた。だがアイフレームでも似たようなページが書ける。実際に書いたのが、あなたがいまごらんになっているこのページだ。
フレームをアイフレームに変えることで、どんなメリットがあるかを、挙げておく。
このページのようにコンテンツをメインにし、アイフレームの中身にメニューを指定した場合、「コンテンツにURLがない」という弱点は克服される。
個別コンテンツにURLがあるため、トップや他サイトで新作をリンクして宣伝すれば、そのリンクを通って検索ロボットが個別コンテンツページに入り込み、検索サイトに掲載してくれる。ただし、メニューページには入りにくいため、メニューからのリンクはページランクアップにカウントされない可能性がある。
視覚障害用ブラウザでこのページがどう表示されるかは、正直、調べきれていない。しかし……、残酷の謗りを覚悟で書くが。写真やイラストのサイトで、視覚障害用ブラウザのために、他のユーザーが不便をしのぶことに、どれだけの意味があるのだろうか?
現状のW3C標準では、フレーム・アイフレームは共に非推奨である。どうもHTML5でアイフレームが復活するらしいのだが、長編小説や、絵・写真をウェブで発表したい人たちは、「いま」発表したいのだ。標準が変わるのを待ってはいられない。
ウェブが、自分の作品を発表する方たちにとって「良い」場所でありますように。このささやかなテンプレートに、願いをこめて。(阿檀)