フレームレススキンエディターの概要

レスポンシブ HTML5 やフレームレスなどの web ヘルプ出力では、あらゆるポータルをほぼ同じ感覚で利用することができ、ナビゲーションや検索などの機能を使用することができます。 この出力には外観が設定されていますが、ユーザーは、企業のブランディングやガイドラインに従ってカスタマイズしたいと考えるのが普通です。

出力をカスタマイズする方法の一つとして、スキンをカスタマイズすることが挙げられます。 スキンでは、視覚的なスタイルの定義だけでなく、レイアウトの設定も行うことができます。 例えば、目次をツリー状の構造にする代わりに、ドロップダウンリストにすることができます。  RoboHelp には、すぐに利用できるさまざまなスキンが用意されています。 スキンエディターを使用すると、必要に応じてスキンをカスタマイズすることができます。

「出力」タブのスキンパネルで、プロジェクト内のすべてのスキンを見ることができます。

スキンをダブルクリックすると、スキンエディターが開きます。 レスポンシブ HTML5 用スキンエディターは、フレームレス用スキンエディターとは異なります。 

ほとんどのスキンには、2 種類のページ（ホームページとトピックページ）が用意されています。 ホームページは、ヒーロー画像、目次タイル、およびその他オプションのコンテンツで構成されます。 ホームページはオプションです。スキンによってはホームページがないものもあります。 トピックページは、実際のコンテンツ、ナビゲーション機能、検索機能、およびその他ウィジェットで構成されます。

ライブプレビュー

スキンエディターには、サンプルコンテンツのライブプレビュー機能とインタラクティブプレビュー機能が用意されています。 スキンエディターで編集を行うと、編集内容が直ちにプレビューに反映されます。 ツールバーで、デスクトップ表示とモバイル表示のどちらでプレビューを表示するかを選択することができます。 

プレビューでは、太い赤のボーダーでハイライト表示する機能も用意されています。 スキンエディターでクラスを選択すると、プレビュー内のその領域がハイライト表示されます。 このハイライト表示は、ツールバーでオフにすることができます。

スキンのカスタマイズ方法

スキンでは、出力のエクスペリエンスを定義します。 入力は 3 つの異なるソースから取得されます。 

 すべての文字列は、出力／ラベル パネルで指定した言語固有のラベルファイルから取得されます。 このラベルファイルには、該当するセクションで編集したすべてのプリセットの文字列が格納されています。

出力プリセットを使用すると、ホームページ、フッターコンテンツ、ホームページのカスタムコンテンツ、PDF ダウンロードボタンなどを表示することができます。

スキンエディターでは、スキンをレスポンシブにするかどうかを決定したり、cookie 承認ダイアログを表示するかどうかを決定したりすることができます。 このドキュメントでは、スキンエディターを使用してカスタマイズする方法について説明します。 また、必要に応じて出力プリセットとラベルセクションについても言及します。

一般設定

このセクションでは、スキンの一般的なプロパティと動作について説明します。 ホームページとトピックページのスタイル設定については、次のセクションで説明します。

レスポンシブ動作

すべてのスキンはレスポンシブで、画面の解像度に応じてデスクトップ表示とモバイル表示が自動的に選択されます。 また、デスクトップ表示からモバイル表示に切り替わる画面解像度をユーザーが制御することができます。 この値は、レイアウト／一般／「モバイルの最大幅」フィールドで設定することができます。 レスポンシブ動作を無効にするには、レイアウト／一般／レスポンシブの設定を使用します。 

固定検索バー

固定検索バー設定は、「固定検索バー」と呼ばれる設定可能な切り替えオプションを導入することで、出力エクスペリエンスを向上させます。この機能は、Orange、BlueLagoon、Studio、Oceanic のテンプレート全体で利用できます。この機能を有効にすると、トピックページの検索バーが常に開いた状態を保ち、検索機能への迅速で中断のないアクセスを確保します。 無効にすると、検索アイコンとして表示され、クリックすると展開し、外側をクリックすると折りたたまれます。 スキンプレビューは、公開された出力との一貫性を保つため、これらの動作を正確に反映します。 デフォルトでは、この機能は新しく作成されたテンプレートで有効になっていますが、既存のテンプレートでは無効のままです。 さらに、上部バーのプロジェクトタイトルは省略されず完全に表示されます。

公開された出力では、固定検索バーは以下のように表示されます。

GDPR 準拠

EU 一般データ保護規則では、サービスがブラウザーのローカルストレージまたは cookie に情報を保存する前に、ユーザーによる明示的な許可を得なければならないと定められています。  

GDPR 準拠を有効にするには、レイアウト／一般／GDPR 準拠の設定を使用します。 GDPR 準拠を有効にしない場合、お気に入り、目次の状態、パンくずなどが完全に機能しない場合があります。

テーマの設定

スキンエディターでは、スタイル設定に関するいくつかの共通要素を制御することができます。 これらの要素は、必要に応じてローカルでオーバーライドすることができます。 フォントファミリを定義するには、レイアウト／一般／レイアウトのフォントを使用します。 テキストとアイコンの色を設定するには、レイアウト／一般／テーマの色を使用します。

この変更は、テーマの色に従わないアイコンやテキストには適用されません。 検索キーワードのハイライト色と背景色を定義するには、レイアウト／一般／検索のハイライトテキストの色およびレイアウト／一般／検索のハイライト背景色を使用します。 

アクセシビリティ

すべてのスキンにアクセスすることができます。 スクリーンリーダーやキーボードショートカットなどを使用してアクセスすることができます。 キーボードを使用してフォーカスを切り替えると、フォーカスされた領域がハイライト表示され、その周囲にボーダーが表示されます。 

ボーダー色を制御するには、レイアウト／一般／フォーカスのアウトラインカラーの設定を使用します。

ユーザーアセット

スキンのカスタマイズでは、通常、外部ファイルは必要ありません。 しかし、高度な編集を行いたい場合もあります。例えば、あるボタンにカスタムアクションを設定し、そのボタンが押されたときに JavaScript 関数を呼び出したい場合があります。 そのような場合、レイアウト／ユーザーアセット／「アセットを追加」ボタンを使用して、スキンに JavaScript ファイルを追加する必要があります。 レイアウト／ユーザーアセットパネルを使用すると、明示的に追加したすべてのアセットを管理することができます。 

ホームページ

スキンのカスタマイズでは、通常、外部ファイルは必要ありません。 しかし、高度な編集を行いたい場合もあります。例えば、あるボタンにカスタムアクションを設定し、そのボタンが押されたときに JavaScript 関数を呼び出したい場合があります。 そのような場合、レイアウト／ユーザーアセット／「アセットを追加」ボタンを使用して、スキンに JavaScript ファイルを追加する必要があります。 レイアウト／ユーザーアセットパネルを使用すると、明示的に追加したすべてのアセットを管理することができます。

ホームページは 4 つのセクションで構成されます。 トップセクションには、ロゴ、リンク、メイン検索バー、ヒーロー画像が表示されます。 タイル領域には、目次に従ってタイルが表示されます。 そして、その下にカスタムホームページと
フッターセクションが表示されます。 

トップセクション

トップセクションにはさまざまな要素が表示されます。例えば、ロゴ、タイトル、ヘッダーリンク、フィルター、お気に入りが表示されます。 このセクションはトピックページに似ています。 ホームページのヘッダーリンクを有効にするには、ホームページ／「ヘッダーリンク」チェックボックスを使用します。 以下の図に、スタイル設定に役立つクラスの関連付けの詳細を示します。

検索

ホームページの検索機能は、トピックページと同じように機能します。 検索フィールドには検索ボタンと消去ボタンが用意されています。 また、検索候補と検索結果も同じように表示されます。 以下の図に、スタイル設定に役立つクラスの関連付けの詳細を示します。 

目次タイル

ホームページに表示されるタイルは、出力対象として選択した目次の項目に対応しています。 ホームページには、セクションとページの両方のタイルが表示されます。 レイアウト／ホームページ／「目次をドリルダウン」オプションを使用すると、目次のトップレベルのみをタイルに表示するか、すべてのレベルをタイルに表示するかを制御することができます。

タイルは 3 つの要素（画像、説明、タイトル）で構成されます。 スキンエディターで一連の画像を定義してタイルで使用することができます。 または、レイアウト／ホームページ／「目次からタイルを管理」オプションをオンにして、各セクションとページの目次の画像を定義することができます。 これにより、タイルを柔軟に管理することができます。 特定のタイルを表示したくない場合は、そのタイルの画像を未指定にします。 タイトルには目次と同じ内容が表示されます。  

説明フィールドを有効にするには、レイアウト／ホームページ／「タイルの詳細」オプションを使用します。 説明には、トピックプロパティで定義した内容が設定されます。

以下の図に、スタイル設定に役立つクラスの関連付けの詳細を示します。 例えば、ホームページのどの場所にも目次タイルを表示したくない場合、 ホームページ／目次タイル／コンテナ／レイアウト／表示に移動し、ドロップダウンで「なし」を選択します。

トピックエリア

トピックエリアは、目次タイル内のプレースホルダーコンテナで、ユーザーはここにコンテンツを追加することができます。 トピックエリアを使用すると、例えば、目次タイルエリアをオフにしてカスタムコンテンツのみを表示させることができます。 トピックエリアにコンテンツを表示するには、出力プリセットのレイアウト／「ホームページ」フィールドで、目的のコンテンツが記述された HTML トピックを選択します。 

フッター

ホームページにフッターを表示するには、フッターコンテンツが記述された HTML トピックを選択します。 出力プリセットのレイアウト／「フッター」フィールドで、トピックを指定します。

トピックページ

トピックページは、3 つの領域（ヘッダー、本文、フッター）で構成されます。 ヘッダーエリアは、ロゴ、タイトル、トップレベルのリンク、検索ボックスで構成されます。 本文エリアは、左側、中央、右側のセクションで構成されます。 左側のセクションは、目次パネル、索引パネル、用語集パネルで構成されます。 中央のセクションは、ツールバーパネルとトピックコンテンツエリアで構成されます。 右側のセクションは、トピック目次パネル、お気に入りパネル、ダイナミックフィルターパネルで構成されます。

ヘッダー

ヘッダーはさまざまなセクションで構成されます。 該当するクラスを使用することで、スタイルやレイアウトを制御することができます。 例えば、高さを大きくするには、トピックページ／ヘッダー／コンテナ／レイアウト／「高さ」フィールドを編集します。 

ロゴ

ロゴを設定するには、トピックページ／ヘッダー／ロゴ／背景／「画像パス」フィールドに移動します。

ブラウズボタンをクリックして、ロゴに使用する画像を選択します。 他の場所にある画像を選択した場合、スキンフォルダーに画像のコピーが作成されます。 画像の寸法を変更するには、高さフィールドと幅フィールドを使用します。 

タイトル

タイルのテキストは、出力プリセットの「タイル」フィールドから取得されます。 スキンエディターで、寸法、フォント、テキストサイズなどの属性を制御することができます。 フォントファミリやフォントサイズなどのプロパティを設定するには、トピックページ／ヘッダー／タイトル／フォントグループを選択します。 

幅を制御するには、トピックページ／ヘッダー／タイトル／レイアウトグループを選択します。 ロゴなどからの間隔を管理するには、左パディングまたは左マージンを使用します。 

スキン全体の共通のフォントファミリとフォント色を設定するには、レイアウト／「一般」セクションを使用します。

ヘッダーリンク

ヘッダーリンクは、ヘッダーの右側に表示されます。 作成したばかりのスキンには、ヘッダーリンクは含まれていません。 このリンクは、レイアウト／「ヘッダーリンク」セクションで定義することができます。 以下の手順を実行します。

「トピックページ」タブで、リンクのスタイルを設定することができます。 前述のヘッダー画像に示されたボックスのレイアウトを参照してください。 リンクのスタイル（フォントサイズ、テキスト色、テキストスタイルなど）を設定するには、トピックページ／ヘッダーリンク／項目を使用します。 リンクのアイコンを設定するには、トピックページ／ヘッダーリンク／アイコン 000Nを選択し、以下の手順を実行します （注意：N は前述の手順 5 で定義したアイコン番号を表します）。

検索

検索はさまざまなコンポーネントで構成され、その構造は複雑です。 検索アイコンをクリックするか、検索バーで Enter キーを押すと、結果ボックスが以前閉じられていても検索結果が表示され、シームレスで直感的な検索エクスペリエンスを提供します。

アイコンの色やフォントファミリなどの共通要素を編集するには、「レイアウト」タブ でテーマを設定します。 ただし、ラベルが付けられた以下のスクリーンショット見ると分かるように、ほとんどのコンポーネントをカスタマイズすることができます。 

静的なヘッダーとフッター

この機能を使用すると、コンテンツがスクロールしてもヘッダーとフッターを出力に固定させることができます。 この場合、ヘッダーまたはフッターが常に画面に表示されます。 今回、スキンエディターの「ホームページ」セクションと「トピックページ」セクションに 2 つのトグルスイッチを追加しました。

本文

本文は、トピックページの中央に配置されます。 本文は 4 つの要素（ツールバー、左パネル、トピックコンテンツエリア、右パネル）で構成されます。

ツールバー

どのスキンにも、ユーザーがアクションを実行するための各種ツールバーボタンが用意されています。 トピックページ／「ボタン」セクションで、ツールバーボタンの一覧を見ることができます。 このリストで、ボタンの名前変更、順序変更、削除を行うことができます。 新しいボタンを追加するには、「ボタンを追加」をクリックします。 ボタンのプロパティを定義するには、ボタンを選択ドロップダウンから目的のボタンを選択します。 以下のプロパティを指定することができます。

• ID：ID は、ボタンに一意の値を与えるために自動生成されます。この ID は、トピックページ／ボタンセクションで特定のボタンの設定を編集するのに使用します。 
  
• タイトル：タイトルはボタンのツールチップとして表示されます。 ボタンにはアイコンのみが表示されます。 ボタンに名前を表示するには、レイアウト／トピックページ／「ボタン名」オプションを使用します。 ボタンにはタイトルと同じ名前が表示されます。
  
• 状態のタイトルを切り替え：ボタンの状態が変わると、切り替わった状態に応じてボタンのタイトルが変わります。 そのようなボタンとして、「展開/すべて折りたたむ」ボタンなどがあります。
  
• URL：ボタンがクリックされたときにトリガーされる URL を指定します。 ローカルトピックへのリンク、 web へのリンク、電子メールへのリンクを指定できます。 
  
• JavaScript：知識があるユーザーは、ボタンの状態に応じて実行される JavaScript 関数を指定することができます。 レイアウト／「ユーザーアセット」セクションで、JavaScript ファイルを添付することができます。

以下の図に、ツールバーに関するすべてのクラスを示します。 

ソーシャルメディアでの共有

ツールバーの共有ボタンをクリックすると、共有オプションのリストが表示されます。 どのスキンにも、あらかじめ定義された共有オプションのリストが用意されています。 このリストをカスタマイズするには、レイアウト／「共有オプション」セクションを使用します。 新しいオプションを追加するには、「共有オプションを追加」ボタンをクリックします。 

編集するオプションをオプションを選択ドロップダウンで選択します。 以下の手順でカスタマイズします。 

• ID：ID は自動的に生成され、ボタンごとに一意の ID が割り当てられます。 この ID は、トピックページ／「共有ボタン」セクションで設定を編集するのに使用します。 
  
• タイトル：ボタンのラベルを定義します。
  
• URL：ボタンがクリックされたときにトリガーされるリンクです。 サービスプロバイダーは、ソーシャルメディアボタンに固定の URL を割り当てています。
  
• ツールチップ：ボタンのツールチップを定義します。 

以下の図に、共有ウィジェットに関するすべてのクラスを示します。 

左パネル

画面の左側には、目次パネル、索引パネル、用語集パネルが用意されています。 目次パネルは必須です。索引パネルと用語集パネルはオプションです。 レイアウト／「トピックページ」セクションで、索引パネルと用語集パネルの表示と非表示を切り替えることができます。 また、最初に表示されるパネルを制御することができます。 出力プリセットで索引または用語集のコンテンツを選択しなかった場合、未選択のコンテンツのパネルは表示されません。 

パネルのタブ名はラベルから取得されます。 アプリケーションの「出力」タブに移動し、左側のツールバーでラベルパネルを開きます。 目的の言語に合わせてラベルを選択または作成します。 編集対象のファイルを開くと、出力される文字列がフレームレスタブに表示されます。

以下の図に、目次パネルのスタイル設定に関するすべてのクラスを示します。

以下の図に、索引パネルのスタイル設定に関するすべてのクラスを示します。 

以下の図に、用語集パネルのスタイル設定に関するすべてのクラスを示します。

トピックエリア

トピックエリアは、以下の 3 つの要素で構成されます。

• 上部に表示されるパンくず
  
• 中央に表示されるトピックコンテンツ
  
• 下部に表示される閲覧シーケンス
  

トピックコンテンツのスタイルを設定するには、スタイルシートを使用します。 マスターページを使用すると、出力生成時にスタイルシートの設定をオーバーライドすることができます。

上部のパンくずには、目次に従って現在のトピックの階層が表示されます。 最初にラベルを表示することができます。このラベルは、デフォルトのトピックに移動するためのリンクとして機能させることができます。 このラベルのテキストは、言語固有のラベルファイルの出力／ラベル／（言語ファイル）／フレームレス／「BreadcrumbStart」フィールドから取得されます。 レイアウト／トピックページ／「パンくずのホームハイパーリンク」チェックボックスを使用すると、ラベルを静的にするかどうかを設定することができます。

ほとんどのスキンでは、下部に閲覧シーケンスが表示されます。 閲覧シーケンスを右パネルの下部に移動するには、レイアウト／トピックページ／「右パネルの閲覧シーケンス」オプションを使用します。 スキンによっては閲覧シーケンスが上部に表示されます。

以下の図に、トピックエリアのスタイル設定に関するすべてのクラスを示します。

右パネル

右パネルには、ミニ目次、お気に入り、ダイナミックフィルター、共有オプションといったさまざまな機能が用意されています。 また、ボタンを備えたツールバーがあり、いくつかのボタンが下部に表示されます。 右パネルは非表示にすることができます。 右パネルを非表示にするには、レイアウト／トピックページ／右パネルの設定を使用します。 右パネルを非表示にする場合、メインツールバーに右パネルボタンを追加します。 

上部に 3 つのボタンが表示され、下部に 2 つのボタンが表示されます。 レイアウト／トピックページ／「右パネルの閲覧シーケンス」オプションを使用すると、下部のボタンと一緒に閲覧シーケンスのナビゲーションを表示することができます。 

ボタンとミニ目次

右パネルには、デフォルトで身に目次またはトピックの目次が表示されます。 見出しのレベルを制御するには、レイアウト／ミニ目次の設定を使用します。 以下の図に、ツールバーとミニ目次のスタイル設定に関するすべてのクラスを示します。

お気に入り

任意のトピックをお気に入りとしてマークしておき、後でそのリストを開くことができます。 メインツールバーのお気に入りボタンをクリックすると、右側にこのリストが表示されます。 鉛筆ボタンをクリックして編集モードに移行し、お気に入りを編集することで、お気に入りを削除することができます。 以下の図に、お気に入りパネルのスタイル設定に関するすべてのクラスを示します。

ダイナミックコンテンツフィルター

ダイナミックコンテンツフィルタリングのオプションは、コンテンツにフィルターが定義されている場合のみ表示されます。 コンテンツにフィルターを定義するには、出力プリセットを設定します。 ツールバーには、フィルタリングオプションを表示するためのボタンが用意されています。このボタンをクリックすると、フィルタリングオプションが右パネルに表示されます。 このボタンを再度クリックすると、フィルタリングオプションが非表示になります。 選択されているフィルターは、トピックエリアの上部に表示されます。 フィルタリングのテキストは、ダイナミックコンテンツフィルターパネルで指定したテキストが使用されます。 その他のテキストは、ラベルファイルの「フレームレス」セクションから取得されます。 

以下の図に、ダイナミックコンテンツフィルターに関するすべてのクラスを示します。

フッター

ホームページとトピックページのフッターを HTML トピックとして定義することができます。 このファイルは、出力プリセットのレイアウト／「フッターコンテンツ」フィールドで指定します。 フッターエリアボックスのスタイルを設定するには、トピックページ／フッター／コンテナクラスを使用します。

cookie 承認ダイアログ

GDPR は、EU 一般データ保護規則を表します。 これは、欧州のデジタルプライバシー法制の中核をなします。 GDPR 等の法規制では、ブラウザーのローカルストレージまたは cookie に情報を保存する前に、ユーザーによる明示的な承認を得なければならないと定められています。 GDPR 準拠を有効にするには、レイアウト／一般／GDPR 準拠の設定を使用します。 初回利用時に cookie 承認ダイアログが表示されます。 このダイアログで、cookie の使用を承認または拒否することができます。 承認ダイアログにデフォルトで設定されているテキストには、cookie の承認が必要な理由が記述されています。 このテキストは、ラベルからカスタマイズすることができます。 以下の図に、cookie 承認ダイアログのスタイル設定に関するすべてのクラスを示します。

高度な編集

スキンエディターを使用すると、スキンをカスタマイズしてほとんどの使用事例に対応することができます。 カスタマイズの結果に満足し、さらに詳しく設定したい場合は、以下の情報を参照してください。

• スキンを作成すると、いくつかのファイルがプロジェクトフォルダーにコピーされます。 スキンを右クリックして「エクスプローラーで表示する」を選択すると、このフォルダーを開くことができます。 
  
• homepage.ejs および topicpage.ejs というテンプレートファイルに、ページのレイアウトが記述されています。 HTML ファイルと同様に、これらのファイルを編集することができます。 アドビから最新版がリリースされると、これらのファイルが上書きされる場合があります。
  
• layoutDiff.css ファイルには、スタイルを変更するためのすべての CSS クラスが記述されています。 スキンエディターで行った変更は、このファイルに保存されます。 このファイルを直接編集しても問題ありませんが、ファイルの構造は変えないでください。