WordPressの記事に画像や動画を挿入する「メディアを追加」の使い方

WordPress 管理画面で記事を書くとき、画像は投稿画面内にドラッグするだけで簡単に挿入できますよね。

実は画像だけではなく、ほかにも様々なファイルを「メディア」から挿入できるのはご存知でしょうか。

具体的にどんなファイルを扱えるのか。また、「タイトル」「キャプション」「代替テキスト」などの設定はどうするのが良いのか。その詳細を解説したいと思います。

「あれ、こんなことできるの？ そういう意味だったの？」というのが見つかるかもしれません！

WordPressのメディアにアップロードできるもの

画像や動画などのファイルは、管理画面の「メディア」または「投稿」や「固定ページ」の投稿画面からアップできます。

記事内で使うのはほとんどが画像なので、JPEG や PNG 形式のファイルしかアップロードしたことがないかもしれませんね。

でも、実はそのほかにも様々なタイプのファイルを扱えます。

画像	jpeg・png・gif・bmp
動画	avi・flv・mov・mp4
音声	wav・mp3・wma・midi
テキスト	txt・csv・css・html
その他	pdf・docx・xlsx・zip

これらはほんの一例で、wp-includes 内の functions.php には以下のように定義されています。

function wp_get_mime_types() {
	return apply_filters( 'mime_types', array(
	// Image formats.
	'jpg|jpeg|jpe' => 'image/jpeg',
	'gif' => 'image/gif',
	'png' => 'image/png',
	'bmp' => 'image/bmp',
	'tiff|tif' => 'image/tiff',
	'ico' => 'image/x-icon',
	// Video formats.
	'asf|asx' => 'video/x-ms-asf',
	'wmv' => 'video/x-ms-wmv',
	'wmx' => 'video/x-ms-wmx',
	'wm' => 'video/x-ms-wm',
	'avi' => 'video/avi',
	'divx' => 'video/divx',
	'flv' => 'video/x-flv',
	'mov|qt' => 'video/quicktime',
	'mpeg|mpg|mpe' => 'video/mpeg',
	'mp4|m4v' => 'video/mp4',
	'ogv' => 'video/ogg',
	'webm' => 'video/webm',
	'mkv' => 'video/x-matroska',
	'3gp|3gpp' => 'video/3gpp', // Can also be audio
	'3g2|3gp2' => 'video/3gpp2', // Can also be audio
	// Text formats.
	'txt|asc|c|cc|h|srt' => 'text/plain',
	'csv' => 'text/csv',
	'tsv' => 'text/tab-separated-values',
	'ics' => 'text/calendar',
	'rtx' => 'text/richtext',
	'css' => 'text/css',
	'htm|html' => 'text/html',
	'vtt' => 'text/vtt',
	'dfxp' => 'application/ttaf+xml',
	// Audio formats.
	'mp3|m4a|m4b' => 'audio/mpeg',
	'ra|ram' => 'audio/x-realaudio',
	'wav' => 'audio/wav',
	'ogg|oga' => 'audio/ogg',
	'mid|midi' => 'audio/midi',
	'wma' => 'audio/x-ms-wma',
	'wax' => 'audio/x-ms-wax',
	'mka' => 'audio/x-matroska',
	// Misc application formats.
	'rtf' => 'application/rtf',
	'js' => 'application/javascript',
	'pdf' => 'application/pdf',
	'swf' => 'application/x-shockwave-flash',
	'class' => 'application/java',
	'tar' => 'application/x-tar',
	'zip' => 'application/zip',
	'gz|gzip' => 'application/x-gzip',
	'rar' => 'application/rar',
	'7z' => 'application/x-7z-compressed',
	'exe' => 'application/x-msdownload',
	'psd' => 'application/octet-stream',
	'xcf' => 'application/octet-stream',
	// MS Office formats.
	'doc' => 'application/msword',
	'pot|pps|ppt' => 'application/vnd.ms-powerpoint',
	'wri' => 'application/vnd.ms-write',
	'xla|xls|xlt|xlw' => 'application/vnd.ms-excel',
	'mdb' => 'application/vnd.ms-access',
	'mpp' => 'application/vnd.ms-project',
	'docx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
	'docm' => 'application/vnd.ms-word.document.macroEnabled.12',
	'dotx' => 'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
	'dotm' => 'application/vnd.ms-word.template.macroEnabled.12',
	'xlsx' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	'xlsm' => 'application/vnd.ms-excel.sheet.macroEnabled.12',
	'xlsb' => 'application/vnd.ms-excel.sheet.binary.macroEnabled.12',
	'xltx' => 'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
	'xltm' => 'application/vnd.ms-excel.template.macroEnabled.12',
	'xlam' => 'application/vnd.ms-excel.addin.macroEnabled.12',
	'pptx' => 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
	'pptm' => 'application/vnd.ms-powerpoint.presentation.macroEnabled.12',
	'ppsx' => 'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
	'ppsm' => 'application/vnd.ms-powerpoint.slideshow.macroEnabled.12',
	'potx' => 'application/vnd.openxmlformats-officedocument.presentationml.template',
	'potm' => 'application/vnd.ms-powerpoint.template.macroEnabled.12',
	'ppam' => 'application/vnd.ms-powerpoint.addin.macroEnabled.12',
	'sldx' => 'application/vnd.openxmlformats-officedocument.presentationml.slide',
	'sldm' => 'application/vnd.ms-powerpoint.slide.macroEnabled.12',
	'onetoc|onetoc2|onetmp|onepkg' => 'application/onenote',
	'oxps' => 'application/oxps',
	'xps' => 'application/vnd.ms-xpsdocument',
	// OpenOffice formats.
	'odt' => 'application/vnd.oasis.opendocument.text',
	'odp' => 'application/vnd.oasis.opendocument.presentation',
	'ods' => 'application/vnd.oasis.opendocument.spreadsheet',
	'odg' => 'application/vnd.oasis.opendocument.graphics',
	'odc' => 'application/vnd.oasis.opendocument.chart',
	'odb' => 'application/vnd.oasis.opendocument.database',
	'odf' => 'application/vnd.oasis.opendocument.formula',
	// WordPerfect formats.
	'wp|wpd' => 'application/wordperfect',
	// iWork formats.
	'key' => 'application/vnd.apple.keynote',
	'numbers' => 'application/vnd.apple.numbers',
	'pages' => 'application/vnd.apple.pages',
	) );
}

な、長い・・・

難解な文字が並んでいますが、左側がファイル形式です。いろいろ対応してるんですね。

添付ファイルの詳細

メディアを投稿に挿入するとき、「添付ファイルの詳細」でタイトルやキャプションを設定することができます。

ファイル形式によって表示項目が少し異なりますが、ここでは「画像」を例にして、それぞれどのような意味があるのか解説していきます。

URL

まず、画像までのパス（URL）が表示されています。ここを直接編集することはできません。確認のための表示ですね。

この URL はどのように決定されるのでしょうか。

管理画面サイドバーの［設定］－［メディア］を見ると、「アップロードしたファイルを年月ベースのフォルダに整理」にチェックが入っていると思います。

この場合、wp-content > uploads のなかに「2016」などの年別フォルダが作成され、そのなかに「01」や「02」と月別フォルダが作成されます。

つまり、URL はこのように生成されるわけです。

「年月ベース」のチェックを外すと、すべて uploads の中にまとめてファイルが入ります。

特に理由がなければ、初期設定の年月別にしておいたほうが管理しやすいと思います。

タイトルと代替テキスト

次に「タイトル」ですが、初期値ではファイル名が入っています。

sample.png というファイルをアップすると、タイトルは「sample」になるわけですね。

このまま投稿に挿入すると、以下のようなコードが出力されます（わかりやすくクラス名などは省略しています）。

<img src="/sample.png" alt="sample" />

タイトルにいれたものは、alt に反映されました。

しかし、「代替テキスト」という入力項目もあります。タイトルと代替テキストを両方設定すると、どうなるのでしょう。

この場合は、「代替テキスト」に入れたものが優先されます。

<img src="/sample.png" alt="サンプル" />

SEO の面でもユーザビリティの面でも、画像の alt は必ず設定すべき項目です。

「代替テキスト」には必ず画像の説明を入れる、というクセをつけておけば間違いありません。

キャプション

タイトルと代替テキストにはさまれている「キャプション」を入力してみましょう。

投稿エディタにはこのようなショートリンクが出力されます（一部省略）。

[caption]
    <img src="/sample.png" alt="サンプル" /> これはサンプル画像です
[/caption]

ブラウザで見ると、こんなコードに変換されているのがわかります。

<div class="wp-caption">
    <img src="/sample.png" alt="サンプル" />
    <p class="wp-caption-text">これはサンプル画像です</p>
</div>

見た目は、使っているテーマによって違います。通常のテキストと区別できるよう色や大きさが変わっていたり、枠線や背景色が設定されることが多いですね。

キャプションとは、画像に添える説明文のことです。

イメージ画像などでは不要なので、毎回入力する必要はありません。

説明

「説明」は管理用の項目です。

ここに入力しても、コードやブラウザには反映されません。

使いみちはなさそうですが、入力した文字列はメディア検索の対象になります。

過去記事の画像を使うことが多かったり、複数人で運営しているときは便利かもしれませんね。

添付ファイルの表示設定

「添付ファイルの詳細」を入力したら、表示設定に移りましょう。

配置

配置は「左」「中央」「右」「なし」から選べます。

それぞれ、以下のようなクラス名がつけられます。

配置	クラス名
左	alignleft
中央	aligncenter
右	alignright
なし	aligncenter

「左」と「右」を選択したときは、テキストが回り込むようになっているのが標準です。

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

リンク先

リンク先は、以下の 4 つから選択できます。

• なし
• メディアファイル
• 添付ファイルのページ
• カスタム URL

注意したいのが、初期値になっている「メディアファイル」です。これを選択していると画像にリンクがつきますが、リンクをクリックしても画像が表示されるだけです。

記事内では小さい画像を表示し、リンク先で大きな画像を見せるようなときに使えますが、記事内もリンク先も同じサイズの画像ならリンクする意味はありません。読者も「戻る」ボタンを押すだけです。

単なるイメージ画像として使うのであれば、リンク先は「なし」のほうが良いかなと思います。

初期値を「なし」にする方法はこちら

添付ファイルのページとは

よくわからないのが、「添付ファイルのページ」じゃないでしょうか。

実は、メディアをアップロードしたとき、自動的に専用ページがひとつ生成されます。実際に指定して画像をクリックすると……

このように画像だけのページが出てきます。

attachment.php をカスタマイズすればギャラリーサイトで活用できそうですが、通常のブログでは必要ないでしょう。

添付ファイルのページにリンクすると、検索エンジンのクローラーがまわってインデックスされる可能性があります。でも、画像が表示されるだけなので「低品質なページ」と判断されるかもしれません。

そのため、理由がないかぎりこのリンク先を指定しないほうが良いと思います。

なお、テンプレートをカスタマイズしていない場合、添付ファイルページのタイトルには「添付ファイルの詳細」で設定した「タイトル」が反映されます。

サイズ

記事内で表示する画像サイズは、管理画面の［設定］－［メディア］で指定したものが使えるようになっています。

ここで設定されている各サイズより大きな画像をアップすると、リサイズされた画像も同時に保存される仕組みです。

この画像例では、管理画面で設定したサイズに加え、テーマで指定したサイズでも生成されています。

1 枚アップするだけで画像がたくさん作られるので、元画像はできるだけ容量を抑えたほうが良いですね。

印刷目的ではないなら、高解像度じゃなくても大丈夫です。記事の幅に合わせてリサイズするか、アップロード前に圧縮しておく ようにしましょう。

音声や動画を挿入するときの表示設定

音声や動画を挿入するとき、添付ファイルの表示設定は「メディアプレイヤー」「リンク」「添付ファイルのページ」から選べます。

メディアプレイヤーを選択すると、このようにプレイヤーが記事内に埋め込まれます。

フリーBGM・音楽素材｜H/MIX GALLERY

容量が大きいものは直接アップせず、YouTube などを利用したほうが良いでしょう。

ビジュアルモードではCSSクラスやrel属性も設定できる

投稿エディタが「テキスト」モードになっていると、メディアを挿入してもタグが表示されるだけです。

でも、「ビジュアル」モードを使うと、メディアの情報を再編集することができます。

画像にカーソルを乗せ、えんぴつアイコンの「編集」ボタンを選んでクリック。

「画像詳細」が出てきて、メディア追加時の設定を再編集することができます。

下部に表示されている「上級者向け設定」を開いてみましょう。

画像の title 属性と CSS クラス、リンクの rel 属性と CSS クラスを設定する項目が表示されます。

あまり使う機会はないかもしれませんが、覚えておくといつか役に立つかも。

まとめ

WordPress のメディアには、このほかにも「画像編集」機能や「ギャラリー作成」機能があります。

使いこなすのは難しそうですが、ぜひいろいろ試してみてください。

長々書きましたが、今日の記事を一言であらわすと『画像の alt は必ず設定しよう！』で終わります(笑)。「代替テキスト」だけは忘れず入力しましょうね。

それでは、また。