8–11 イメージと図版(画像)

写真のようなイメージ(ラスター)画像、SVGのような線画(ベクトル画像)を一括して画像と言います。

画像を記事の中に表示するには、'{{画像ファイル名|代替テキスト}}'として記述します。

ブロック画像

画像を文章の行中に置くとインライン配置です。次のようにブロック範囲指定に':fig'クラス属性を付加して特殊化したブロックで囲むとブロック画像になります。

[[[:fig
{{画像ファイル名|代替テキスト}} 
]]]
注 意

大きな画像は、PDFではブロック画像は版面に合わせて縮小されます。EPUBではリーダーに依存しますが、多くの場合画面幅に縮小されます。

(1) CAS記法

このようにマークアップしたイメージは{{CAS-Mark.jpg|CASサービスマーク }}インラインとして扱います。

イメージをブロックとして扱いたいときは、イメージを特殊化ブロックにします。

[[[:fig
{{CAS-Mark.jpg |CASサービスマーク }}
]]]

上のイメージはブロック(独立の段落)として扱います。

(2) 表示例

このようにマークアップしたイメージはCASサービスマークインラインとして扱います。

イメージをブロックとして扱いたいときは、イメージを特殊化ブロックにします。

CASサービスマーク

上のイメージはブロック(独立の段落)として扱います。

画像のキャプション

ブロック画像にはキャプションを付けられます。そしてキャプションにはIDが付与されます。

キャプションは、'[[[:fig' の後に半角空白と '=' を置き、その後に付けてください。

V3.0から、PDFでは縦組のときに限り、画像のキャプションが長い時に図の幅で折り返します。(横組のときは、図の幅に合わせて折り返しません)。

例2

(1) CAS記法

[[[:fig =キャプション
{{CAS-Mark.jpg |CASサービスマーク }}
]]]

(2) 表示例

CASサービスマーク

図8・6 キャプション
注 意

キャプションはEPUBでは画像の下に出力されます。PDFではレイアウト詳細設定で上・下どちらに出すかを指定できます。

画像のサイズ指定

画像のサイズ指定

画像には属性でサイズを指定できます。幅の属性名は 'width' 、高さは'height'です。'{{' の直後に ':属性名=値' の形式で指定してください。属性値は数値に単位を付けて指定します。属性値と画像のファイル名の間には半角空白が必要です。

注 意

画像のサイズ指定はPDF生成でのみ有効です。EPUBはサイズ指定をCSSのスタイルに変換できます(EPUBの生成設定を参照)。但し、サイズ指定が正しく適用されるかどうかはリーダー依存です。

例3

(1) CAS記法

[[[:fig =width=30%を指定:版面の30%幅になります
{{:width=30% CAS-Mark.jpg | CAS-Mark.jpg}}
]]]

(2) 表示例

CAS-Mark.jpg

図8・7 width=30%を指定:版面の30%幅になります

CAS-Mark.jpg

height=1emを指定:本文文字と同じ高さになります
注 意

上の表示例はPDFが対象です。EPUBでは生成設定とリーダー依存です。

=表紙のイメージ

イメージのファイル名を、cover.png、cover.jpg、cover.gifとするとEPUBの表紙のイメージとなります。

AppleのiBookでは表紙イメージは本棚のアイコンになります。但し、cover.svgはアイコンになりません。

画像の説明文

特殊化した画像には説明文を付けられます。

画像のキャプションと説明文の位置

特殊化した画像に、画像の説明文を付けたとき、それをPDFに出力できるようにしました。(V2.3までは画像の説明文を記述する機能はありません。)

[[[:fig =キャプション   ←特殊化した図のマークアップとキャプション
{{画像ファイルを指定}}   ←画像ファイル名

一行空けて図の説明文を記述する ←図の説明文
]]]

キャプションの位置に関わらず、特殊化した画像の説明文は画像の下に配置します。画像のキャプションの位置は、生成⇒PDFレイアウト設定レイアウト詳細設定の【図キャプションの場所】で指定します。

  1. キャプションが画像の下のときは、キャプションの下に説明文を出します。
  2. キャプションが画像の上のときは、画像の下に説明文を出します。
注 意

EPUBでは、画像のキャプションは常に画像の下に出ますが、説明文はキャプションの上に出てしまいます。

また、説明文は本文と区別ができないので、何らかのレイアウト調整をする場合は、適当な属性値を指定する必要があります。

画像の説明文のレイアウト

  1. テキストインデントはなし。
  2. 図の開始端に揃えます。
  3. 長い時は、図の幅で折り返します。
  4. フォントサイズはキャプションと同じです。
  5. フォントファミリーはserif体。