• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

投稿・ページヘのメディア挿入

提供: WordPress Codex 日本語版
移動先: 案内検索

概要

WordPress でページや投稿を作成したり編集中に「メディアの追加」ツールを使用していつでも簡単に多くの異なるタイプの画像を挿入できます。

挿入可能なメディアは以下のとおりです。

  • 画像
  • 音声
  • 動画
  • さまざまなタイプのドキュメント

コンテンツに画像を挿入する手順を紹介します。

Step 1 – カーソルを置く

ページや投稿にメデイアを挿入するには、まずメディアを表示する場所にカーソルを置きます。テキスト内にカーソルを置けば、コンテンツのインラインとしてメディアを挿入できます。またカーソルをブランク行に置けば、メディアを単体で表示できます。

add-image-insert-cursor.png

ヒント: テキストの右側にメディアを表示する場合でも テキストの左マージンにカーソルを置きます。後述する「配置」オプションで、画像をテキストの左側に表示するか、右側に表示するか指定できます。また挿入された画像に対するテキストの回り込みも自動的に調整されます。


Step 2 –メディアの追加ボタンをクリック

メディアを挿入する位置にカーソルを置いた後は「メディアを追加」をクリックしてメディアのアップローダーを起動し、画面の左サイドの操作の一覧から「メディアを挿入」を選択します。

add-media-button.png


Version 3.9 からはアップロードするメディアを直接エディタにドラッグできます。

drop-images.jpg


Step 3 – メディアを追加または選択

ページや投稿に追加するメディアはアップロードするか、すでにアップロードされたものの中から選択できます。メディアアップローダーウィンドウの中央にある次のどちらかのオプションを選択してください。

  • ファイルをアップロード: 使用するメディアをローカルコンピュータからアップロードエリアにドラッグしてアップロードします。
  • メディアライブラリ: メディアライブラリ内のこれまでにアップロードされたメディアからページや投稿に追加するメディアを選択します。


メディアを挿入画面

追加するメディアを選択するかアップロードすると、サムネイルの隣に選択を示すチェックボックスが表示され、メディアアップローダー画面の右側の「添付ファイルの詳細」領域に選択したメディアが表示されます。

Step 4 – ファイルの詳細

image-details-and-display-settings.png
添付ファイルの詳細領域では小さなプレビュー画面またはアイコンと、ファイル名、アップロード日時、画像ファイルの場合は画像サイズ、音声や動画ファイルの場合は時間など、重要な情報が表示されます。

タイトル
メディアの名前
キャプション
簡単な説明。テキストは画像の下に表示されます。
代替テキスト
メディアを説明するテキスト。アクセシビリティのために使用されます。
説明
メディアの説明

添付ファイルの表示設定 領域では挿入されたメディアをサイトでどのように表示するか設定できます。
配置
左、中央、右、なし
リンク先
メディアファイル、添付ファイルのページ、カスタム URL、なし
リンク URL
(表示のみ) メディアの URL または Web アドレス
サイズ
サムネイル、中、大サイズ、フルサイズ


利用可能なサイズは、画像がアップロードされた際に自動で生成された画像のサイズによります。生成される画像サイズは、設定 > メディア で指定できます。オリジナルの画像サイズと比較して、指定されたサイズが等しいか小さい場合にのみ画像が生成されます。


メディアが画像ファイルの場合、利用可能なアクションとして 画像を編集 ページにアクセスする 画像を編集 リンク、およびサイトから画像を削除する 完全に削除する リンクが表示されます。

メディアが音声ファイル、動画ファイルの場合、配置、リンク、サイズオプションの代わりに埋め込みオプションが表示されます。


audio-details-and-display-settings.pngvideo-details-and-display-settings.png


埋め込みまたはリンク:

  • メディアプレイヤーを埋め込む
  • メディアファイルへのリンク
  • 添付ファイルページヘのリンク


画像の位置

配置 コンテンツの中のどこに画像を配置し、ページ内のテキストをどのように処理するかを指定します。次の画像配置オプションから指定できます。

  • 左: 左マージンに画像を配置し、ページ内の右側の空き領域にテキストを折り返して表示します。
  • 右: 右マージンに画像を配置し、ページ内の左側の空き領域にテキストを折り返して表示します。
  • 中央: ページの中央に画像を配置し、左右にテキストを表示しません。
  • なし: 配置を指定せずにページに画像を挿入します。

上段は「左」配置と「右」配置。下段は「中央」配置と配置なし


画像のリンク

リンク先設定は画像をクリックした際の転送先を指定します。次の画像リンク設定から指定できます。

  • 添付ファイルのページ: 挿入した画像を WordPress メディア添付ファイルのページにリンクします。
  • メディアファイル: 挿入した画像を直接オリジナルのフルサイズファイルにリンクします。
  • カスタム URL: 挿入した画像がクリックスされると、カスタムリンクURL に移動するよう設定できます。
  • なし: 完全にリンクを削除し、画像を「リンク不可」として表示します。


画像のサイズ

サイズ 設定はサイトに追加する画像のサイズを指定します。デフォルトで WordPress が作成する 4つのサイズの画像から選択できます。

  • サムネイル: ページや投稿にサムネイルサイズの小さな画像を表示します。注意: デフォルトではサムネイルサイズは正方形のため、オリジナルの画像が自動的にトリミングされる場合があります。
  • 中: ページや投稿に中サイズの画像を表示します。配置オプションの「左」または「右」に適したサイズで、反対側の空いたスペースには十分な量のテキストが回り込みます。
  • 大サイズ: ページや投稿に大サイズの画像を表示します。注: WordPress がテーマのコンテンツ領域の幅を決定し、可能な限り大きく画像を表示します。
  • フルサイズ: ページや投稿にフルサイズの画像を表示します。注: WordPress がテーマのコンテンツ領域の幅を決定し、可能な限り大きく画像を表示します。オリジナルの画像サイズがこの幅よりも大きい場合、フルサイズの画像は表示されません。


サムネイル、中、大サイズ、フルサイズ (画像配置は「左」配置)


画像サイズをカスタマイズするには WordPress ダッシュボードの 設定 > メディア にアクセスしてください。別サイズの画像の自動生成やサムネイルのトリミングは画像がアップロードされた際に実行されます。生成された画像がここで説明したプションの画像になります。

Version 3.9 からは、画像をクリックすると表示されるハンドルをドラッグしてサイズを変更できます。


Step 5 – メディアの挿入

insert-into-post-button.png
挿入オプションを指定した後は、右下の 投稿に挿入 ボタン、または 固定ページに挿入 ボタンをクリックし、メディアを追加します。メディアアップローダーウィンドウが閉じ、エディターウィンドウ内にメディアが表示されます。


画像の詳細

イメージを追加後は、いくつかのオプションを利用してイメージの詳細を変更できます。イメージの詳細を変更するにはエディター内の画像をクリックし、「編集」アイコンをクリックして 画像詳細 画面を開くか、「x」アイコンをクリックして画像を削除できます。また「左寄せ」「中央揃え」「右寄せ」「配置なし」アイコンをクリックして画像の配置を変更できます。


edit-image-icon.png


画像詳細 画面を使用して挿入されたメディアファイルごとに個別に画像の属性を変更できます。「上級者向け設定」をクリックすると追加のオプションが表示されます。

画像詳細


  • キャプション: 簡単な説明。テキストは画像の下に表示されます。
  • 代替テキスト: メディアを説明するテキスト。スクリーンリーダーにより使用されます。
  • 配置: コンテンツ領域における画像の位置
  • サイズ: アップロード時に生成された各種サイズの画像から選択されたサイズ
  • リンク先: 画像がクリックされた場合の転送先
  • 画像タイトル属性: HTMLタグ「img」のタイトルを設定します。画像の上にカーソルを移動した際に表示されるポップアップテキストとして使用されます。
  • 画像 CSS クラス: HTML タグ「img」に CSS クラスを付加します。カスタム CSS プラグインや子テーマを使用して画像にスタイルを設定できます。
  • リンクを新ウィンドウまたはタブで開く: HTML link に target="_blank" を追加します。
  • リンク rel: HTML link の rel 属性、または リンクタイプ を設定します。
  • リンク CSS クラス: HTML link に CSS クラスを追加します。カスタム CSS プラグインや子テーマを使用してリンクにスタイルを設定できます。

上の設定例で 画像の詳細 から次のようなコードが出力されます。


[caption id="attachment_48" align="alignnone" width="300"]<a class="link-css-class" href="http://vccw.dev2/wp-content/uploads/2015/08/dsc003301.jpg" target="_blank" rel="link relationship or link type"><img class="image-css-class wp-image-48 size-medium" title="画像タイトル属性" src="http://vccw.dev2/wp-content/uploads/2015/08/dsc003301-300x225.jpg" alt="代替テキスト" width="300" height="225" /></a> キャプション[/caption]


3.9 での変更

WordPress Version 3.9 からは画像の詳細設定のうちボーダー、マージン、スタイルなどいくつかの設定が 画像詳細 画面から削除されました。コンテンツ管理のベストプラクティスに従い画像ごとに追加するインラインスタイルの量を減らしました。テーマやカスタム CSS の代わりにインラインスタイルを追加すると HTMLの量が増え、レスポンシブデザインへの対応やテーマ変更の際、画像の対応が難しくなるためです。

理論的には、上手に実装されたテーマであれば画像のボーダーやマージンを期待どおりに処理するはずです。しかし手動で画像へのインラインスタイルの追加が必要な場合もあります。この場合、エディター領域の右上の「テキスト」タブをクリックして HTML エディターモードを使用して、インライン CSS を追加できます。またはプラグイン「Advanced Image Styles」を使用して、画像詳細 画面に画像のボーダーやマージンのオプションを再表示できます。

画像詳細 画面内の画像の下に位置したソースフィールドは「更新」ボタンに変更されました。メディアライブラリ内に存在しない画像をメディアライブラリへアップロードせずに利用するには、「メディアを追加」>「URL から挿入」オプションを使用して画像を追加してください。


リソース

最新英語版: WordPress Codex » Inserting_Media_into_Posts_and_Pages 最新版との差分