1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressの記事に画像などのメディアを挿入する方法

WordPressの記事に画像などのメディアを挿入する方法

WordPressの記事には、画像や動画、音声、PDFなどのファイルと、様々なメディアを挿入することができます。このページではメディアファイルの挿入方法や、ファイルの細かな設定をする方法を解説しています。

  • 2016/3/25
  • 2016/3/25

文字だけのコンテンツでもいいのですが、やはり画像や動画などのメディアファイルが追加されている方が、記事を読んでいるユーザーも内容を理解しやすくなります。

WordPressの記事には、画像や動画だけでなく、音声だけのファイルやPDFなどのファイルを追加することも可能。ここでは、WordPressの記事にメディアファイルを追加する方法を解説します。

記事にメディアを追加する方法

記事に、画像などのメディアファイルを追加するには、記事編集画面の左上に表示されている「メディアを追加」ボタンをクリックして行います。

メディアを追加ボタンの位置

「メディアを追加」ボタンをクリックすると、下のようなウィンドウが開きます。

「メディアを挿入」ウィンドウの内容

まずは、画像などのメディアファイルを、記事に追加する手順から見ていきましょう。

メディアファイルをアップロードして記事に追加する方法

  1. 記事中にカーソルを合わせているところ記事の中のメディアを挿入したい位置にカーソルを合わせます。
  2. 「ファイルをアップロード」ボタンの位置メディアを挿入ウィンドウで「ファイルをアップロード」をクリックします。
  3. ファイルをアップロードするウィンドウの説明ファイルをアップロードするためのウィンドウが開きますので、記事に追加したいファイルをこのウィンドウにドラッグするか、中央の「ファイルを選択」ボタンから選択します。複数のメディアファイルを一度にウィンドウ内にドラッグすると、すべてのファイルをアップロードすることができます。
  4. アップロードしたファイルが選択状態になっている説明アップロードしたいファイルを選択すると、自動的にサーバーにアップロードされ、メディアライブラリウィンドウに切り替わります。いまアップロードしたメディアファイルが選択された状態になっています。
    もし複数のメディアを同時にアップロードしている場合は、記事に挿入したいメディアだけを選択状態にします。
  5. メディアの情報入力フォームの説明記事に挿入するメディアの情報を入力します。
    詳しくはメディアの詳細を登録するセクションで解説しますが、代替テキスト(alt属性)はメディアファイルを再生できない(画像が表示されないなど)場合に有効なものなので、できるだけ設定しておきましょう。
  6. 「投稿に挿入」ボタンの位置ウィンドウの右下にある「投稿に挿入」ボタンをクリックすると、選択したファイルが記事中のカーソルを合わせた位置に挿入されます。

WordPressでは、アップロードしたメディアファイルの小さなサムネイルを表示して、大きな画像にリンクを貼っておくといった、ファイルの表示設定を変更することもできます。

アップロードしたファイルの表示設定

ファイルの表示設定は「投稿に挿入」ボタンをクリックする前に変えておく必要があります。

一度投稿に挿入をしてしまった場合は、投稿に表示されたファイルを削除してから再度設定します。
詳しくは、アップロード済みのファイルを記事に挿入する方法セクションをご覧ください。

メディアライブラリの右下に、「添付ファイルの表示設定」メニューが表示されています。
メニューのそれぞれの意味を解説します。

ファイルの表示設定のフォーム

  • 配置
    メディアファイル位置を「左」「中央」「右」「なし」の4つから選びます。
    左を選ぶと「aliggnleft」、中央なら「aligncenter」、右なら「alignright」、なしなら「」というCSSのクラス名がメディアファイルのHTMLタグに付与されます。
    それぞれ対応するスタイルを定義すれば、テキストの回りこみや周囲の余白などの設定ができます。
  • リンク先
    記事に挿入したメディアファイルをクリックした時に、どんなファイルに移動するかを設定します。

    • なし
      メディアファイルからのリンクを挿入しません。
    • メディアファイル
      アップロードしたメディアファイルそのものへのリンクを追加します。
    • 添付ファイルのページ
      アップロードしたメディアファイルのアーカイブページへのリンクを追加します。
    • カスタムURL
      上記のどちらにも当てはまらない場合、リンク先のURLを手動で設定します。
  • サイズ
    追加したメディアファイルが、記事中でどのくらいの大きさで表示されるのかを設定します。
    「サムネイル」と「中」のサイズは、WordPressの設定画面で調整できます。

    • サムネイル
      通常は150ピクセルx150ピクセルの、小さなサムネイル画像を表示します。

    • 横幅が300ピクセル程度の大きさのファイルを表示します。
    • フルサイズ
      追加したメディアファイルそのものの大きさで、記事中に表示されます。

記事の表示部分を目一杯使ってメディアファイルを挿入したい場合、「リンク先」をなしにして、サイズを「フルサイズ」にします。

小さく表示されているサムネイルをクリックすると、大きな画像が表示されるようにしたい場合は、「リンク先」を「メディアファイル」にします。

メディアの詳細を登録する

アップロードしたメディアを選択すると、ウィンドウの右側の入力欄を使って、メディアに様々な情報を加えることができます。

ファイルの詳細入力フォーム

  • タイトル
    メディアのタイトルです。アップロードしたメディアファイルを検索する場合に使いますので、再利用する可能性があるメディアにはタイトルをつけておきましょう。
  • キャプション
    メディアのキャプションとして表示されます。HTML5から追加された<figcaption>タグで囲まれた文字として追加されますので、CSSでスタイルを変更することができます。
  • 代替テキスト
    alt属性としてメディアに追加される文字です。Googleに画像や動画の内容を伝えることにも役立ちますので、できる限り入力しておいた方がいいでしょう。
  • 説明
    メディアファイルの説明文。タイトルと同様に、メディアファイルを検索するときに使われます。必要なら入力しておく程度で大丈夫です。

アップロード済みのファイルを記事に挿入する方法

一度に複数のメディアファイルをアップロードした場合は、ファイルそのものはアップロード済みだけど記事には挿入していないという状態になりますので、メディアライブラリでメディアを選択して記事に挿入します。

メディアファイルは、メディアの種類、アップロードした月、キーワードで検索することができます。

ファイルの検索条件を入力するフォーム

キーワード検索を効果的に使うには、アップロードしたメディアに、タイトルか説明文を入力しておく必要があります。

詳しくはメディアの詳細を登録するセクションをご覧ください。

公開する画像ファイルの初期サイズを変更する方法

メディアの挿入画面で選択できる、「サムネイル」「中」の設定は、初期値を変更することができます。
テーマによっては、初期状態の設定だと画像が小さすぎる・大きすぎるということがありますので、もしテーマに合っていなければ、適切なサイズで挿入されるように設定することが必要です。

  1. メディア設定のメニューの位置「設定」の中の「メディア」をクリックします。
  2. サイズの設定を行うフォームサムネイル、中サイズ、大サイズの画像サイズを適切なサイズに設定します。
  3. 「変更を保存」ボタンの位置設定が終わったら「変更を保存」ボタンをクリックします。

この画面で設定したサイズは、それぞれのサイズの「最大の大きさ」です。
幅600ピクセル、高さ400ピクセルの画像を「中サイズ」で表示する場合は、幅が300ピクセル、高さ200ピクセルで表示されます。

また、サムネイルや中サイズの画像は、元の画像をアップロードした時にWordPressが自動的に作成してくれますが、この設定を修正したとしても、すでにアップロードされている画像のサイズは変更されません。

アップロード済みの画像のサムネイル、中サイズの大きさを変えたい場合には、元の画像を再アップロードする必要がありますのでご注意ください。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします