WordPressのメディアライブラリの使い方
WordPressの記事や固定ページにメディアファイルを挿入する方法や細かな設定方法、メディアライブラリを便利にするプラグインをご紹介します。
- 2017/2/12
- 2016/3/25
文字だけのコンテンツでもいいのですが、やはり画像や動画などのメディアファイルがあった方が、記事を読んでいるユーザーも内容を理解しやすくなります。
WordPressの投稿記事や固定ページには、画像や動画、音声、PDFなど、様々な形式のメディアファイルを掲載することが可能です。
目次
メディアを管理するメディアライブラリを表示する方法
画像や動画などのファイルは「メディアライブラリ」機能で管理します。
メディアライブラリを表示する方法には、投稿記事や固定ページの編集画面の左上に表示されている「メディアを追加」ボタンをクリックする方法と、WordPress管理画面の「メディア」→「ライブラリ」を選ぶ方法があります。
▼投稿記事や固定ページから表示する
▼WordPress管理画面から表示する
メディアファイルをアップロードして記事に追加する方法
まずはパソコンに保存されている画像ファイルを新規アップロードして、投稿記事に追加する方法をご紹介します。
記事の中の画像を挿入したい位置にカーソルを合わせて「メディアを追加」ボタンをクリックします。
メディアライブラリが開いたら「ファイルをアップロード」のタブをクリックします。
ファイルをアップロードするためのウィンドウが開きます。記事に追加したい画像をこのウィンドウにドラッグするか、中央の「ファイルを選択」ボタンから選択します。
複数の画像を一度にウィンドウ内にドラッグすると、すべての画像を同時にアップロードすることもできます。
画像がアップロードされると、メディアライブラリに切り替わります。いまアップロードした画像が選択された状態になっています。
もし複数の画像を同時にアップロードしている場合は、記事に挿入したい画像だけを選択状態にします。
記事に挿入する画像の情報を入力します。詳しくはメディアの詳細を登録するセクションで解説しますが、代替テキスト（alt属性）は画像を表示できない場合に有効なものなので、できるだけ設定しておきましょう。
ウィンドウの右下にある「投稿に挿入」ボタンをクリックすると、選択した画像が記事中のカーソルを合わせた位置に挿入されます。
画像のアップロードを例にしてご紹介しましたが、動画など別形式のメディアファイルでも操作方法は同じです。
メディアの表示設定
投稿記事や固定ページには、アップロードした画像のサムネイルを表示して、原寸大の画像にリンクを貼っておくなど、ファイルの表示設定を変更することもできます。
ファイルの表示設定は「投稿に挿入」ボタンをクリックする前に変えておく必要があります。
一度投稿に挿入をしてしまった場合は、投稿に表示されたファイルを削除してから再度設定します。
詳しくは、アップロード済みのファイルを記事に挿入する方法セクションをご覧ください。
メディアライブラリの右下に、「添付ファイルの表示設定」メニューが表示されています。
メニューのそれぞれの意味を解説します。
- 配置
メディアファイル位置を「左」「中央」「右」「なし」の4つから選びます。
左を選ぶと「aliggnleft」、中央なら「aligncenter」、右なら「alignright」、なしなら「」というCSSのクラス名がメディアファイルのHTMLタグに付与されます。
それぞれ対応するスタイルを定義しておけば、テキストの回りこみや周囲の余白などの設定ができます。 - リンク先
記事に挿入したメディアファイルをクリックした時に、どんなファイルに移動するかを設定します。- なし
メディアファイルからのリンクを挿入しません。 - メディアファイル
アップロードしたメディアファイルそのものへのリンクを追加します。 - 添付ファイルのページ
アップロードしたメディアファイルのアーカイブページへのリンクを追加します。 - カスタムURL
上記のどちらにも当てはまらない場合、リンク先のURLを手動で設定します。
- なし
- サイズ
追加したメディアファイルが、記事中でどのくらいの大きさで表示されるのかを設定します。
「サムネイル」と「中」のサイズは、WordPressの管理画面「設定」→「メディア」で調整できます。- サムネイル
通常は150ピクセルx150ピクセルの、小さなサムネイル画像を表示します。 - 中
横幅が300ピクセル程度の大きさのファイルを表示します。 - フルサイズ
追加したメディアファイルそのものの大きさで表示されます。
- サムネイル
記事の表示部分を目一杯使ってメディアファイルを挿入したい場合、「リンク先」をなしにして、サイズを「フルサイズ」にします。
小さく表示されているサムネイルをクリックすると、大きな画像が表示されるようにしたい場合は、「リンク先」を「メディアファイル」にします。
lightboxプラグインを活用すれば、フルサイズの画像をページを切り替えることなく表示することができます。
メディアの詳細を登録する
アップロードしたメディアを選択すると、ウィンドウの右側の入力欄を使って、メディアに様々な情報を加えることができます。
- タイトル
メディアのタイトルです。アップロードしたメディアファイルを検索する場合に使いますので、再利用する可能性があるメディアにはタイトルをつけておきましょう。 - キャプション
メディアのキャプションとして表示されます。HTML5から追加された<figcaption>タグで囲まれた文字として追加されますので、CSSでスタイルを変更することができます。 - 代替テキスト
alt属性としてメディアに追加される文字です。Googleに画像や動画の内容を伝えることにも役立ちますので、できる限り入力しておいた方がいいでしょう。 - 説明
メディアファイルの説明文。タイトルと同様に、メディアファイルを検索するときに使われます。必要なら入力しておく程度で大丈夫です。
メディアの詳細情報はアップロードしたタイミングで登録しなくても、「メディア」→「ライブラリ」から該当のメディアを選択すれば、登録・修正が可能です。
投稿記事などに挿入したメディアを削除する方法
投稿記事などに挿入したメディアを選択して「削除」アイコンをクリックすれば、記事から削除できます。
ただし、記事から削除されただけでメディアファイルそのものはまだ残っていますので、別の記事で使ったりすることは可能です。
アップロード済みのファイルを記事に挿入する方法
「メディア」→「新規追加」でメディアファイルを追加した場合や、一度に複数のメディアファイルをアップロードした場合は、メディアライブラリでファイルを選択して投稿記事や固定ページに挿入します。
一度記事に挿入したファイルを削除した場合でも、メディアファイルそのものは削除されていませんので、メディアライブラリから再び投稿記事などに挿入することができます。
メディアライブラリでは、メディアの種類、アップロードした月、キーワードでファイルを検索することができます。
キーワード検索を効果的に使うには、アップロードしたメディアに、タイトルか説明文を入力しておく必要があります。（メディアの詳細を登録するを参照）
メディアライブラリを便利にするプラグイン
メディアライブラリにアップロードした画像や動画は、すべて同じフォルダーに保存されます。
ファイル名やメディアにつけたタイトルで検索することは可能ですが、ファイルの数が多くなってくると管理しにくくなります。
特に何度も使い回すようなファイルは、ファイル数が増えてくると埋もれてしまい、記事を書く時の効率も悪くなってしまいます。
そこで、メディアライブラリに「カテゴリ」を導入できるプラグイン「Enhanced Media Library」がおすすめです。
Enhanced Media Libraryを使えば、「よく使う画像」というカテゴリを作って画像を整理することができます。
メディアファイルの整理に困っている方はインストールして見てはいかがでしょうか。
公開する画像ファイルの初期サイズを変更する方法
メディアの挿入画面で選択できる、「サムネイル」「中」の設定は、初期値を変更することができます。
テーマによっては、初期状態の設定だと画像が小さすぎる・大きすぎるということがありますので、適切なサイズで挿入されるように設定することが必要な場合もあります。
WordPress設定画面の「設定」の中の「メディア」をクリックします。
サムネイル、中サイズ、大サイズの画像サイズを適切なサイズに設定します。
設定が終わったら「変更を保存」ボタンをクリックします。
この画面で設定したサイズは、それぞれのサイズの「最大の大きさ」です。
幅600ピクセル、高さ400ピクセルの画像を「中サイズ」で表示する場合は、幅が300ピクセル、高さ200ピクセルの範囲で表示されます。
また、この設定を修正してもアップロード済みの画像サイズは変更されません。
アップロード済みの画像のサムネイル、中サイズの大きさを変えたい場合には、元の画像を再アップロードする必要がありますのでご注意ください。
Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール
私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。
ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。
スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。
Webスク
（6か月のガッチリ型）
半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。
無料体験レッスンでは、キャリア形成の相談もできます。
WebCamp
（1か月の集中型）
こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。
このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。
CodeCamp
（2〜6か月のカスタマイズ型）
現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。
新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。
