スキンの操作

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

スキンとは

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

スキンの追加

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

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

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

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

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

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

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

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

スキンの編集

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

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

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

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

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

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

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

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

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

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

  5. フレームレススキンで、ホームページまたはトピックページパネルでドロップダウンセクションをクリックし、右側のパネルでスタイルプロパティ(フォント、配置、境界線、レイアウト、背景)を設定するコンポーネントを選択します。
    注意「右側のパネル」ラジオボタンを無効にすると、右側のパネルを完全に非表示にすることが可能です。

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

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

スキン名の変更

プロジェクト内のスキン名を変更できます。

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

  2. 出力ツールバーでスキンアイコンをクリックします。プロジェクト内のスキンが表示されます。

  3. スキンパネルで、名前を変更するスキンについて「オプション」()/「名前変更」を選択するか、F2 を押します。

  4. スキン名の変更ダイアログボックスで、新しいスキン名を入力し「完了」をクリックします。スキン名が変更されます。

    名前が変更されたスキンは、スキンパネルでアルファベット順に配置されます。

注意:

新しいスキン名は、スキンを使用するすべての出力プリセットに自動的に反映されます。

スキンのアップグレード

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 の以前のバージョンで作成されたスキンは読み込むことができません。

    注意:
    • RoboHelp Classic ファイルの .slz ファイルを読み込む場合、自動的にアップグレードされます。 詳しくは、「スキンのアップグレード」を参照してください。
    • インディゴスキンを読み込むときに RoboHelp Classic レイアウト形式を使用する場合は、スキンを読み込むダイアログボックスで「引き続き古いレイアウトをスキンに使用」フィールドを選択します。 

スキンの書き出し

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

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

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

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

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

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

スキンの削除

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

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

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

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

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

    スキンが削除されます。

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

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

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

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

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

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

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト