ここでは、RoboHelp でスキンを使用して、出力のレイアウトを素早くカスタマイズする方法について説明します。

スキンとは

RoboHelp のスキンを使用すると、公開前のヘルプシステムの外観をカスタマイズすることができます。 出力の色、ボタン、フォント、アイコン、ロゴ、背景を変更することにより、スキンをカスタマイズすることができます。 レスポンシブ Html5 を公開するのか WebHelp を公開するのかにかかわらず、RoboHelp の公開ウィンドウのスキンパネルには、事前に定義されたいくつかのスキンが用意されています。 これらの事前定義スキンのいずれかをそのまま適用することも、いずれかのスキンを編集して、目的の出力レイアウトを作成することもできます。

new-skin-editor_2003

スキンの追加

スキンは、レスポンシブ HTML5 形式で追加することも、WebHelp 形式で追加することもできます。 スキンを追加するには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、新規スキンアイコン()をクリックします。ドロップダウンメニューが表示されたら、以下に示すいずれかのオプションをクリックします。

    • 新しい WebHelp スキン:WebHelp スキンを追加する場合は、このオプションをクリックします。新しい WebHelp スキンダイアログボックスが表示されます。
    • 新しい HTML5 スキン:レスポンシブ Responsive HTML5 スキンを追加する場合は、このオプションをクリックします。新しいレスポンシブ HTML5 スキンダイアログボックスが表示されます。
  4. 新しい WebHelp スキンダイアログボックスまたは新しいレスポンシブ HTML5 スキンダイアログボックスの「テンプレート」セクションで、事前定義テンプレートを選択します。選択したテンプレートのプレビューは、「プレビュー」領域で表示することができます。

  5. 必要な場合は、「名前」フィールドで、事前定義テンプレートのデフォルト名を変更します。

  6. 終了」をクリックします。

    新しいスキンがスキンパネルに追加され、スキン名のアルファベット順に表示されます。また、スキンエディターがタブとして表示されます。

スキンの編集

ニーズに合わせて、スキンを簡単にカスタマイズすることができます。 スキンを編集するには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、カスタマイズするスキンのオプションアイコン()/編集を選択します。

    スキンエディターがタブとして表示されます。スキンエディターの左側には、スキンのプレビューがリアルタイムに表示され、右側にはスキンコンポーネントパネルが表示されます。

    レスポンシブ HTML5 スキンの場合、スキンエディター上部のツールバーを使用して、以下の操作を行うことができます。

    • デスクトップアイコン(デフォルトレイアウト)をクリックすると、デスクトップビューにコンテンツが表示されます。
    • 電話アイコンをクリックすると、電話ビューにコンテンツが表示されます。
    • タブレットアイコンをクリックすると、タブレットビューにコンテンツが表示されます。
    • ハイライト切り替えアイコンをクリックすると、スキンエディター内のスキンコンポーネントのハイライト表示が切り替わります。

    スキンコンポーネントとその設定は、選択したレスポンシブ Responsive HTML5 スキンのビュータイプ(デスクトップビュー、電話ビュー、タブレットビュー)によって異なります。

  4. スキンコンポーネントパネルの左側に表示されているスキンコンポーネントをクリックし、そのコンポーネントの設定を入力します。

    スキンコンポーネントをクリックすると、そのコンポーネントの現在の設定が表示され、出力プレビュータブでそのコンポーネントがハイライト表示されます。 例えば、「フィルター」をクリックすると、フィルターの現在の設定が表示され、出力プレビュータブでフィルターアイコンとその領域がハイライト表示されます。

  5. 必要に応じて、各スキンコンポートネントで優先する設定を入力し、公開ウィンドウの標準ツールバーで「保存」アイコンをクリックします。

    新しいスキンの設定がコンテンツに適用され、出力プレビュータブにそのスキンが表示されます。

スキンのアップグレード

RoboHelp Classic のプロジェクトをアップグレードすると、RoboHelp は自動的にすべてのレスポンシブ HTML5 スキンをアップグレードします。 RoboHelp Classic スキンエディター以外でスキンをカスタマイズした場合は、RoboHelp 2019 のスキンコンポーネントパネルの「レイアウト」タブを使用して、任意の JavaScript または CSS ファイルを追加します。

任意の JavaScript/CSS ファイルを追加するには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、カスタマイズするスキンのオプションアイコン()/編集を選択します。

  4. スキンエディターの右側にあるスキンコンポーネントパネルで、「レイアウト」タブをクリックします。

  5. ユーザーアセットドロップダウンセクションで、「アセットを追加」をクリックします。

  6. 開くダイアログボックスで、JavaScript/CSS ファイルを選択し、「開く」をクリックします。

    ファイルがユーザーアセットドロップダウンセクションに追加されます。 複数のファイルを追加できます。

  7. ファイルの  をクリックし、ドラッグアンドドロップ操作でファイルのリストの順序を変更します。

    ファイルを削除するには、 をクリックします。

スキンの読み込み

スキンを読み込むには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、新規スキンアイコン()/読み込みを選択します。

  4. 開くダイアログボックスで、読み込むスキン(.skz ファイルまたは .slz ファイル)に移動して「開く」をクリックします。

    選択したスキンがスキンパネルに追加され、スキン名のアルファベット順に表示されます。

    注意:

    RoboHelp Classic ファイルの .slz ファイルを読み込む場合、自動的にアップグレードされます。 詳しくは、「スキンのアップグレード」を参照してください。

スキンの書き出し

スキンを書き出すには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、書き出すスキンのオプションアイコン()/書き出しを選択します。

  4. ダウンロードダイアログボックスで、スキンのデフォルトの書き出し場所として、コンピューター上の Downloads フォルダーが選択されます。このデフォルトフォルダーを使用しない場合は、任意のフォルダーに移動して「保存」をクリックします。

    選択した場所にスキンが保存されます。

スキンの削除

スキンを書き出すには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、削除するスキンのオプションアイコン()/削除を選択します。

  4. 確認ダイアログボックスの「はい」をクリックして、削除操作を確定します。

    スキンが削除されます。

お使いのコンピューターでスキンファイルを検索する

お使いのコンピューター内でスキンファイルの場所を確認するには、以下の手順を実行します。

  1. 標準ツールバーの左側に表示されている「出力」タブをクリックします。出力ビューが表示されます。

  2. 出力ツールバーでスキンアイコン()をクリックします。

  3. スキンパネルで、検索するスキンのオプションアイコン()/エクスプローラーで表示を選択します。

    Windows エクスプローラーに、スキンファイルとその場所が表示されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー