画像 iPad

画像はストーリーを伝える助けになります。Presenter では、ローカルからでも Web からでも画像を追加できます。さらに、思いどおりに表示させるための細かな設定も数多く用意されています。

画像を追加する

画像を追加するには、Media menu、Unsplash 連携、あるいは単純なコピー＆ペーストやドラッグ＆ドロップを使います。iPad 版 Presenter では、ローカル画像の追加にも、インターネット上の画像への直接リンクにも対応しています。

ツールバー右上のアイコンから Media menu を開く。

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

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

💡 Presenter でローカル画像を使うには、まず Media Manager に追加する必要があります。これで iA Presenter にそのファイルへのアクセス権が与えられます。Media menu から Add Media を選んでください。

構文

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

![](image-name.png)

ただ、もっと簡単なのは Content Blocks Syntax を使う方法です。画像のパスや URL を追加するには、Media menu で Add Media を開き、Library、Files、Unsplash、YouTube のいずれかを選びます。すでに Media Manager にある画像をタップして挿入することもできます。最後に、画像をドラッグ＆ドロップするか、URL をコピー＆ペーストで直接 Presenter に入れることもできます。たとえば次のようにします。

/assets/image-name.png

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

.iapresenter ファイルは、Markdown のプレゼンファイルとすべての画像をまとめた .zip です。画像をプレゼンとは別に保管する必要はありません。画像は Media menu から管理できます。

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

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

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

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

Media Menu

You’ll find the Media Menu button on the top-right of the Toolbar. From the Media Menu you can:

すべてのアセットを一覧で見る
Delete images (swipe from right to left on the image)
Rename images or get a preview (swipe from left to right on the image)
YouTube 動画リンクを追加する
Unsplash 経由で画像を追加する

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

Screenshot of the Unsplash search menu.

画像オプション

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

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

/Theme/image1.jpg

size: contain

x: right

Screenshot showing the dropdown arrow at the end of the image’s path in the Editor and the image menu

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

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

サイズを設定する

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

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

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

The difference between Cover and Contain for images

配置を選ぶ

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

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

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

By default, an image will be a foreground element. This means it will share space with other elements, such as titles. If you prefer, set your image as a background that sits beneath other elements.

順序

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

スタイル

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

Screenshot of filter options in the Image Options menu.

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

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

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

説明

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

キャプションを追加する

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

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

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

Two ways to showcase a caption with an H4 heading before and after the image.