以下のリストからレスポンシブな画面レイアウトを選んでダウンロードし、ファイル名の拡張子を「. zip」から「. slz」に変更し、プロジェクトにインポートします。詳細については、「RoboHelpユーザガイド」の「画面レイアウト」を参照してください。

レスポンシブなレイアウトでは、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、パソコン、タブレットや携帯端末といったすべてのデバイスに対応するヘルプコンテンツを作成できます。

レイアウトのカスタマイズ

レスポンシブなレイアウトは、次の2つの方法でカスタマイズすることができます。

• スタイルシートにより画面出力の外観をカスタマイズする
• JavaScriptを使用して、検索を特定の方法で処理するといった動作をカスタマイズする

次のセクションでは、レイアウトをカスタマイズするこれら2種類の方法について説明します。

スタイルシートのカスタマイズ

JavaScriptのカスタマイズ

また、関連付けられたJavaScriptファイルをカスタマイズすることで、レイアウト内の特定のイベントの動作を変更することもできます。例えば、ブラウザに関係なくJavaScript関連のエラーが発生する場合は、問題を修正するためにJavaScriptコードを変更することができます。 

JavaScriptを使用してレイアウトをカスタマイズするには、次の手順を実行します。

このセクションでは、RoboHelp 11プロジェクトで使用できるレスポンシブなHTML5レイアウトの一覧を掲載します。 

テーマ_1標準

レイアウトにより、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、すべてのデバイスに一度で対応できます。

Theme 2_Governmentレイアウト

濃い海緑色およびスレートグレイ色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。

Theme_3 Black

黒色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。

このセクションでは、RoboHelp（2015リリース）またはRoboHelp 11プロジェクトで使用できる、マルチスクリーン向けHTML5レイアウトの一覧を掲載します。 

デスクトップ向けレイアウト

• デスクトップ向けレイアウト:左側に目次、索引、用語集が表示され、グレーと茶色のテーマにより操作が容易です。このデスクトップ向けレイアウトは、iPhone、iPad、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。

• カタログ向けレイアウト:製品やサービスを目立たせる、濃い青紫色のバナーとドロップシャドウパネルが特徴です。目次、索引、用語集の通常の表示位置は、左に設定されています。表示領域を広げたいユーザは、簡単に隠すことができます。
  

• カタログ向けのホームページ付きレイアウト:製品やサービスを目立たせる、濃い青紫色のバナーとドロップシャドウパネルが特徴です。目次、索引、用語集の通常の表示位置は、左に設定されています。表示領域を広げたいユーザは、簡単に隠すことができます。
  

• 行政機関向けレイアウト：濃い海緑色およびスレートグレイ色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。
  

• 行政機関向けのホームページ付きレイアウト：濃い海緑色とスレートグレイの色アクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。ホームページには、「おすすめ情報」用のプレースホルダーがあります。この中には、独自のテキストを追加することができます。
  

• ナレッジベース向けレイアウト：ライトグレーのアイコンとアクセントを備えた、ソフトな薄茶色の背景色が特徴です。左側には、水平方向の目次、索引、用語集が表示されます。検索バーはすぐにアクセスできます。
  

• ナレッジベース向けのホームページ付きレイアウト：ライトグレーのアイコンとアクセントを備えた、ソフトな薄茶色の背景色が特徴です。左側には、水平方向の目次、索引、用語集が表示されます。検索に簡単にアクセスできます。
  

• ソーシャル向けレイアウト:Facebookの「いいね!」とTwitterのフォローをリアルタイムで反映するためのプリセットコードを含む、カラフルなソーシャル対応レイアウトです。目次、索引、用語集には、水平方向に展開するアコーディオン形式のナビゲーションパネルを使用します。このレイアウトでは、トピックページと検索結果ページが分かれています。
  

• ソーシャル向けのホームページ付きレイアウト:Facebookの「いいね!」とTwitterのフォローをリアルタイムで反映するためのプリセットコードを含む、カラフルなソーシャル対応レイアウトです。目次、索引、用語集には、水平方向に展開するアコーディオン形式のナビゲーションパネルを使用します。このレイアウトでは、トピックページと検索結果ページが分かれています。
  

• 医薬品向けレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。このテーマは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。これらのテーマはギャラリーにあります。デバイスの画面サイズに合わせてカスタマイズすることができます。
  

• 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
  

スマートフォン向けレイアウト

• iPhone：目次、索引、用語集に加え、常にアクセス可能な検索バーを表示する、ライトブルーとグレーの使いやすいテーマです。このiPhone向けレイアウトは、パソコン、iPad、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。

• Android：一般的なサイズのAndroid携帯端末で表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Androidタブレット、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。

• 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
  

タブレット向けレイアウト

• Android：一般的なサイズのAndroidタブレットで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Android携帯端末、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。

• iPad：左側に目次、索引、用語集に加え、常にアクセス可能な検索バーが表示され、グレーと茶色のテーマにより操作が容易です。このiPad向けレイアウトは、パソコン、iPhone、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。

• Kindle Fire：Kindle Fireで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、およびAndroidタブレット向けの既製レイアウトも含むファミリーに属しています。

• 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「Desktop Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
  

各種デバイス向けの画面プロファイルを含むpredefined_screens.zipファイルをダウンロードします。ZIPファイルには、predefined_ screens. xmlのXMLファイルが含まれます。このXMLファイルは、次の2箇所に保存します。

• AppData\Roaming\Adobe\RoboHTML\<Rhバージョン>
  
• <Rhインストール先>\RoboHTML\presets
  

RoboHelpでは、プロジェクトに対して事前定義された画面プロファイルの一覧を更新します。