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

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

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

ページパネル

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

ページ名

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

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

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

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

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

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

レイアウトパネル

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

ページサイズ

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

ページの背景

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

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

ブラウザの背景

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

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