1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Q&A > 
  5. iWebでフレームを設定する事はできますか?

iWebでフレームを設定する事はできますか?

HTMLにはフレームという、HTMLページ内に別のHTMLページを表示する機能があります。しかし、iWebではフレームセットを使用した一般的なフレームを利用する […]

  • 2016/5/7
  • 2008/10/28

HTMLにはフレームという、HTMLページ内に別のHTMLページを表示する機能があります。しかし、iWebではフレームセットを使用した一般的なフレームを利用する事は出来ません。

しかしiWebでフレームに相当する機能が使えないかというと、そうではありません。
フレームの一種ですが、インラインフレームという機能を使えば、フレームで実現しようとする事の大半は実現できます。

そこで、このページではインラインフレームを使ったページの作成方法について少し解説します。

フレームの使い道について

フレームを使う一番の目的は、コンテンツのメニュー部分とコンテンツ内容を切り離す事だと思います。メニューと内容を切り離してしまえば、メニューを変更する時に全部のページを変更しなくても済むからです。

当サイトを例にすると、下の写真の赤い部分がメニュー、緑の部分がコンテンツとして切り離す事が出来そうです。当サイトはサイト全体で100ページほどになりますが、メニューはフレームを使用していない為、少しの修正があっても全ページを修正する必要があります。なぜ当サイトでフレームを使用していないのかは後述します。

iWebでメニュー部分を独立・切り離す方法

上の写真の赤い部分、メニューの部分をiWebで切り離す為には、HTMLスニペットを使います。HTMLスニペット自体も別ファイルとなっており、独立している形ですが、さらに「インラインフレーム」を使ってメニューのHTMLを独立させるのです。
全体の流れは下のイメージ図をご覧ください。

  1. menu.htmlを作成しサーバーにアップロードします
    まず独立させる共通部分のメニューの書かれたHTML「menu.html」を準備します。テキストエディタや他のHTML作成ソフトでHTMLファイルを作成してください。
    HTMLファイルを作成したら、サーバーの任意の場所にアップロードします。
  2. HTMLスニペットでmenu.htmlを呼び出すHTMLを書きます
    メニュー部分にHTMLスニペットを配置して、HTMLスニペットのウィンドウに以下のようにHTMLを書きます。

    
    
    <IFRAME SRC="http://ドメイン名/フォルダ名/menu.html" name="メニュー" frameborder="no" scrolling="no" marginwidth="0" marginheight="0" width="160"height="800"></IFRAME>
    
    

    赤字の部分には、先ほどサーバーにアップロードしたmenu.htmlのURLを入力し、青字の部分にはメニューの幅、緑の字の部分にはメニューの高さを設定します。

これで、先ほどのイメージ図の通りにメニュー部分を独立・切り離す事ができます。

当サイトでこの方法を使用しない理由

前述の通り、当サイトではこの方法でメニュー部分を構築しておりませんので、メニューに変更があった場合は100ページを全部修正する必要があります。それでも使わない訳は、内部リンク対策です。

メニューを独立させなかった場合、メニュー部分でリンクをしているページには、自分以外の99ページからリンクを貼られています。サイト全体のページ数が増えれば増えるほど、リンク元になるページ数も増えます。

しかし、独立させてしまうと見た目は別のページでも、内部的には「menu.html」からしかリンクは貼られていませんので、ページ数が増えても内部リンクまで増えないのです。

メニューに掲載しているページは、各コンテンツのトップページなどの重要なページが多いので、面倒でもすべてのページにメニューを設置しているという訳です。

内部リンクはGoogleなどのロボットが効率よくサイト全体を読み込む為に必要な考え方ですが、ページのメンテナンスにかかる時間と天秤にかけて、良い方を選択すると良いでしょう。

私は150ページを超えたら、この方法でメニューを構築しようと考えています。

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

「役にたった」と思ったらシェアお願いします