この記事では、RoboHelpの画面レイアウトとプロファイルの最新アーカイブ版へのリンクを記載します。これらの画面レイアウトやプロファイルは、ダウンロードしてRoboHelpプロジェクト内で使用したり、レスポンシブHTML5またはマルチスクリーンHTML5出力を生成したりすることができます。
RoboHelp（2015リリース）向けのレスポンシブHTML5画面レイアウト
以下のリストからレスポンシブな画面レイアウトを選んでダウンロードし、ファイル名の拡張子を「. zip」から「. slz」に変更し、プロジェクトにインポートします。詳細については、「RoboHelpユーザガイド」の「画面レイアウト」を参照してください。
レスポンシブなレイアウトでは、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、パソコン、タブレットや携帯端末といったすべてのデバイスに対応するヘルプコンテンツを作成できます。
注意：
レイアウトをカスタマイズするには、SCSS、CSSおよびJavaScriptの各技術についてしっかりと理解しておく必要があります。SCSSはCSSの拡張機能です。SCSSを使うことで、CSSを作成する際に変数、Mixin、ネストされたルール、および他の基本的なプログラミングを使用できるようになります。
レスポンシブなレイアウトは、次の2つの方法でカスタマイズすることができます。
- スタイルシートにより画面出力の外観をカスタマイズする
- JavaScriptを使用して、検索を特定の方法で処理するといった動作をカスタマイズする
次のセクションでは、レイアウトをカスタマイズするこれら2種類の方法について説明します。
-
scss-files.zipファイルをダウンロードし、中のファイルを解凍します。
注意：
scss-files.zipファイルには、青（空色）とチャコールグレーの各レイアウト向けの.scssファイルが含まれています。また、これらのレイアウトで使用される他の設定ファイル（右から左へのレイアウト設定ファイルなど）も含まれています。
-
注意：
RoboHelpレイアウトに付属するCSSファイルは、「Koala」というサードパーティ製のツールを使用してコンパイルされています。. scssファイルをコンパイルするには、Koala以外のツールを使用することもできます。
注意：
RTL CSSを生成する場合は、テキストエディターで「scss-files\scss\_rtl.scss」ファイルを開きます。$if-rtlをtrueに設定し、生成されたlayout.cssファイルの名前をlayout_rtl.cssに変更します。
-
レイアウトのZIPファイル（Azure_Blue.zipまたはCharcoal_Grey.zip）から中のファイルを解凍し、ZIPファイル内のlayout.cssを、更新された.cssファイル（ステップ3で作成）で置き換えます。
注意：
layout.cssファイルは、レイアウトZIPファイルのルートフォルダーにあります。例えば、チャコールグレーのレイアウトの場合、CSSファイルはscss-files\scss\Charcoal_Grey\layout.cssに保存されます。
また、関連付けられたJavaScriptファイルをカスタマイズすることで、レイアウト内の特定のイベントの動作を変更することもできます。例えば、ブラウザに関係なくJavaScript関連のエラーが発生する場合は、問題を修正するためにJavaScriptコードを変更することができます。
-
js-files.zipファイルをダウンロードし、中のファイルを解凍します。
注意：
ZIPファイルには、common.js、layout.js、rh.js、およびtopic.js.の4つのファイルが含まれます。これらのJavaScriptファイルは、レイアウト内の各種要素の動作を制御するコードを含みます。
-
注意：
.jsファイルの名前を.min.jsに手動で変更するのではなく、圧縮・軽量化ツール（JavaScript Minifierなど）を使用して、更新された.jsファイルを軽量化することをお勧めします。
RoboHelp 11向けのレスポンシブなHTML5レイアウト
ダウンロード
ダウンロード
ダウンロード
更新されたマルチスクリーン向け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では、プロジェクトに対して事前定義された画面プロファイルの一覧を更新します。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。