画像

画像はストーリーを伝える助けになります。Presenter では、画像の追加はドラッグ＆ドロップするだけです。さらに、思いどおりに表示させるための細かな設定も用意されています。

画像を追加する

画像を追加するには、Editor に ドラッグ＆ドロップ するか コピー＆ペースト してください。Mac 版 Presenter では、ローカル画像だけでなく、インターネット上の画像リンクも追加できます。

Presenter は複数の画像フォーマットに対応しています。

形式	拡張子
PNG	.apng, .png
GIF	.gif
WebP	.webp
JPEG	.jpg, .jpeg
TIFF	.tif, .tiff
SVG	.svg
PDF	.pdf

💡 Presenter でローカル画像を使うには、まず Media Manager に追加する必要があります。これで iA Presenter にそのファイルへのアクセス権が与えられます。いちばん簡単なのはドラッグ＆ドロップです。

構文

Presenter は画像用の Markdown 構文に対応しており、次のように入力できます。

![](image-name.png)

ただ、もっと簡単なのは Content Blocks Syntax を使う方法です。ドラッグ＆ドロップ、またはコピー＆ペーストで画像のパスや URL を追加できます。たとえば次のようにします。

/assets/image-name.png

https://source.net/image-name.jpeg

.iapresenter ファイルは、Markdown のプレゼンファイルとすべての画像をまとめた .zip です。画像をプレゼンとは別に保管する必要はありません。画像は Inspector の Media Manager タブから管理できます（下記参照）。

💡 同じ画像を複数のプレゼンでよく使うなら、custom theme に入れておくと手間を減らせます。

Presenter では画像用に 2 つの仮想フォルダを使います。

• assets: プレゼンに追加したグラフィック用。例 /assets/image-name.png
• theme: テーマに同梱された参照グラフィック用。例 /Theme/image.jpg

プレゼン内でグラフィック（画像や動画）を扱うときは asset フォルダを使います。レイアウトテーマ側のグラフィックを差し替えるときは theme フォルダを使います。

Media Manager タブ

右側の Inspector の上部に Media Manager タブがあります。Inspector を閉じている場合は、次の方法で開けます。

• Menu → View → Show/Hide Inspector
• ショートカット ⌥⌘I
• トラックパッドで右端から左へ 2 本指スワイプ

Media Manager では次のことができます。

• すべてのグラフィック（画像と動画）の一覧を見る
• グラフィックを Editor にドラッグ＆ドロップする
• 使っていない画像を削除する
• グラフィック名を変更する（末尾の拡張子、たとえば .png は消さないでください）
• YouTube 動画リンクを追加する
• Unsplash 経由で画像を追加する

💡 Unsplash を使えば、無料で高品質な写真をすばやく見つけてスライドに挿入できます。Presenter は元画像にあるキャプションやクレジットも自動で追加します。Unsplash integration の記事や video もご覧ください。

画像オプション

Content Blocks Syntax を使っている場合は、metadata を使って画像のいくつかの表示設定を調整できます（この方法は Markdown 構文では使えません）。

Editor で画像パスの末尾にある dropdown arrow ⬇️ をクリックし、オプションを選んでください。追加・削除した設定は、たとえば次のように Editor 上に表示されます。

/Theme/image1.jpg

size: contain

x: right

キーボード操作を続けたい場合は、代わりに画像コマンドを直接入力することもできます。たとえば次のようにします。

• size: contain
• x: left
• y: bottom
• background: true
• filter: lighten
• opacity: 50%

サイズを設定する

画像サイズは Cover か Contain のどちらかに設定できます。

Cover: アスペクト比を保ったまま、利用可能な空間を画像で完全に埋めます。画像の比率がコンテナと合わない場合は、一部が切り取られます。

Contain: アスペクト比を保ちながら、利用可能な空間に収まるよう表示します。画像の比率がコンテナと合わない場合は、上下または左右に余白ができます。

配置を選ぶ

選べる配置は次のとおりです。

• 横方向: Center（初期値）、Left、Right
• 縦方向: Center（初期値）、Top、Bottom

Presenter では画像は container の中に配置されます。container はスライド全体の場合もあれば、カラムやグリッド内の 1 セルの場合もあります。実際の縦横の位置は、画像と container のアスペクト比によって変わります。

初期状態では、画像は foreground 要素として扱われます。つまり、タイトルのような他の要素と同じ空間を共有します。必要なら、ほかの要素の背後に置く background に切り替えることもできます。

順序

画像の順序は Content（初期値）または Background から選べます。Background にすると、タイトルやほかの要素がその上に表示されます。画像が明るすぎたり複雑すぎたりして文字が読みにくい場合は、フィルターや不透明度を調整すると改善しやすくなります。

スタイル

画像には Lighten、Darken、Grayscale、Sepia、Blur の各フィルターをかけられ、不透明度も変更できます。画像を background として使い、その上に別の要素を重ねるときに特に便利です。

CSS に慣れている場合は、Custom Theme の中で CSS Class を作成し、画像のようなプレゼン内の content block に適用できます。

Editor から Custom Theme の CSS Class を呼び出すときは、Class: your css class name という簡単な書式を使ってください。

💡 iA Presenter で画像をレスポンシブに表示する仕組みはかなり複雑です。画像位置を無理に固定するための CSS Class や追加調整は、視聴側のデバイスによって予期しない結果を招くことがあるため、基本的にはおすすめしません。

説明

アクセシビリティ向上のため、各画像にはタイトルと代替テキストを付けるのが望ましい方法です。

キャプションを追加する

キャプションを表示したい場合は、画像と一緒に #### を付けた H4 見出しとして入力します。

キャプションがどこに出るかは、画像とテキストをどの順で置くかによって決まります。どちらの順でも、文字サイズは変わりません。

H4 見出しを先に置く と、下の画像を紹介したり短く説明したりする形になります。逆に 画像を先に置く と、画像そのものが主役になり、その下のキャプションが補足説明になります。

ビジュアル