WordPressの記事に画像を挿入!サイズ調整やアイキャッチを自動挿入する方法
- 公開日:2018.12.03
- 更新日:2024.05.22
- 記事のデザイン
WordPressで記事を作成するとき、文章ばかりだと見た目にも読者に圧迫感を与えしまうのはもちろん、記事も何となく味気ないですよね。
そのため、記事作成では一般的に写真やイラストなど画像を挿入していきます。
また、アイキャッチ画像を設定して、記事の訴求力を高めることができます。
その際、挿入する画像のサイズ調整ができるのはご存知ですか?
さらに、アイキャッチ画像の挿入をたまに忘れる方がいますが、自動挿入もできるのです。
そこで、ここではWordPressの画像のサイズ調整の方法や、自動でアイキャッチ画像を設定する方法をご説明いたします。
関連記事:「記事はレイアウトやデザイン性も重要!読まれる記事を作るコツ!」
目次
1.挿入する画像のデフォルトサイズを調整する方法
WordPressは、ブログやサイトを運営している方はほとんど殆どの人は使っているのではないでしょうか。
そもそも「WordPress(ワードプレス)」とは、オープンソースで提供される「ブログシステム」のソフトウェア。オープンソースとは、ソースコード(ソフトウェアの設計図またはプログラム)を無償で提供して、誰でも自由に改良・再配布できるソフトウェアのこと。つまり、「無料」で自由に使えるソフトウェアです。そのWordPressでブログや記事を作成するとき、画像は挿入しますよね。
画像の挿入は、まず使いたい画像をアップロードしておく必要があります。
左メニューの「メディア」→「新規追加」をクリックすれば、メディアのアップロード画面が表示されるので、そこに使いたい写真やイラストをドロップまたはファイル選択で画像をアップロードしていきます。
その際の注意点として、容量が2MB以上を超えるとアップロードできないので、事前に容量が2MB以下にしておきましょう。
画像のデフォルトサイズを調整する方法
そこで、画像をアップロードすると、WordPressがデフォルト(初期値)で、
- サムネイルサイズ
- 中サイズ
- 大サイズ
- フルサイズ
と、43種類のサイズに自動生成しているのはご存知ですか?
画像の挿入は、投稿画面のタイトル下の「メディアの追加」をクリックすると、アップロードした画像の一覧が表示され、その中から画像を選んで挿入します。そこで、右下に「添付ファイルの表示設定」欄のサイズを選択すると、以下のような表示が出てきます。
フルサイズというのは、アップロードした元の画像のサイズになりますが、その他の上記の3つのサイズが表示されます。
そこで、この3つの画像サイズは調整できるのはご存知ですか?
通常デフォルトでは上の画像とは少し異なりますが、以下のようになっているはずです。
(左メニュー「設定」→「メディア」を選択してクリック)
ここでサイズを調整することで、挿入するときの画像もそのサイズで挿入できるようになります。
例えば、記事全体で画像サイズを幅600高さ600に統一したければ、中or大サイズの上限値を600に調整しておけば、すべて希望のサイズで挿入できるようになるというわけです。
ただし、中サイズと大サイズに関しては、幅の上限・高さの上限となっていますよね。
これは、アップロードする画像をこのサイズを上限に自動生成することを意味しています。
仮にアップロードした画像が幅640高さ480とすれば、挿入するときの選択肢は中サイズまでとなり、大サイズは表示されません。つまり、アップロードする画像に合わせてWordPressが最適な画像サイズを選択できるようにしているのです。
以上のように、何気なく挿入している画像も事前にサイズ調整していれば、記事に合わせたサイズで統一して挿入できるようになります。
2.アイキャッチ画像を自動設定する方法
前項では記事に挿入する画像の挿入の説明でしたが、アイキャッチ画像は設定しているでしょうか?
アイキャッチ画像とは、上の画像サイズの選択肢にもありましたが、サムネイル画像のこと。
ブログやサイトのホーム画面などに表示される画像になります。
アイキャッチ画像は基本的に、記事の内容を表現するイメージ画像的な要素があるため、ユーザーが思わず目線が止まるようなインパクトがある写真やイラストを使うのが理想です。
アイキャッチ画像の設定はとても簡単。
投稿編集画面の右メニューの一番下「アイキャッチ画像を設定」をクリックして、記事内で使った画像or別の画像を選択するだけです。
アイキャッチ画像を自動設定する方法
アイキャッチ画像はいつでも設置できますが、ついつい忘れてしまうという方もいますよね。
そんな方におすすめなのが、『Auto Post Thumbnail』というWordPressのアイキャッチ自動プラグインです。Auto Post Thumbnailは、簡単にはWordPress専用のソフトのようなもの。
仕組みは単純で、記事の中で最初の挿入した画像を検出し、それをアイキャッチ画像として自動設定してくれる仕組みになっています。そのため、手動で設定しなくても、記事を公開するのと同時に設定してくれるので忘れが一切なくなります。
Auto Post Thumbnailのインストールおよび設定方法
Auto Post ThumbnailはWordPressでインストールする必要があり、
- 管理画面
- プラグイン
- 新規追加
- プラグインの検索欄で「Auto Post Thumbnail」を入力すればヒットするのでインストールを実行して有効化
という流れで簡単にインストールできます。
インストールから有効化が完了したら、あとは設定を行えば完了です。
- 「管理画面」→「設定」→「Auto Post Thumbnail」の順で選択
- 英文の画面が表示されたら、太字の「Generate Thumbnails」をクリック
- 設定が100%になれば完了
これで公開に合わせてアイキャッチ画像を自動設定してくれますが、記事ごとで使いたい画像になっていない場合は、手動でも変更できるので最終の調整は忘れずに行いましょう。
3.まとめ
記事作成では、誰もが読みやすい文章を考えるのは大切ですが、画像の挿入もそれと同じくらい重要なポイントになります。
その際、記事内に挿入する画像サイズを理想のサイズに調整すれば、全ての記事で統一できます。
さらに、つい忘れがちなアイキャッチ画像の設定もAuto Post Thumbnailを利用すれば忘れは一切なくなります。
記事内に挿入する画像やサムネイルで使われるアイキャッチ画像によって、記事全体のイメージがガラッと変わるので、記事の内容に即したインパクトのある画像の利用が理想ですよね。
関連記事
-
2021.10.22
記事に最適な「画像」の選び方!おすすめフリー・有料画像サイト8選
文章を考えるだけでなく「画像」や投稿ページに表示させる「アイキャッチ画像」の選定するのも、記事作成における重要なプロセスですよね。 でも中には、 「どんな画像を選べばいいの?」 「画像はどこで探せばいいの?」 など困っている方もいらっしゃるのではないでしょうか? この記事では記事に入れる画像選定のお悩み解決に役立つ情報をお届けします。 九段さん 僕もブログを書いているけど、画像がうまく選べなくて困 …
- 記事のデザイン
-
2021.08.17
記事LPのデザイン参考例を紹介!意識すべき6つのポイントとは
記事LPは従来のLPとは異なり、PR色の少ない記事コンテンツです。 そのため、LPと同じイメージでデザインを制作するのは良くありません。 九段さん LPのデザインって、スーパーのカラフルなチラシのようにいかにも商品の宣伝をしている感じがありますよね。 記事Proスタッフ 記事LPは「記事」という言葉がついているように、ある程度文字情報が記載されたデザインであるべきです。一般的なWeb記事よりは文字 …
- 記事のデザイン