1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. ページインスペクタの使い方

ページインスペクタの使い方

インスペクタ【ページ】は、選択しているページの名前(出力されるHTMLのファイル名にもなります)や、ヘッダ・フッタのサイズなど、ページ全体のレイアウトの調整を行 […]

  • 2016/5/2
  • 2008/2/10

インスペクタ【ページ】は、選択しているページの名前(出力されるHTMLのファイル名にもなります)や、ヘッダ・フッタのサイズなど、ページ全体のレイアウトの調整を行うインスペクタです。

自動的に作成される「ナビゲーションメニュー」の設定も、このインスペクタパネルで行います。
ページインスペクタは、ツールバーの「インスペクタ」ボタンか、「コマンドキー(アップルマークのあるキー)+オプションキー+iキー」で表示されます。

ページパネル

ページインスペクタのページパネルの設定項目をご紹介します。

ページインスペクタのページパネル

ページ名

選択されているページの名前を指定します。この名前はタイトルタグではなく、ファイル名になります。ページ名に日本語を使う場合、ブラウザによっては正しく表示されない事があります。
参考:ブログのエントリーページを英数字にする方法

タイトルタグは、サイドバーの一番上のサイト名になってしまいます。

ナビゲーションメニューにページを含める

ページのヘッダに表示するナビゲーションメニューに、選択されているページを含めるかどうか選択します。

ナビゲーションメニューを表示

ページのヘッダ(一番上)部分に、ページのリストを表示します。このリストはリンクになっていて、ナビゲーションメニューとして使えますが、ページ数が多いと見にくくなってしまうので、注意が必要です。

レイアウトパネル

ページインスペクタのレイアウトパネルの設定項目をご紹介します。

ページインスペクタのレイアウトパネル

ページサイズ

  • 上下のパディング
    ページの最上部、最下部の隙間の設定です。
  • コンテンツの幅
    コンテンツを配置できるWebページキャンパスの幅の設定です。
  • コンテンツの高さ
    コンテンツを配置できるWebページキャンパスの高さの設定です。コンテンツの高さによってページの高さは変わりますので、最低限の高さの設定です。
  • ヘッダの高さ
    ページ上部にメニューなどをおくヘッダの高さです。
  • フッタの高さ
    ページ下部にメニューなどをおくフッタの高さです。

ページの背景

Webページキャンパスの背景の設定をします。「なし」「カラー塗りつぶし」「グラデーション塗りつぶし」「イメージ塗りつぶし」「半透明イメージ塗りつぶし」から選択できます。

「イメージ塗りつぶし」「半透明イメージ塗りつぶし」の時には、指定したイメージをどのように配置するか選択できます。イメージに合った配置の方法を選択しましょう。

ブラウザの背景

ブラウザで表示したときのWebページキャンパスの外側の背景を設定します。「カラー塗りつぶし」「イメージ塗りつぶし」から選択できます。

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