ページインスペクタ

ページインスペクタでは、ファイル名、画像形式、Meta タグ、サイドバーの内容、ページ固有のカスタム CSS または Javascript などのページ属性を手軽に編集、変更できます。選んだページをカスタマイズできる大変パワフルな機能です。

ページインスペクタを開くには、アクションメニューからページインスペクタを選択するか、ウインドウメニューから選択するか、Command + I を押します。

ページインスペクタは4つのタブで構成されています：

  • 情報:ページタイトル、ファイルやフォルダ名、表示オプション、画像形式、ページ出力方法を設定します。
  • サイドバー:サイドバータイトル（使用されている場合）を編集し、ページのサイドバーにコンテンツを追加します。
  • 詳細設定:ページアセットや Meta タグを追加、もしくは選択中のページのプロパティを他のページに適用します。
  • コード:カスタム Javascript や CSS を選択したページに追加、もしくは <!DOCTYPE> タグの前にコードを挿入します。

これらのオプションは、ページリストで選択したページにのみ適用されます。このオプションをプロジェクト内の残りのページにも適用するには、詳細設定タブにある「プロパティをすべてのページに適用」オプション（下記を参照）を使用します。また、これ以降プロジェクトに追加するページに対しこれらのオプションをサイト設定パネルで事前に設定しておくことも可能です。.

情報

初めてページインスペクタを開くと、情報タブが表示されます。このタブでは、選択したページのファイルやフォルダ名、表示オプション（そのページをナビゲーションメニューで表示するかどうかも含みます）、画像形式、ページ出力方法、タイトル、スローガン、著作権情報を設定します。また、エンコーディングの指定や出力オプション設定もページインスペクタの情報ペインから可能です。

「ページインスペクタ」でページごとのオプションを設定します
ページインスペクタ - 情報タブ


情報ペインの各オプションについては、下記をご覧ください：

  • ページタイトル：ナビゲーションメニューにおけるページの名前を設定します。
  • ブラウザタイトル：ブラウザのウインドウ上部にあるタイトルバーで使用されるタイトルを設定します。
  • フォルダ：選択中のページの保存先フォルダの名前を設定します。ページをサイトのルートディレクトリに置きたい場合は、フォルダ名を「/」（カギ括弧は除く）と設定します。それ以外は自由にフォルダ名をつけて構いません。また、「/」 とフォルダ名を使用して、同じフォルダに複数のページを置くこともできます。例えば「/software」などです。
  • ファイル：「photos.html」や「downloads.php」など、選択したページのファイル名や拡張子を設定します。トップページはサイト設定で異なるファイル名をつけない限り、常に「index.html」となります。
  • 使用する:チェックする（デフォルト状態）と、このページは Web サイトの一部として公開または書き出しされます。チェックを外すと、そのページは公開または書き出しの対象になりません。
  • メニューに表示しない:チェックを外す（デフォルト状態）と、このページはナビゲーションメニューに表示されます。チェックすると、そのページはナビゲーションメニューに表示されません。
  • 新規ウインドウで開く:チェックを外す（デフォルト状態）と、ナビゲーションメニューで選択されたときに、このページは現在選択しているブラウザウインドウに読み込まれます。チェックすると、ナビゲーションメニューでクリックされたときに、このページは新しいブラウザウインドウで開きます。
  • タイトル：チェックを外す（デフォルト状態）と、このページはサイト設定で設定したサイトタイトルを使用します。. チェックして別のタイトルを入力すると、このページのデフォルトサイトタイトルは入力されたものに換わります。
  • スローガン：チェックを外す（デフォルト状態）と、このページはサイト設定で設定したスローガンを使用します。. チェックして別のテキストを入力すると、このページのスローガンは入力されたものに換わります。
  • Copyright：チェックを外す（デフォルト状態）と、このページはサイト設定で設定した著作権情報を使用します。. チェックして別のテキストを入力すると、このページの著作権情報は入力されたものに換わります。
  • 画像形式：サイトに画像を手動で追加すると、その画像は「オリジナル」、「JPEG」、または「PNG」の中から選択した画像形式に自動的に変換して出力されます。「オリジナル」を選択すると、RapidWeaver は元のファイル形式を使用します。「JPEG」を選択すると、圧縮の品質設定が可能になります。
  • コード出力：HTML ページやスタイルつきテキストページに HTML を追加するときには、ミスがつきものです。こうしたミスを自動的に修正し、雑な編集をきれいに配置されたマークアップに整頓する簡単な方法があればよいと思いませんか？これがそうです！コード出力ポップアップメニューから「整理」や「最適化」を選ぶと、RapidWeaver がよくある HTML の間違いを修正してくれます。
オプション 説明
デフォルト 修正を行わず、コードをそのままにしておきます。
整頓 ページを調べ、誤りを検査します。また、特によくある HTML の問題の修正を試みます。
最適化 整頓モードと同じくページを調べて誤りの修正を試みますが、さらに HTML を最適化してファイルがきれいに表示が速くなるようにします。
TIP:メインウインドウでコードタブをクリックするか、Shift + Command + R を押して表示されるコードビューの「エラーや警告」エリアで、ページの診断結果を見ることができます。
  • エンコード：ブラウザによるコード解釈を選択します。Western (ISO Latin 1) と Unicode (UTF-8) から選択します。日本語のページを作成する場合は、「Unicode (UTF-8) 」を選択します。
  • XML 宣言を使用:このページに XML 宣言を使用する場合はチェックします。

サイドバー

ページインスペクタのサイドバーペインでは、スタイルつきテキストや HTML を用いて Web サイトの左側、右側、または下側にコンテンツを追加できます。

スタイルつきテキストや HTML のコンテンツをサイドバーに追加します
ページインスペクタ - サイドバータブ


例えば、Web バッジを追加したり、Web サイト用検索ツール、チャットの状態表示などを配置できます。サイドバーにはほとんど何でも配置できますので、単一のページ、さらにはサイト全体の機能を向上させることができます。

バッジやボタン、リンク、その他のコンテンツがサイドバーに追加できます
コンテンツを追加したサイドバー


ページインスペクタのサイドバーペインは、サイドバータイトルフィールドとサイドバーコンテンツボックスの2つの部分から成っています。Web サイトのサイドバーに任意でタイトルをつけるには、サイドバータイトルフィールドにタイトルを入力します。スタイルつきテキストを追加するには、「スタイルつき」ボタンをクリックし、スタイルつきテキストページで編集するのと同じ要領でコンテンツを追加します。. HTML のコンテンツを追加するには、「HTML」ボタンをクリックし、HTML ページで編集するのと同じ要領でコンテンツを追加します。.

詳細設定

ページインスペクタの詳細設定ペインには3つの強力なツールがあります：

  • ページアセット:訪問者が入手可能なファイルの置き場です。
  • Meta タグ:ページの Meta タグを作成し、検索エンジンでページを見つけてもらえるようにします。
  • プロパティをすべてのページに適用...:選択したページのページプロパティを他のページに適用できるようにします。
ページにページアセットや Meta タグを追加します
ページインスペクタ - 詳細設定タブ


ページアセット
ブログページやスタイルつきテキストページなどで、訪問者がダウンロードできるようにしたいファイル（オーディオやムービー、ドキュメントファイルなど）をページアセットボックスにドラッグアンドドロップしておきます。ページアセットにファイルを追加しておけば、編集ビュー下部の「リンクを追加」ボタンをクリックして、今編集中のページからそのファイルにリンクを設定できます。

NOTE:選択したページにアセットを追加しても、Web サイトプロジェクトの他のページで自動的にそのアセットが入手できるようにはなりません。選択したページのページアセットはそのページ固有のものです。


Meta タグ
検索エンジンで自分の Web サイトの内容をすぐ検出してもらいたい場合は、Meta タグを使いましょう。下記はよく使われるメタタグの例です。この内容はご自分のサイトに合わせてカスタマイズしてください。 

meta name="keywords" content ="Apple, Software, RapidWeaver"
meta name="description" content ="Software for Mac OS X"
meta name="author" content ="Realmac Software"
meta name="Copyright" content ="© 2006 Realmac Software"
meta name="robots" content ="all"

Meta タグをページに追加するには、(+) ボタンをクリックします。選択された行で「名前」列のすぐ下の行をダブルクリックします。入力可能になったテキストエリアに、上記いずれかの Meta タグ名を入力します（引用符は除く）。Meta タグ名を入力したら、tab キーを押すか今入力した Meta タグ名の右の部分をダブルクリックして、Meta タグのコンテンツを入力します（引用符は除く）。キーワードはカンマで区切ります。

有効期間（Meta タグ）
このページの有効期間を指定するには、「有効期間」 チェックボックスをクリックし、時間単位（分、時間、日、週、ヶ月）をポップアップメニューから選んで設定します。最後に、数字フィールドに値を入力します。そのページはページの公開後に指定の期間が経過すると期限切れとされます。Web ロボットは検索エンジンから期限切れのドキュメントを削除するか、または再訪の設定をします。「有効期間」チェックボックスにチェックしていない場合、ページに期限が含まれることはありません。

RapidWeaver のクレジットを挿入
作成した Web サイトを RapidWeaver で作成されたものとして公開するには、「RapidWeaver のクレジットを挿入」チェックボックスをチェックします。このオプションを選択すると、RapidWeaver はサイトのヘッダセクションに "Generator" Meta タグを追加します。これによりブラウザおよび訪問者に自分のサイトが RapidWeaver で作成されたものだと知らせることができます。

プロパティをすべてのページに適用
時には、選択したページのプロパティを変更して、同じ変更を Web サイトの他のページにも反映させたい場合があります。各ページのページインスペクタを開いてページごとにプロパティを調節するより、詳細設定ペイン下部の「プロパティをすべてのページに適用」ボタンを使用するとよいでしょう。

「プロパティをすべてのページに適用」ボタンをクリックすると「ページプロパティ」のリストが開きます
プロパティをすべてのページに適用ボタン


「プロパティをすべてのページに適用」ボタンをクリックすると、ページプロパティリストが表示されます。

他のページにも適用させたいプロパティをリストから選択して「OK」をクリックします
プロパティリスト


「OK」ボタンをクリックすると、チェックしたプロパティが Web サイトプロジェクトファイル内の他のすべてのページに適用されます。「キャンセル」ボタンをクリックすると、プロパティは他のページに適用されることなくページプロパティリストが閉じます。

コード

カスタム HTML、CSS、Javascript コードを用いれば、テーマを変更することなくページを変更したり機能向上が図れます。

ページにカスタムの Javascript や CSS を追加します
ページインスペクタ - コードタブ


ページの接頭辞
「ページの接頭辞」ボックスに入力されたカスタムコードは、レンダリングのときページの <!DOCTYPE> タグの前に配置されます。例えば、ある変数（名前、パスワード、E-Mail アドレスなど）をページ間で渡せるよう PHP セッションを開始する必要があるとします。PHP セッションは他のドキュメントの情報が読み込まれる前に開始されなければならないため、PHP コードはページの接頭辞に追加するとよいでしょう。

カスタム CSS
CSS スタイルコードを「カスタム CSS」ボックスに追加すれば、ページの雰囲気を一変させたり、新たなスタイルを追加してページの外観をカスタマイズできます。他の CSS エディタでの操作とまったく同じように CSS を追加し、スタンダード HTML でそのスタイルにリンクさせます。

カスタム JavaScript
カスタム CSS と同様に、自作の Javascript を追加し、普通のやり方でリンクします。