投稿記事や固定ページなどに画像を挿入する事自体は、ワードプレスならば数クリックで簡単にできます。
しかし、普通に挿入をしてしまうと
・記事やサイトの表示が重くなったり
・サーバーのデータ容量が多くなったり
・SEO的に効果がなくなったり
・表示をされない
・横並びやテキストと並列に挿入できない。
・勝手にリンクが挿入される・挿入できない。
ということもあります。
そこでここでは、Wordpressの画像の挿入の仕方から設定方法などを網羅的に解説していきます。
下記に目次を用意しているので必要なものだけを閲覧してください。
まだWordpress初心者だ！という方は全部見ておくことをオススメします。
・画像を圧縮する
・画像をリサイズする
・サムネイルサイズを指定
・編集をする
・SEOの設定をする
・挿入の仕方
1.アップロードする前に必要な３つの設定
WordPressをインストールしテンプレートを入れたから、さっそくロゴとかアップしてデザインを作っていこう！記事をさっそく書いて画像をアップしてという前にまずは以下の設定は必ずしておいてください。
これをしておかないとサイトが重くなったり画像が綺麗に表示されなくなってしまったり後々またやり直さなくてはならなくなってしまう事態になってしまうので必ず設定していきましょう。
1-1.画像を圧縮するプラグインを挿入
SEO効果を高めるためにワードプレスの高速化はある程度必要になってくることは、[厳選]あなたのサイトに最も適したSEO対策プラグイン９選でも解説していますが、その中でも画像のファイルサイズを軽量化する必要があります。
画像はテキストよりも圧倒的にファイル容量が大きいので表示速度やクローラー巡回速度にかかわってくるので圧縮するプラグインを導入することをオススメします。以下の２つのどちらかを導入しておくといいでしょう。
1-2.画像をリサイズの設定をする
画像のファイルサイズを軽量化する方法は先ほどの圧縮をする方法のほかに画像のサイズを小さくする方法の２つがありますが、もしあなたが画像サイズを自分で編集するのならいいのですが画像サイトの大きな画像をアップロードするのならば自動的にリサイズをする設定をしておくことをオススメします。
画像のリサイズは先ほど紹介したCompress JPEG&PNG imagesのプラグインで設定することができます。
1-3,メディア設定
また、同時に管理画面のメディアで画像サイズの設定もしておいてください。デフォルトの設定でもいいのですが、あれは画像をアップロードする際に各種サイズの画像を自動的にアップロードする設定なのでよく使う画像サイズでわけておくといいです。
リサイズ系のプラグインを使わない場合でも使う場合でもこの設定はしておいたほうがいいでしょう。詳しくは下記の記事で解説しているのでそちらをご覧になってください。
以上を踏まえた上で画像のアップロードの方法について解説をしていきます。
2.画像のアップロード・設定・挿入方法
それでは、基本中の基本である画像のアップロードから挿入までの流れを図解でわかりやすく解説していきますが、画像をアップロードする方法は主に２種類あってメディアからアップロードする方法と投稿画面からアップロードする方法の２つがあります。
とは言ってもやり方自体は一緒なので今回は投稿画面からアップロードする方法を例にして解説していきます。
2-1.画像のアップロード
ということで管理画面の左メニューから投稿をクリックし新規投稿をクリックして新規投稿を追加画面に移動しましょう。
① 左側の管理メニューから投稿[btn4]をクリック
② 投稿の下にある[btn4]新規追加[btn4]をクリック
③ 新規投稿を追加の画面を表示する
これは普段から記事を投稿する際にやっているはずですが、ここから画像をアップロードしていきます。それでは先ほどの新規投稿を追加画面の[btn4]メディアを追加をクリックしていきましょう。
・投稿画面のメディアを追加ボタンをクリックしてください。
※メディアを追加ボタンがクリックできない場合がありますが、その際には大体の場合プラグインのアップデートをしていない場合が多いのでプラグインを更新して最新版にしてからもう一度やってみてください。
クリックをすると下記のようにメディアを追加画面が表示されますので、そのままデスクトップ上の画像ファイルをドラッグ＆ドロップでアップロードすることができます。
① メディアを追加画面が表示される
② 画像ファイルが保存されている場所から画像をドラッグする
③ メディアを追加画面にそのままドロップする
たったこれだけで画像をアップロードすることができますが、ここから画像の設定をしていきます。SEOを考えた場合はそのまま画像を投稿に挿入するのではなく「一体何の画像なのか？」の設定をしておいがほうがいいです。
2-2.画像の詳細設定
ということで下記のように設定したい画像をクリックすると添付ファイルの詳細を設定ができるようになります。
① 設定したい画像をクリックする
② 添付ファイルの詳細エリアを表示する
では、それぞれの項目について特に設定をしておきたいのがタイトルと代替えテキストです。
タイトルは、記事でいうところのタイトルタグ。
代替えテキストは、ALTタグ（記事でいうところのメタキーワード）
になるので、もっとも典型的な入力方法としては・・
・アイキャッチの場合｜タイトル＝記事タイトル 代替えテキスト＝メタキーワード
・見出しの下の場合｜タイトル＝見出しをそのまま 代替えテキスト＝見出しキーワード
・その他の画像の場合｜タイトル＝何を説明する画像か？ 代替えテキスト＝タイトルをキーワードに
というのが基本になります。
です。これはタイトルタグに近いようなものなので必ず設定しておきましょう。
この画像はいったい何の画像なのか？を検索エンジン側に説明する画像になるのでSEO を考慮にいれているのならば必ず設定をしておきましょう。
あとの２つの設定は特に必要性がないのならば設定の必要はありませんが、一応説明しておくと・・
・キャプションに入力したテキストは自動的に画像の下に表示されます。
・説明は何の設定でもなく表示もされなくメモ程度に使える設定です。
必要に応じて設定をすることをオススメします。
この５つの項目の設定が終わったら次は実際に投稿に挿入をしていきましょう。
2-3.画像の挿入
それでは最後に画像を投稿画面に挿入するための設定の方法を解説していきます。先ほどの添付ファイルの詳細画面の下部の添付ファイルの表示設定をして投稿に挿入ボタンをクリックすれば画像を挿入することができます。
上の画像のように挿入をするのが基本的な画像の挿入方法になります。
① 配置の項目を選択する（上の例：なし）
② リンク先を選択する（上の例：なし）
③ サイズを選択する（上の例：フルサイズ）
④ 設定をしたら投稿に挿入ボタンをクリックする
すると下記のようにビジュアルエディターに設定した画像が挿入されます。
もうちょっと具体的に各種設定項目を解説していきましょう。
2-3-1.配置
配置は上の画像のように投稿画面のどこら辺に配置をするのかを設定することができます。画像にテキストを回り込んで表示をさせたい場合は「右・左」を設定してください。画像を中央添えにしたい場合は「中央」を選択しましょう。
2-3-2.リンク先
リンク先では画像をクリックしたらどのサイトにリンクをするのかの設定をすることができます。基本的には「なし」でいいですが、使う場合はボタンの画像を挿入する際に「カスタムリンク」を設定するのが最も使うかなと思います。
添付ファイルのページ：最初に画像を挿入した投稿ページのURL
メディアファイル：画像のURL（クリックすると画像だけが表示される）
カスタムリンク：リンク先を自分で指定することができる
ので、用途に合わせて設定をしていきましょう。
2-3-3.サイズ
サイズは言うまでもなく画像のサイズです。これはメディア設定した画像サイズを選択することができるのでお好きな大きさの画像を選択していきましょう。選べる画像は
・サムネイル
・中
・大サイズ
・フルサイズ
の４つを選択することができます。
画像の用途によって設定をして完了したら投稿に挿入ボタンをクリックして画像を挿入していきましょう。
3.Wordpress上で画像を編集する
WordPressのメディアでは画像の編集もすることができますが、編集できる！といってもできることは、トリミング・回転・反転しかできませんがトリミングは特に非常に便利なので覚えておいたほうがいいでしょう。
※プラグインを使えばワードプレスの管理画面上で画像を加工することが可能です。
・Watermark RELOADED（画像にテキストを挿入できるプラグイン）
・Jquery colorbox（テキスト・影・枠などを挿入できる高機能プラグイン）
ここではデフォルトでついている主な画像編集機能について解説していきます。
画像編集は添付ファイルの詳細の「画像を編集」をクリックすると表示されます。
① メディアを追加の画面を表示する
② 添付ファイルの詳細の画像を編集のリンクをクリックする
すると下記の画面が表示され編集を行うことができます。
まずは、右上の５つの項目について解説していきます。
① 画像を反時計回りに９０度回転する
② 画像を時計回りに90度回転する
③ 画像を縦に反転させる。
④ 画像を横に反転させる。
⑤ 戻るボタン
になります。この機能は基本的には使わないと思いますが縦長の画像を横長にしたいときなど、画像を回転させたいときなどに利用してください。
そして、次に画像縮尺の変更です。
これは画像を綺麗にサイズ変更できる機能で縦か横のサイズを大きくしたり小さくしたりサイズを変えると比率をそのままに縮小・拡大してくれます。
800×313の画像の横幅を780に変更すると縦を自動的に305にしてくれます。
綺麗に縮小・拡大をすることができるわけです。
そしてトリミングですが画像をカットすることができます。
これは説明が難しいので下記の動く画像を見てください。
範囲を指定して一番左上のボタンをクリックするだけです。
これは正方形の画像を長方形に変えたいときなどに使えるので非常に便利です。
これら編集ができたら、変更を適用する画像を選択して戻るボタンをクリックすれば編集をすることができます。
イメージで訴えかけよう。
さて、ここでは画像のアップロードから設定・投稿の仕方・編集までを図解で解説をしてきました。
画像は記事などをよりイメージで訴えかけるために必ず使ったほうがいいのでこのやり方でやれば適切に効率よく画像をアップロードから設定まですることができますのでまずはこのまま挿入してみてください。
もし、画像をもっと思い通りに挿入したいのならば「WP Canvas」のプラグインを導入しましょう。
このプラグインを挿入するば画像を横に２枚・３枚と並べることができたりするので思い通りに画像を挿入をしたいのならば是非導入を検討してみてください。