この記事がお勧めな方
この記事は次のような疑問を解決したい方にお勧めになっています♪
- WordPressで記事にどうやって画像を挿入するの?
- WordPressの機能で挿入した画像にどんなことができる?
- AFFINGER6では挿入した画像にどんなことができる?
- 挿入する画像のサイズはどれくらいがいいの?
AFFINGER6で記事に画像を挿入する方法
画像を挿入する方法はとても簡単です。
「ブロックを追加」から「画像」を選択します。

ファイルをアップロードできる画面が表示されるので、挿入したい画像をアップロードすればOKです。

実際にアップロードするとこんな感じに表示されます。

AFFINGER6で変更できる画像のスタイル
AFFINGER6では挿入した画像を6種類のスタイルに変更することができます。

- デフォルト
- 角丸
- シャドウ
- ワイド
- 枠線
- ポラロイド風
デフォルト
何も変更しないそのままの画像です。

角丸
画像の角を丸くするスタイルです。

シャドウ
画像に影をつけるスタイルです。

ワイド
横画面いっぱいまで画像を広げるスタイルです。

枠線
画像に枠を付けるスタイルです。
下の画像ではわかりにくいかもしれませんが、画像に枠が付いています。

ポラロイド風
画像をポラロイド風にするスタイルです。

画像の配置を変更する方法
※ WordPress既存の機能
画像をクリックして上部のメニューから「配置を変更」を選択します。

配置は
- なし
- 左寄せ
- 中央揃え
- 右寄せ
- 幅広
- 全幅
から選択できます。

実際に変更してみて表示状態を確認してみてくださいね。
画像にリンクを挿入する方法
※ WordPress既存の機能
画像をクリックして上部メニューの「リンクを挿入」を選択します。
入力欄にリンク先のURLを入力すればOKです。

画像の切り抜き機能
※ WordPress既存の機能
挿入したい画像を部分的に切り抜いたり、回転させることもできます。
画像をクリックして上部メニューの「切り抜き」を選択します。

「切り抜き」の画面が表示されるので、マウスでドラッグすることで画像を拡大し中央の赤い部分を切り出すことができます。

↓こんな感じになります。

画像にテキストを追加する方法
※ WordPress既存の機能
画像をクリックして上部メニューの「画像上にテキストを追加」を選択します。

テキストの入力欄が表示されるので、文字を入力します。
画像にはフィルターがかかり、少し黒っぽく表示されますが右メニューの不透明度を調整することでフィルターの度合いは調整できます。


テキストの位置を変更することも可能です。
また、入力した文字は太字にしたり色を変更するなど記事のテキスト編集と同様の編集が可能です。

画像にデュオトーンフィルターを適応する方法
※ WordPress既存の機能

デュオトーンフィルターって何のこと?
デュオトーンフィルターとは画像にデュオトーンを適用することができる機能です。
デュオトーンとは2色組を組み合わせて表現したデザインのことで、画像を目立たせたり雰囲気を変えたりすることができます。
画像をクリックして上部メニューの「デュオトーンフィルターを適用」を選択します。

実際に「影」の色を「黒」、ハイライトの色を「白」で適応してみると下の画像のようになります。

WordPressの機能で画像に文字を入力したり、画像に効果を与えることもできますが・・・
正直、自由に編集できるわけではないので画像を編集する際は画像編集ソフトを利用するのがお勧めです。
画像編集ソフトもいろいろありますが、オンライン上で無料で使える「Canva」というグラフィックデザインツールがとてもお勧めです。
この記事のアイキャッチ画像や挿入画像はすべて「Canva」を利用して作成しています。
初心者でも簡単に操作できるのでお勧めです。
「Canva」でアイキャッチ画像を作成する方法も別記事で紹介しているので、参考にしてみてください。
画像のAltテキスト(代替テキスト)について
画像を挿入する際はAltテキスト(代替テキスト)にその画像の説明を入力しましょう。

Altテキスト(代替テキスト)とは、その画像の説明文になります。
ただし、入力する際には次の点に注意して入力するようにしましょう。
この記事には「ウサギの画像」を沢山使用していますが、Altテキストに「ウサギの画像」とは全く入力していません。
例えば、すぐ上の画像のAltテキストは「WordPressで挿入した画像のAltテキスト(代替テキスト)を入力する欄」と入力してあります。
画像の前後の内容にそった補足となる画像の説明を簡潔に入力するわけです。
画像のサイズについて

記事に挿入する画像のサイズはどれくらいがいいの?
一般的に記事に挿入する画像はブログの横幅に合わせたサイズを利用するのがいいと言われています。
ブログの横幅は使っているテーマの種類によっても変わってきますが、横幅680~1000px程度の画像サイズを利用すれば問題ないと思います。
自分のブログの横幅以上のサイズであっても、自動で調整されるので大きい分には問題はありません。
ただ、大きいサイズ画像はその分読み込み速度が遅くなるので、できる限りサイズは小さくしておくのがお勧めです。
ちなみに、このブログでは記事に挿入する画像は横幅680pxのサイズで統一しています。
記事に挿入する画像は横幅680~1000px程度の画像サイズで大丈夫ですが
アイキャッチ画像は横幅1200px・縦幅630pxのサイズにするのがお勧めです。
理由はTwitterにシェアした際に画像が切れてしまったりなどの、不具合が発生しないサイズだからです。
以上がWordPressで画像を挿入する方法になります。
ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

AIなんて難しそう・・・
そう感じて活用しないのは勿体無いです。
気軽に使うのに無料お試しがお勧め♪

現在は多くのAIライティングツールがあります。
そのほとんどが無料お試しでの利用が可能です。
お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。
無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。
\\ 無料お試し利用がずっと可能なAIライティングツール//
AFFINGER6:記事一覧
-
-
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
2025/2/14
AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...
-
-
(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
2025/2/14 AFFINGER6
AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)A ...
-
-
『SWELL』ってどうなの?-実際に利用したメリットとデメリットをガチレビュー!
2024/11/28 SWELL
SWELLはとても人気の高いテーマです。 この記事はSWELLが気になる方向けにメリットとデメリットを紹介しています。 価格 17,600円(税込み) シンプル&高機能なWordPressテーマ! 最 ...
-
-
AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
2025/2/14 AFFINGER6
AFFINGER6を購入しようと思っている初心者の方は、解らないことが多いからこそ購入に対して不安を感じるかもしれません。 この記事は、実際に知識ゼロからAFFINGER6を使用した私が断言できる内容 ...
AFFINGER6の購入とインストール方法
-
-
【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!
2025/2/14 AFFINGER6
AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...
-
-
AFFINGER6(アフィンガー6)のインストール方法-初心者でも安心!購入プランから徹底解説!
2025/2/18 AFFINGER6
AFFINGER6の購入からインストールして使えるようにするまでの手順や注意点を詳しく解説しています。 価格 14,800円(税込み) 有名ブロガーさん多数使用のWordPressテーマ! 「稼ぐ」に ...
-
-
AFFINGER6(アフィンガー6)EX版の購入とアップグレードの方法
2025/1/8 AFFINGER6
この記事ではAFFINGER6の上位版である「AFFINGER6EX」へのアップグレード方法を解説しています。 AFFINGER6EX版にアップグレードする為の条件 AFFINGER6からEX版にアッ ...
AFFINGER6の設定関係
-
-
AFFINGER6導入後にまず何をしたらいいの?-初心者にお勧めの初期設定4項目
2024/10/17 AFFINGER6
「ブログで稼ぎたい!」 って思いブログを始めた初心者の方も多いと思います。 収益化するには何より記事を作成しなければ話になりません。 この記事ではAFFINGER6を始めたばかりの初心者の方向けに、い ...
-
-
AFFINGER6(アフィンガー6)にお勧めのプラグイン【初心者向け】
2024/12/29 AFFINGER6
AFFINGER6にお勧めのプラグインを9つ紹介しています。 初心者の方は何を導入すればいいのか解らないと思いますので、是非参考にしてみてください。 プラグインとは? 「プラグイン」とはワードプレスを ...
-
-
AFFINGER6のアップデート方法(2パターンを解説)
2024/12/30 AFFINGER6
この記事がお勧めな方 AFFINGER6のアップデート方法を知りたい方 AFFINGER6の手動でのアップデート方法が知りたい方 AFFINGER6で自動更新のお知らせを設定する方法を知りたい方 AF ...
-
-
AFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法
2024/7/18 AFFINGER6
ここではAFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法を初心者向けに解説しています。 AFFINGER6(アフィンガー6)では簡単にGoogleアナリティクスを導入して ...
-
-
AFFINGER6:Googleサーチコンソールへの登録方法
2024/12/14 AFFINGER6
Googleサーチコンソールではあなたのサイトが「どんなキーワードで表示されたのか」を確認することができたり、あなたのサイトのページが「どれくらいインデックスされているか」などを調べることができます。 ...
-
-
AFFINGER6のステマ規制対策-広告表記を表示させる方法
2024/7/18 AFFINGER6
この記事ではステマ規制対策としてAFFINGER6(アフィンガー6)で記事に「広告」表記を表示させる方法を解説しています。 ステマ規制とは2023年10月から開始された「ステルスマーケティング」に対す ...
AFFINGER6の使い方
-
-
AFFINGER6の使い方【まとめ】-初心者向けガイド-
2024/11/5 AFFINGER6
この記事はAFFINGER6(アフィンガー6)の使い方を初心者向けに詳しく解説しています。 見出しの作成方法 記事作成の基本!見出し作成や見出しについての記事です。 カテゴリーの作成とカテゴリーページ ...
AFFINGER6のデザインカスタマイズ
-
-
AFFINGER6のカスタマイズ方法-初心者向けガイド-
2024/11/21 AFFINGER6
この記事ではAFFINGER6のカスタマイズ方法を初心者向けに詳しく解説しています。 デザインカードプラグインでサイトデザインを変更する方法 プラグインでサイトデザインを簡単に変更できるようになりまし ...