[WordPress] 画像の挿入・リンク設定・サイズ調整・表示機能

大きくは以下の２種類があります。

注：細かい手順にすると、数ステップあります。

挿入方法による違い

図で示した１ステップ２ステップのどちらで画像を挿入しても、ブログでの表示は同じになります。

１つだけ異なる点があります。（画像管理の方法 ~ WordPressのいけずなラベルに負けないをすでに読んでいただいた方は、スキップしてくださいね。）

どちらの画面から作業しても、アップロードした画像は、すべて[メディアライブラリ]画面にリストされます。

その際、[メディアライブラリ]画面での[アップロード先]の表示に、以下のような違いがでます。

１行目の画像は、[投稿]画面から画像をアップロードしました（１ステップ）。この方法だと、アップロード先に記事のタイトルが表示されます。

２行目の画像は、[メディアライブラリ]画面で画像をアップロードしてから、[投稿]画面で画像を選択、という２ステップの方法で記事に挿入しました。そうすると[アップロード先]の情報が(未使用)となります。使っているんですけどね。

「未使用」とあるからと言って、むやみに消してしまうということをしなければ害はありません。

「未使用」の画像が「使用中」であることもある、と覚えておけば、そのままでも大丈夫です。

気になる方はもう少し詳しくまとめておりますので以下の記事をお読みくださいませ。

画像の挿入手順

[投稿]画面からでも[メディアライブラリ]画面からでも、画像をアップロードする方法は、更に数種類あります。順番に説明します。

投稿画面から画像を挿入

まずは、投稿画面を開いてください。

下書き中の投稿は[投稿一覧]から選択、新規の投稿画面は[新規追加]をクリックです。

クリック操作で挿入

１．投稿画面でブロックの中をクリック。

左にカーソルが出て、右にプラスサインが出ます。

プラスサインをクリック。

２．[よく使うもの]か、スクロールして[一般ブロック]から[画像]アイコンをクリック。

３．[アップロード]をクリック。

４．保存してある場所から、挿入したい画像を選択して完了です。

すると、サイドに[画像設定]が表示されていますね。このAltテキスト(代替テキスト)は、入力する方が良いそうです。

入力ボックスの下に説明があるように、画像が見られない方々に画像情報を伝えることができるそうです。また、画像が表示されないときに変わりにこのテキストが表示されます。

SEO対策にもなるそうです。（ただ、長すぎると、スパム扱いされてしまったりするそうです。簡潔に入力しましょう。）

下にスクロールすると、画像のサイズを調整できるオプションやリンク設定があります。オプションの種類については後述しています。

ドラッグアンドドロップで挿入

１．挿入したい画像を保存してあるフォルダを開いて、WordPressの投稿画面と並べます。

２．画像をドラッグ＆ドロップして完了。（複数選択も可能。）

コピペで挿入

１．ペイント画面やパワーポイント画面などから、挿入したい画像をコピー（Ctrl+C）します。

２．[投稿]画面で、画像を挿入したいブロックをクリック。貼り付け（Ctrl+V）て完了。

メディアライブラリ画面から挿入

１．[メディア]メニューの[新規追加]をクリック。

２ーA．クリック操作：[ファイルを選択]をクリックして画像を選択。

２－B．ドラッグ＆ドロップ：保存場所のフォルダから点線内にドラッグ＆ドロップ。

　　どちらの場合も複数選択可能です。上限は30MBです。アップロードはこれで完了。

３．記事内に挿入するステップ　投稿画面でブロックの中をクリック。

左にカーソルが出て、右にプラスサインが出ます。

プラスサインをクリック。

４．[よく使うもの]か、スクロールして[一般ブロック]から[画像]アイコンをクリック。

５．[メディアライブラリ]をクリック。

６．挿入したい画像にチェックを入れて、緑枠の情報は任意で入力。[選択]をクリックで完了。

画像の設定

挿入した画像を投稿画面でクリックしてみてください。

右サイドに様々な情報がでます。

[Altテキスト（代替テキスト）]は大切。これから設定するようにしたいと思います。

画像サイズ調整オプション

[画像サイズ]のドロップダウンメニューと[画像の寸法]の%表示のボタンでサイズを調整できます。

画像の自動生成については、記事を書く前に知っておきたかったこと３つの目次の2番をご参照ください。

リンク設定

挿入した画像をクリックすると、上にメニューが出ます。

リンクのアイコンをクリック。

すると３つオプションが出ます。

どれも設定をしない場合、読者が画像をクリックしても何も起こりません。そのままでも大丈夫です。

URL設定

一番上のURLボックスにURLをコピペすると、画像をクリックしたときに、そのURLに移動します。URLをコピペしたら、右の矢印をクリックです。

これを設定すると、読者がその画像をクリックしたときに、指定したURLに飛びます。

[メディアファイル]を設定してある画像を読者がクリックしたときの見え方：

実際に以下の画像に設定してあります。

黒い背景で画像のみ表示されます。

[添付ファイルのページ]を設定してある画像を読者がクリックしたときの見え方：

読者目線で考えるとやや不便に感じました。上の[メディアファイル]だと、閉じたいときに×をクリックすればいいだけなので簡単。でもこのオプションだと、[戻る]ボタンを使うことになります。

実際に以下の画像に設定してあります。（ブラウザの戻るボタンで戻れます。）

手動サイズ調整とキャプション

手動のサイズ調整

挿入した画像をクリックすると、青い丸が３か所に表示されます。
ドラッグしてサイズ調整できます。

キャプション

画像をクリックすると、画像下に[キャプションを入力・・・]と出ます。（上の画像に、[キャプションを入力…]というキャプションを入れています。

画像の説明を入力できます。

メディアライブラリ画面から設定

１．[メディアライブラリ]画面でリストされている画像ファイルにマウスを近づけると、ファイル名の下に[編集]というオプションがでるのでクリック。

２．以下のような画面になります。

[タイトル]：画像ファイル名とは別に付けられる、画像のタイトルです。SEOにも良いというサイトもあったので、「完全画像最適化」を目指す場合は利用してみると良いかもしれません。でも「関係ない」という情報のがチョット優勢でした。本当の所は私には分かりません。

また、この[タイトル]の情報は、メディアライブラリ内で自分が画像検索するときに参照される情報です。つまり、ここにキーワードや記事タイトルを入力しておくと、後でその文言で画像検索ができます。

[画像を編集]ボタンは、私は、自分のパソコンで編集するほうが簡単だなという感想。

[代替テキスト][キャプション]は、[投稿]画面で入力するほうが便利だと思います。文脈を見ながら設定できますね。

[説明]は自分用のメモです。これも、[タイトル]と同じく、「あの画像はどこだっけ・・・」となって、メディアライブラリ内を検索するときに参照される情報です。例えば[説明]に「画像の挿入」などのキーワードや記事タイトルを入れておけば、後でその文言で自分が検索できます。

位置（左・中央・右揃えなど）

挿入した画像をクリック選択すると、左上に位置を調整する選択肢がでます。お好みで使いましょう。

[左寄せ][中央揃え][右寄せ]が、メインカラム内での画像の位置です。

[幅広][全幅]は、位置＆サイズという感じですね。この機能を２つのサイズで試したのですが、画像サイズによっては違いが出ないのと、どんな時にこれらを使うと効果的なのかも分からないため、私は使っていません。ちょっと試して、使いたい機能かどうか見てみてくださいね。

画像表示オプション

• 複数画像を並べる
• 文章を横にそえる
• カバー機能

最初の共通ステップ

１．投稿画面でブロックの中をクリック。

左にカーソルが出て、右にプラスサインが出ます。

プラスサインをクリック。

２．[よく使うもの]か、スクロールして[一般ブロック]から[画像]アイコンをクリック。

３．一番左端の、[ブロックタイプまたはスタイルを変更]というアイコンをクリック。

複数画像をギャラリーで

最初の共通ステップの後に

４．[ギャラリー]をクリック。

５．画像をドラッグするか、[アップロード]ボタンから新規でアップロードするか、[メディアライブラリ]ボタンでアップロード済みの画像を複数枚選択。

６．[リンク先]を[メディアファイル]に設定します。１枚に設定すると、全部に反映されます。

できあがり例です。クリックすると、１枚１枚順番に拡大してみることができます。（拡大せずに、ただ並べておきたい場合は、上のステップ６を無視してください。）

• 

• 

• 

• 

• 

• 

順番や枚数を変更したいとき：

できあがったギャラリーの画像をクリックすると左上に鉛筆マークのアイコンが表示されます。

鉛筆アイコンをクリックすると編集画面になり、枚数を増やしたり減らしたり、キャプションをつけたり、並び順を変えたりできます。（[メディアライブラリ]から画像を選ぶ場合は、最初にこの画面になります。）

カラム数を変更したいとき：

できあがったギャラリーの画像をクリックすると、右サイドに[ギャラリーの設定]が表示されます。[カラム]の数字を変えれば、何列で並べるかを設定できます。

画像の横に文章を書く

最初の共通ステップの後に

４．[メディアと文章]をクリック。

５．[コンテンツ]という部分に文章を入力できます。

上にアイコンが４つありますね。左から、[幅広][全幅][メディアを左に表示][メディアを右に表示]です。お好みで選択しましょう。

使用例

カバー機能

使用例です。

投稿画面で画像に入れる文字を編集できるんですね。でもうす暗くなってしまうんですね。

最初の共通ステップの後に

４．以下で[カバー]をクリック。

５．お好みの方法で画像をアップロード。以下のようになります。カーソルが出るので文字を入力します。

アイキャッチ画像の挿入

１．[投稿]画面の右サイドにある[文書]タブをクリック。（サイドに何もない！と思ったら、[公開する]ボタンの横にあるお花のアイコンをクリックしてください。）

２．少しスクロールすると、[アイキャッチ画像を設定]というボタンがあります。クリック。

３．画像ファイルを新規でアップロードする場合は[ファイルを選択]をクリック。ドラッグ＆ドロップも可能です。

画像がアップロード済みだったら、[メディアライブラリ]タブをクリックして画像を選択します。

４．いずれの方法でも、画像を選んで、[代替テキスト]などの情報をお好みで入力します。[選択]をクリックで完了です。

おわりに

画像の挿入は、最初から簡単にできてしまった分、逆に何も学んでいなかったことが分かりました。

画像挿入方法は、2000文字くらいで書けるかなと思ったのですが、全然無理でした★。

でも１番勉強になった記事でもありました。