【初心者向】WordPress3.5以降の画像/メディアの追加方法

  • このエントリーをはてなブックマークに追加
  • 0
WordPress

WordPressがバージョン3.5になってからだったと思いますが、画像をアップロードする方法がだいぶ変わりましたよね。個人的には見やすく、使いやすくなったと思っています。この記事ではそんな新しい画像アップロード・編集エディタの使い方についてご紹介したいと思います。

記事投稿エディタ上から画像をアップロードする手順

メディアの追加方法を順を追って説明します。

(1) メディアを追加したい位置にカーソルを合わせ、「メディアを追加」をクリック

エディタの左上にある「メディアを追加」というボタンをクリックします。

メディアを追加

するとこのようなメディア挿入のためのフロー画面が表示されます。

メディア追加フロー画面

(2) ローカルからファイルをドラッグ&ドロップする(もしくは選択する)

開かれた画像アップロードのフロー上にファイルをドラッグ&ドロップします。フロー上であれば、どんなメニューを開いていても構いません。「ファイルをアップロード」というページでも、「メディアライブラリ」というページでも、「URLから挿入」というページでもOKです。ファイルをドラッグすれば青色に変わり反応してくれます。

画像をドラッグ&ドロップでアップロード

※ちなみに、ファイルサイズを超えない限り、複数のファイルを一気にアップロードすることができます。アップしたい画像ファイルを複数選択し、まとめてドラッグ&ドロップすればOKです。

(3) 挿入したい画像にチェックを入れ、必要事項を設定

画像を挿入するに当り、配置や alt、リンクの設定ができます。

メディア設定画面

代替テキスト

HTML で言うところの alt 属性のことです。何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストです。このテキストは画像の内容を説明するものにしましょう。画像の内容を理解できない検索エンジン側にも、画像の内容を読み取ってもらうために、つまり SEO のためにも必ず設定してください。

> alt 属性については、こちらで詳しく解説されています

配置

画像の配置設定「なし」の場合は左寄せになります。「左」は左への回り込み(CSS では float: left;)、「右」は右への回り込み(CSS では float: right;)、「中央」はその名の通り中央配置になります(回り込みはありません)。

ちなみに、この画像は「左」を選択して回り込ませています。

リンク先

画像のリンク先設定画像にリンクを挿入することができます。設定すると、イメージタグがリンクタグで囲まれます。

リンク挿入に関しては注意したい点があります。なるべくここはリンク「なし」にして、とりわけ画像そのものの URL はリンクさせないようにしましょう。

リンクが貼ってあると、画像をクリックした際にその画像のみが表示され、ユーザビリティを損ないます。画像の URL をリンクさせる場合は、実際のサイズより小さいサイズで挿入し、拡大表示する必要がある時くらいに限りましょう。

ちなみに、画像を拡大表示させたい場合には、こちらのプラグインが使えます。画像をポップアップ表示してくれるプラグインです。画像ポップアップのプラグインは他にもたくさんありますので、探してみてください。

一方、画像の URL 以外のリンク先を指定する場合は、特に気にせず自由にリンクさせて OK です。以前過去記事でも書いていますが、

リンク URL を指定するなら

  • 画像をより拡大表示して見てもらいたい場合
  • 別のページへ誘導する明確な目的がある場合

に限定して、それ以外は空欄にして何もリンクさせないようにしておきましょう。

ということを忘れないように。

サイズ

画像のサイズ設定WordPressでは、画像をアップロードすると複数のサイズの画像が自動的に生成されます(サーバーの upload フォルダを見ると複数サイズの画像ファイルが確認できます)。

選択肢にはサムネイルサイズ、中サイズ、フルサイズのだいたい3つが表示されているようです。元サイズが大きい場合は大サイズという選択肢が表示される場合もあります。

このサイズの基準は、【設定】>【メディア】で変更が可能です。また、ここで選べる選択肢以外にも、後ほどサイズを調節することもできます。

(4)「投稿に挿入」をクリック

以上の設定をした上で、「投稿に挿入」をクリックします。すると指定した画像が実際にエディタ上に表示されるはずです(ビジュアルエディタを使用していた場合)。

1度挿入した後も簡単に設定を変更することができます。むしろ、より細かい設定をすることも可能です。画像の編集方法については改めて別の記事で説明したいと思います。

WordPressの記事に挿入した画像の大きさやレイアウトを再編集・再設定する方法
WordPress で記事を投稿する際に画像を挿入する機会は多いと思います。画像を挿入する方法はこちらの記事にまとめました。 そして、WordPress エディタを使えば、画像を挿入した後で簡単に配置や大きさの変更、スタイルシートでの細かな指定やリンク設定などが行えます。その方法についてまとめたいと思います。 ビジュアルエディ...

URLを指定して読み込む

外部の画像を読み込んで表示させることも可能です。既に別のサーバーや別のディレクトリ(フォルダ)にアップロードした画像を表示させたい場合には、またアップロードしなおすのは面倒ですし、容量を食うだけです。そこで、既にネット上に上げている画像は、URL指定で使い回しができます。

実際、画像の絶対パスが分かれば、ネット上にあるほぼ全ての画像を表示させることができます。

ただ、他の人の画像の使用は、著作権の問題やその画像が削除されてしまう可能性などを考えるとやるべきではありません。あくまでも自分が所有している画像で、別のサーバーや別のディレクトリ(フォルダ)にアップしている画像を使う際にこの機能を使いましょう。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

メールアドレスが公開されることはありません。