マニュアルキャンセル

一般的なコンテンツスタイルの利用

検索

最終更新日 : 2024年3月28日

一般的なコンテンツスタイルの利用

スタイルシートには、PDF 出力で使用されるエレメントのスタイル定義が含まれています。サンプルスタイルシートを使用するか、スタイルシートを新たに作成するかを選択できます。 OOTB サンプルスタイルシートのコピーを作成すると、すぐに操作を開始するのに役立ちます。

スタイルエディターは WYSIWYG エディターで、複雑な CSS コードをユーザーインターフェイスの背後で非表示にすることができます。スタイルエディターを使用すると、選択したエレメントのスタイルを簡単かつ迅速にカスタマイズできます。スタイルは、次の見出しで分類されています。

見出しスタイル
段落スタイル
文字スタイル
ハイパーリンクスタイル
画像スタイル
リストスタイル
表スタイル
Div スタイル
ページスタイル
その他のスタイル

プロジェクトで操作する際に、DITA エレメントのスタイルマッピングはほとんどの場合、デフォルトのスタイルシートに配置されます。標準的な DITA エレメントで操作する場合は、スタイル定義を直接変更することで体裁を変更できます。これらのスタイル定義は、「その他のスタイル」カテゴリで使用できます。

次のセクションでは、一般的に使用されるスタイル設定について事例を使って解説します。

見出しスタイルの操作

見出しスタイルには、コンテンツで使用する見出しの基本スタイルがすべて含まれます。 6 つの基本見出しスタイルと、トピック / 章および付録のタイトル見出し用のスタイルをすぐに使用できます。構造化文書では、H1 はトピックまたは章のタイトルを表し、H2～H6 はトピック / 章内のサブトピックまたはセクションに使用されます。対応する見出しがある場合、この見出し階層は自動でコンテンツに適用されます。

章レベルのカスタム見出しを作成する

プロジェクトの目次では、章を操作できます。基本の見出しスタイルは、章レベルの見出しに適用されるように設計されています。カスタマイズは不要です。ただし、コンテンツ用に特殊な見出しが必要な場合は、見出しスタイルを作成する必要があります。例えば、デフォルトの h1.chapter 見出しは、章のタイトルに適用されます。章のタイトルを別のスタイルで表示させるには、h1.chapter スタイルをカスタマイズする必要があります。同様に、章のサブ見出しのカスタムスタイルも作成できます。例えば、章の第 2 および第 3 レベルの見出しのカスタムスタイルを作成する場合、新たなスタイルを h2.chatper および h3.chatper として作成する必要があります。

ネイティブ PDF パブリッシング機能には、一般的なスタイルで使用する基本スタイル定義が含まれているため、スタイルを誤って削除した場合でも、デフォルトのスタイルがコンテンツに適用されます。例えば、h2 スタイルのスタイル定義がスタイルシート内に存在しない場合、ネイティブ PDF パブリッシング機能では、h2 コンテンツに基本スタイルが適用されます。

次の例では、第 2 レベルの章見出しスタイルを作成します。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「見出しスタイル」を展開します。
「見出しスタイル」を右クリックして、「新規スタイル」を選択します。
「スタイルを追加」ダイアログで、タグ名を h2 のままにして、「クラス名」フィールドに章を入力します。
「完了」を選択します。

自動番号見出しを作成する

自動番号見出しは、最もよく使用される出力スタイルの 1 つです。これらの見出しには、章番号、トピック番号、サブトピック番号が表示されます。トピック内のアイテムのリストに自動番号が割り当てられている場合、自動番号見出しはリストのスタイルとは異なります。

以下の例では、見出しをレベル 1 からレベル 3 にカスタマイズし、自動番号を別の形式で使用します。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「見出しスタイル」を展開します。
リストから h1 スタイルを選択します。

「プロパティ」パネルに、h1 スタイルのプロパティとそのプレビューが表示されます。
「自動番号」プロパティを選択します。自動番号リストに適用できるスタイルが、「自動番号」プロパティの下に表示されます。
次のプロパティを設定します。
- スタイル：ロケール固有または汎用の番号スタイルを、豊富な選択肢の中から選択します。アラビア-インド語、デーヴァナーガリー文字、ジョージア語、10 進法、小文字のアルファベットなどのスタイルを選択できます。この例では、大文字のアルファベットを選択します。
- フォーマット：デフォルトフォーマットは、<x> に設定されています。x 値は、「スタイル」プロパティで選択した番号付けスタイルに置き換えられます。例えば 10進法（1）のスタイルを選択すると、h1 スタイルのすべてのインスタンスが x 自動増分値となり、2、3、と増えていきます。また、フィールドにカスタムテキストを追加し、見出しスタイルをフォーマットすることも可能です。例えば、すべての h1 見出しに「章」プレフィックスを追加する場合、このフィールドを「章」と設定する必要があります。
- <x>.
- 文字の挿入：フォーマットに特殊文字を追加する場合は、「文字の挿入」アイコンをクリックします。スタイル形式で追加する文字を選択し、「挿入」をクリックします。「カテゴリの選択」ドロップダウンリストから、あらゆる種類の特殊文字を選択できます。
- 開始番号：特定の数値から番号を開始する場合は、その値を指定できます。この例では、値を初期設定の 1 とします。
- インデント：見出しをインデントする場合は、インデント値を設定する必要があります。この例では 0 に設定します。
- プレフィックス幅：この領域には、自動番号フォーマットが配置されます。選択したスタイルフォーマットが収まるサイズに、自動で設定されます。サイズを拡大する場合は、デフォルト値を置き換えることができます。手動で値を設定する場合は、幅に影響があるその他のプロパティを変更してください。例えば、フォントサイズ、プレフィックス（章）またはサフィックス（：）が含まれているフォーマットを変更し、「開始番号」プロパティの最大値およびフォントのプロパティを設定すると、最適なサイズで表示されます。この例では、デフォルト値のまま使用します。
- 字間および行間：字間および行間を指定します。この例では、デフォルト値のまま使用します。
- フォーマットの適用：「自動番号」カテゴリのプロパティは、番号付けスタイルを定義するために役立ちます。番号付けスタイルまたは見出しフォーマットのコンテンツをさらにカスタマイズする場合は、このフィールドの「番号付け」または「段落」を選択します。「番号付け」を選択すると、フォント、境界線、レイアウト、およびその他のカテゴリの変更は、見出しの番号付けスタイルにのみ適用されます。ただし、「段落」を選択すると、見出しのコンテンツに変更が適用されます。番号付けスタイルには適用されません。

以下の設定を使用して、次のスクリーンショットに表示する出力を作成します。

見出しスタイル	プロパティ	値
h1	スタイル	10 進法
	書式設定	章 <x>：
	プレフィックス幅	160 px
	フォント／テキストの整列	左
h2	スタイル	10 進法
	書式設定	セクション <x>：
	プレフィックス幅	125 px
	フォント／テキストの整列	左
h3	スタイル	10 進法
	レベルを挿入	2
	書式設定	セクション <2>.<x>:
	プレフィックス幅	125 px
見出しスタイル	プロパティ	値

グラフィカルユーザーインターフェイス、テキスト、アプリケーション、電子メールの説明を自動的に生成

段落スタイルの操作

段落スタイルを作成して、段落全体に特殊な書式を適用できます。ただし、擬似クラスを使用すると、テキストの特定箇所にのみにスタイルを適用できます。次の例では、ドロップキャップのスタイルを使用する段落スタイルを作成します。

ドロップキャップのスタイルを作成する

雑誌や文献では、ドロップキャップ（またはドロップされた大文字）のスタイルが使用されており、段落やセクションの最初の文字に特殊なスタイルが設定されています。ネイティブ PDF パブリッシング機能を使用しても、同じように設定できます。

次の例では、ドロップキャップのスタイルを作成します。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「段落スタイル」を展開します。
「段落スタイル」を右クリックして、「新規スタイル」を選択します。
「スタイルを追加」ダイアログで、タグ名を p のままにして、「擬似クラス」フィールドで「::first-letter」を選択します。
「完了」を選択します。

「::first-letter」という名称の段落スタイルが新たに作成され、「段落スタイル」リストに追加されます。
p スタイルの下で「::first-letter」を選択して、次のプロパティを設定します。
- フォント：段落の最初の文字に使用するフォントを設定します。この例では、フォントファミリーを cursive、フォントの太さを 500、フォントサイズを 30 pt に設定して、フォントのカラーを選択します。
- レイアウト：ドロップキャップスタイルで、テキストの縦の配置を設定します。この例では、縦の配置を下揃えに設定します。

p タグはトピックの <p> エレメントにマッピングされるため、クラス属性を使用してこのスタイルを明示的に追加する必要はありません。コンテンツ内で <p> エレメントが使用されている場合は、ドロップキャップスタイルが自動的に適用されます。次のスクリーンショットでは、章タイトル、概要、定義リストのエレメントに、ドロップキャップスタイル形式が設定されていません。ドロップキャップスタイル形式で設定されているのは、次のように段落スタイルのみです。

文字スタイルの操作

文字スタイルを使用することで、コンテンツの文字や単語をフォーマットするスタイルを作成できます。例えば、インラインコードやファイル名の文字スタイルを作成することや、選択したコンテンツで複数のスタイルフォーマットを使用するスタイルを作成することも可能です。

インライン文字スタイルを作成する

段落内のインライン文字や単語は、極めて一般的なスタイルです。インラインスタイルを作成するには、スタイルシートに新たなスタイルを作成して、クラス属性を使用してコンテンツにスタイルを適用するという 2 つの操作が必要です。

次の例では、インライン文字スタイルを作成します。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「文字スタイル」を展開します。
「文字スタイル」を右クリックして、「新規スタイル」を選択します。
「スタイルを追加」ダイアログで、タグ名を span のままにして、「クラス名」フィールドに「BoldItalic」と入力します。
「完了」を選択します。

「code」という名称の文字スタイルが新たに作成され、「文字スタイル」リストに追加されました。
「文字スタイル」リストから span.BoldItalic を選択し、次のプロパティを設定します。
- フォント：フォント関連のプロパティはすべて、このセクションからカスタマイズできます。デフォルトでは、一部のフォントが製品にセットされています。文字スタイルに使用するフォントを選択できます。この例では、フォントファミリーを Serif に設定して、「フォントスタイル」プロパティで「太字」および「斜体」を選択します。また、フォントの太さ（太字、細字など）、テキスト装飾（下線、上線など）、フォントサイズ、フォントカラー、テキストの整列などプロパティもカスタマイズできます。
- レイアウト：レイアウト関連のプロパティ（高さ、幅、余白、パディング、整列など）を設定できます。
- 背景：「背景」プロパティでは、特定スタイルの背景色をフォーマットできます。どのスタイルでも、背景色や画像を定義することが可能です。

インライン文字スタイルを作成すると、そのスタイルをコンテンツに適用する必要があります。インラインコードスタイルを適用するには、ソースビューに移動し、クラス

属性をコンテンツに追加します。

class = "BoldItalic"

次の例では、実行中のテキストの異なる箇所に適用された太字の斜体フォーマットを示します。

リストスタイルをカスタマイズする

リストスタイルには、番号付きリストおよび箇条書きリストで使用するデフォルトのスタイル設定が含まれます。ドキュメントの要件に応じて、このリストスタイルを簡単にカスタマイズできます。次の例では、番号付きまたは順序付きリストスタイルをカスタマイズします。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「リストスタイル」を展開します。
リストから ol スタイルを選択します。

「プロパティ」パネルに ol スタイルのプロパティとそのプレビューが表示されます。
「詳細フォーマット」オプションを選択します。確認メッセージが表示されます。
確認メッセージで「はい」をクリックし、「詳細フォーマット」プロパティを開きます。

デフォルトでは、以下のプロパティを利用できます。
- レベル：番号付きリストには、デフォルトで 6 つのレベルがあります。このドロップダウンで選択するレベルによって、選択したレベルとそれ以降のレベルのスタイル変更を管理できます。例えば、レベル 4 を選択すると、適用したスタイル変更すべてはレベル 4、5、6 に設定されます。
- リストスタイルの種類：さまざまなリストの番号付きスタイルから選択できます。リストには、ロケール固有のスタイルおよび汎用の番号スタイルが含まれます。このスタイルは、番号付きリストを作成するために使用されます。リストスタイルには、アラビア語、カンボジア語、デーヴァナーガリー文字、エチオピア語、ハングル文字、ヘブライ語、日本語、韓国語、簡体字中国語、ウルドゥ語などの種類があります。
- 番号フォーマット：デフォルトフォーマットは <x> に設定されています。x 値は「リストスタイルの種類」プロパティで選択した番号付けスタイルに置き換えられます。
- 例えば 10進法（1）のスタイルを選択すると、リストエレメントのすべてのインスタンスが x 自動増分値となり、2、3、と増えていきます。また、フィールドにカスタムテキストを追加し、リストスタイルをフォーマットすることも可能です。例えば、すべての第 1 レベルリストスタイルにサフィックス「)」を追加する場合、このフィールドを「<x>」と設定する必要があります。
- 文字の挿入：番号フォーマットに特殊文字を追加する場合は、「文字の挿入」アイコンをクリックします。スタイル形式で追加する文字を選択し、「挿入」をクリックします。「カテゴリの選択」ドロップダウンリストから、あらゆる種類の特殊文字を選択できます。
- レベルを挿入：番号フォーマットには、前のレベルから数値を含めることができます。例えば 6 番目のレベルに 5 番目の番号フォーマットを含めるには、「レベルを挿入」ドロップダウンリストから「5」を選択します。「レベルを挿入」ドロップダウンには、前のレベルの数値のみが表示されます。次のレベルは表示されません。例えば、レベル 3 の場合、「レベルを挿入」リストにはレベル 1 と 2 のみが表示されます。
番号フォーマットを変更して、必要に応じてリストの値を表示することも可能です。例えば、レベル 3 にネストされた番号付けスタイルを用いる場合は、そのスタイルを「<2>.<x>))」としてフォーマットすることができます。これにより、リスト番号 2、ピリオド、リスト番号 3、2 つの括弧が「2.3))」と続けて表示されます。
- インデント：リストをインデントする場合は、インデント値を設定する必要があります。変更したインデントは、「プレビュー」パネルですべて確認および調整できます。
- プレフィックス幅：この領域には、番号フォーマットが配置されます。選択したフォーマットが収まるサイズに、自動で設定されます。サイズを拡大する場合は、デフォルト値を置き換えることができます。手動で値を設定する場合は、幅に影響があるその他のプロパティを変更してください。例えばフォントサイズ、プレフィックスまたはサフィックスが含まれているフォーマット、あらゆるフォントのプロパティを変更すると、最適なサイズで表示されます。
- 字間および行間：リスト番号フォーマットとコンテンツ間の字間を指定します。行間では、2 つのリスト項目の間隔が管理されます。
次のスクリーンショットには、カスタマイズされた各レベルの番号付きリストが示されています。

テーブルスタイルの操作

スタイルシートを使用すると、n 個のテーブルスタイルを作成できます。テーブルスタイルではテーブル全体だけでなく、特定の行や列を作成することも可能です。セルレベルでスタイルを管理することで、視認性の高いテーブルスタイルを作成できます。

次の例では、テーブルスタイルの作成方法と、カスタマイズ可能なあらゆるテーブルスタイル設定オプションについて解説します。

編集が必要なスタイルシートを開きます。
「スタイルリスト」で「テーブルスタイル」を右クリックし、「新規スタイル」を選択します。
「スタイルを追加」ダイアログで、タグ名を table のままにして、「クラス名」フィールドに二重境界線を入力します。
「完了」を選択します。

その他スタイルの操作

構造化（DITA）コンテンツを操作する場合は、ほぼすべての DITA エレメントにデフォルトのスタイルシートのスタイルマッピングが含まれています。例えば <shortdesc> エレメントのスタイルは、その他スタイル／.shortdesc のスタイル定義で定義されます。このようなスタイルは簡単にカスタマイズすることが可能で、構造化コンテンツから生成された PDF 出力にも自動的に適用されます。このため、他のカスタムスタイルのように、これらのスタイルのコンテンツに outputclass 属性を追加する必要はありません。

デフォルトで使用できないエレメントのスタイル定義を作成する場合、またはカスタムエレメントが存在する場合は、スタイルシートに容易にスタイルを作成できます。ただし、構造化エレメントと同じ名前でスタイルを作成してください。次の例では、新しいウィンドウのタイトル「wintitle」のスタイルを作成します。

編集が必要なスタイルシートを開きます。
「スタイル」リストで、「その他のスタイル」を展開します。
「他のスタイル」を右クリックして、「新規スタイル」を選択します。
「スタイルを追加」ダイアログで、タグ名を空欄のままにして、「クラス名」フィールドに「wintitle」と入力します。
「完了」を選択します。

「.wintitle」という名前のスタイルが新たに作成され、「その他のスタイル」リストに追加されました。
「その他のスタイル」リストから「.wintitle」を選択して、必要に応じてプロパティを設定します。

JavaScript を使用したコンテンツやスタイルの操作

PDF 出力パブリッシング機能を使用すると、最終的な PDF 生成の前に JavaScript を使用して、コンテンツやスタイル（コンテンツに適用済み）を操作できます。この機能を使用すると、最終的な出力の生成方法を包括的に管理できます。例えば、法律上の注意情報を PDF 出力に追加するとします。この PDF 出力は別の PDF に含まれています。 JavaScript を使用すると、基本コンテンツの PDF が作成された後に、法律上の注意情報を追加できます。最終的な PDF が生成される前に情報を追加できます。

JavaScript の実行に対応するために、PDF 出力パブリッシング機能には次のコールバック関数が用意されています。

window.pdfLayout.onBeforeCreateTOC（コールバック）：このコールバック関数は、目次が生成される前に実行されます。
window.pdfLayout.onBeforePagination（コールバック）：このコールバック関数は、目次が生成された後、改ページが PDF に追加される前に実行されます。
window.pdfLayout.onAfterPagination（コールバック）：このコールバック関数は目次の後に実行され、PDF に改ページが追加されます。

注意：

このようなコールアウト関数では、実行シーケンスが内部で維持されます。まず onBeforeCreateTOC を実行し、次に onBeforePagination、最後に onAfterPagination が実行されます。

実行するコンテンツまたはスタイルの変更の種類に応じて、使用するコールバック関数を選択できます。例えば、コンテンツの追加は、目次が生成される前に実行することをお勧めします。同様に、スタイルの更新は、ページ割り付けの前後のどちらでも実行できます。

次の例では、図のタイトルの位置が画像の上から下に変更されます。変更するには、プリセットで JavaScript 実行オプションを有効にする必要があります。オプションを有効にする手順は次のとおりです。

プリセットを開いて編集します。
「詳細設定」タブに移動します。
「JavaScript を有効にする」オプションを選択します。
プリセットを保存して閉じます。

次に、以下のコードを使用して JavaScript ファイルを作成し、テンプレートの「リソース」フォルダー内にファイルを保存します。

/*
*	この JavaScript コードを使用して、画像の下にある図のタイトルを移動します
*	*/

window.addEventListener('DOMContentLoaded', function () { window.pdfLayout.onBeforeCreateTOC(function() {
var titleNodes = document.querySelectorAll('.fig > .title') for (var i = 0; i < titleNodes.length; i++) {
var titleNode = titleNodes[i]
var figNode = titleNode.parentNode
var imageNode = figNode.querySelector('.image') if(imageNode && imageNode.parentNode !== figNode) {
 
imageNode = imageNode.parentNode
}
if (figNode && imageNode && imageNode.parentNode === figNode) { figNode.insertBefore(imageNode, titleNode)
}
}
})
});

注意：

コールバック関数を使用する前に、window.addEventListener('DOMContentLoaded', function () 関数を呼び出す必要があります。

次にこのスクリプトは、PDF 出力を生成するためにテンプレートファイルから呼び出される必要があります。この例では、目次テンプレートに追加します。 <script> タグが、<body> タグの内側で事前定義された <div> タグの内側に追加されるようにします。 <head> タグの内側、または <body> タグの外側に追加すると、スクリプトは実行されません。