WordPressの画像、挿入する方法とは?

WordPressの画像、挿入する方法とは?

WordPress画像を挿入する方法を説明しました。投稿や固定ページに画像を入れたいけれど、今一つよくわからないという方に適した内容です。画像の挿入方法だけでなく、同時にやっておくべき重要なポイントも解説しました。

WordPressの画像、挿入する方法を知る意味とは?

あなたは、「WordPressの画像を挿入する方法をちゃんと知りたい」そう思って、このページをご覧になっていると思います。WordPressは簡単に操作できるので、画像も何となく挿入できると思いますが、「このやり方で正しいのか? 効率的なのか?」と思うこともあると思います。

画像が狙い通り表示できていれば特に問題ありませんが、ちょっとしたコツを知ることで、少しでも集客に貢献するようにしたいと思われている方もいらっしゃるでしょう。そこで、どのように画像を扱えばよいのか、挿入方法を中心に詳しく説明しました。

WordPressの画像、挿入する方法のポイント。

それでは、WordPressの画像、挿入する方法のポイントを説明します。WordPressはマウス操作だけで簡単に画像を扱うことができるので、画像に対する細かい知識もしっかりと紹介しています。

画像を準備する

まずは画像を準備します。扱える画像の種類はブラウザで表示できる画像ということになるので、これら3種類(拡張子は4種類)です。

  • JPEG(拡張子 ⇒ .jpg または .jpeg)
  • PNG(拡張子 ⇒ .png)
  • GIF(拡張子 ⇒ .gif)

画像を本文に入れる場合、幅は680pxぐらいが最大サイズだと思います。また、ページ幅いっぱいの画像(トップページやヘッダーなど)であれば、1070px 程度になると思います。なお、サイズは使用するテーマによって変わるので、推奨される横幅を事前に確認しておいてください。

ところで、WordPressにはトリミング程度の多少の加工機能はありますが、基本的にはフォトレタッチソフトを使って事前に調整しておいてください。Photoshop Elements や GIMP などたくさんの種類があるので、お好みのものを使っていただいて構いませんよ。

画像の挿入方法は2つ

用意した画像をページへ挿入するには、2つの方法があります。そこで、それぞれの方法について、やり方と意味について説明しました。なお、画像の挿入方法を集中的に説明してたので、細かい設定は少し後で解説しています。

ページの好きな位置に画像を挿入

ページの好きな位置に画像を挿入するには、以下のように操作します。

  1. 「投稿」や「固定ページ」の編集画面で、画像を挿入したい位置をクリック。
  2. [メディアを追加]をクリック。
    メディアを追加
  3. 「メディアを挿入」が表示されるので、[ファイルをアップロード]をクリック。
    メディアを挿入 ファイルをアップロード
  4. 画像をドラッグ&ドロップするか、[ファイルを選択]から画像ファイルを選択する。
    メディアを挿入 アップロードするファイルをドロップまたはファイルを選択
    ※ ドラッグ&ドロップがうまくいかない場合は、[ファイルを選択]を使えば確実ですよ。
  5. 画像が「メディアライブラリ」に登録される。
    メディアライブラリ
  6. 右下の[投稿に挿入]または[固定ページに挿入]をクリック。

    投稿に挿入  固定ページに挿入

  7. 画像が挿入される。

これで画像が挿入されました。この方法は、ページの好きな位置に画像を挿入できるので、何かの説明のための画像であったり、ちょっとした挿絵的なものに使えますよ。つまり、一般的な用途で使う方法というわけですね。

ページのトップにアイキャッチ画像を挿入

ページのトップにアイキャッチ画像を挿入するには、以下のように操作します。

  1. 「投稿」や「固定ページ」の編集画面で右下の[アイキャッチ画像を設定]をクリック。
    アイキャッチ画像を設定
  2. 「メディアを挿入」が表示されたら、先ほどの説明と同じ方法で画像を挿入。
  3. [アイキャッチ画像を設定]をクリック。
    アイキャッチ画像を設定
  4. エディタ画面に戻って、アイキャッチ画像が設定されているのがわかる。
    ※ 表示を確認する場合は、「公開」ボックスの[プレビュー]をクリックしてください。

これでアイキャッチ画像が挿入されました。ちなみに、アイキャッチ画像はページの先頭に表示されるのが一般的です。また、テーマによっては位置が異なったり、固定ページでは表示されない場合もありますので、事前に仕様を確認しておいてください。

ところで、アイキャッチ画像はその名の通り、閲覧者の目を捉えるためのものです。画像があるとその先にある文章を読みやすくなるという心理的なものを利用しているんですね。ちなみに、よほど変なものでなければ、どんな画像でも構いませんよ。

場合によってはその他の方法もある

ヘッダー画像といって、ホームページ最上部に横長の画像を入れる場合がありますよね。この、ヘッダー画像については、[外観]の[ヘッダー]から挿入することになります。挿入の方法は『ページの好きな位置に画像を挿入』とまったく同じです。

選択して切り抜く

ただし、すぐ挿入するのではなく、トリミングできるようになっています。すでに適切なヘッダーのサイズに調節されている場合は、トリミングすることなく挿入してもかまいませんよ。ほかにも、ロゴ画像などもありますが、いずれの場合も挿入方法は同じです。

画像切り抜き

画像はメディアライブラリに保管

画像を挿入したときに何度か表示されているので目にしていると思いますが、画像は『メディアライブラリ』で閲覧できます。画像専用のフォルダがあるんですが、そこの内容を一覧表示して、作業しやすいようにしているのがメディアライブラリです。

メディアライブラリを直接表示する方法。

  1. [メディア]をポイントし[ライブラリ]をクリック。
    ライブラリ
  2. メディアライブラリが表示される。
    メディアライブラリ

なお、メディアライブラリに直接画像を保管することもできます。その場合は、[新規追加]から画像を追加してください。こうしておくと、画像を挿入する際にメディアライブラリから選択することができますよ。つまり、1つの画像を使いまわすことができるわけですね。

画像の設定を行う

ここまではわかりやすくするために、画像の挿入方法のみを説明しましたが、ここからはもう少し細かい画像の設定を行います。試に、画像を挿入する手前まで表示して、メディアライブラリの画像をクリックしてください。すると次のような「添付ファイルの詳細」という画面が表示されます。

添付ファイルの詳細

最低限必要と考えられる設定は「タイトル」、「代替テキスト」、「配置」、「サイズ」などです。それぞれの役割や設定は次の通り。

  • タイトル:
    ホームページを閲覧しているときに画像をマウスでポイントすると、説明のようなものが表示されることがありますが、それは「タイトル」に入っている文字列が表示されています。なので、何かを表示したいときは「タイトル」を使用してください。
  • 代替テキスト:
    画像が表示できないときに代わりに表示されるテキストです。画像の内容を説明する文字列を設定してください。画像にリンクを設定した場合は、この代替テキストがリンク文字として検索エンジンに認識されるので、重要な設定項目です。
  • 配置:
    画像を「左・中央・右・なし」のどこに置くのかを設定できます。おそらく「左」と「なし」は同じ配置になると思いますが、テーマによっては表示に違いが出るかもしれません。
  • サイズ:
    画像の表示サイズ(元のサイズは維持)を調節できます。「サムネイル・中・フルサイズ」が選べますが、「小・中・大」だと思ってもらえば差し支えないです。ただし、基本的には画像自体の大きさを調節しておいて、フルサイズを選ぶのが無難だと思います。

ちなみに、投稿や固定ページの編集画面に挿入した画像をクリックすると、ツールバーが表示されるので、そちらでもある程度の設定ができますよ。

画像ツールバー

画像を挿入する際の注意点とは?

画像を挿入する際の注意点をいくつかご紹介します。

タイトルと代替テキストについて

まず、画像の設定ですが、「タイトル」はなくても構わないと思います。普通は画像のファイル名が自動的に入りますが、特に重要とは考えられません。それよりも「代替テキスト」は、画像にリンクを設定した場合に影響があるので、こちらはできるだけ設定するようにしてください。

画像のサイズについて

画像のサイズについては考え方が2通りあります。1つは、できるだけ画像サイズを小さくして「フルサイズ」にすれば、少しでも表示が早くなるというものです。転送時間が短縮されるし、処理時間も必要ないからです。普通はこちらの考え方で良いと思います。

もう1つは、画像を倍のサイズにしておいて、「中」つまり半分のサイズにするというものです。どういうことかというと、スマートフォンで見た場合に画像が荒くなるのを防ぐためです。低い解像度だと画像がぼやけてしまうようであれば、こちらの考え方でやってみてください。

つまり、速度と画質のどちらを優先するかという違いですね。最近の通信事情であれば、データ量が増えても遅くなることはないと思うので、画質を優先しても問題ないでしょう。もし心配であれば、速度測定サイトなどを使ってチェックして、速度の変化を調べてみる方法がありますよ。

まとめ:画像は文章のスパイスです。

いかがでしたか?

WordPressの画像を挿入する方法について説明しました。画像の準備から始まって、挿入方法、保管場所、設定、挿入時の注意点と、画像に関するほとんどのことを紹介しました。どうでしょう、画像の挿入に関してご理解いただけましたでしょうか。

画像はうまく使うと、文章を読んでもらうのにとても良い『スパイス』になります。ですが、多用するとそちらにばかり目が行ってしまい、本当に伝えたいことが伝わらなくなります。うまくバランスを取って見栄えが良くわかりやすいホームページを作っていただけたら幸いです。

以上、「WordPressの画像、挿入する方法とは?」と題して説明しました。

記事はお役にたちましたか? 当サイトはページが比較的多い(⇒ 全ページの一覧)ので、いっぺんに読むのは大変です。お気に入りに登録して、数回に分けて御覧になることをお勧めしますよ。

ホームページ制作の『無料メール相談』

「ホームページを何とかしたいけど、いきなり依頼するのもなぁ。」と思われた方、ホームページ制作の『無料メール相談』を利用してみませんか? 改善のヒントが得られるだけでなく、サービスの事前体験にもなりますよ。