AFFINGER6:記事に画像を挿入する方法-初心者向け

【初心者向け】記事に画像を挿入する方法【アフィンガー6】

この記事がお勧めな方

この記事は次のような疑問を解決したい方にお勧めになっています♪

  • WordPressで記事にどうやって画像を挿入するの?
  • WordPressの機能で挿入した画像にどんなことができる?
  • AFFINGER6では挿入した画像にどんなことができる?
  • 挿入する画像のサイズはどれくらいがいいの?

AFFINGER6で記事に画像を挿入する方法

画像を挿入する方法はとても簡単です。

「ブロックを追加」から「画像」を選択します。

WordPressの記事入力画面で「ブロック追加」→「画像」を選択する画面

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

WordPressの記事に画像をアップロードする画面

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

WordPressの記事に画像をアップロードしたときの実際の画像

AFFINGER6で変更できる画像のスタイル

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

アフィンガー6で画像挿入時のスタイル選択画面
  • デフォルト
  • 角丸
  • シャドウ
  • ワイド
  • 枠線
  • ポラロイド風

デフォルト

何も変更しないそのままの画像です。

アフィンガー6の画像スタイル「デフォルト」

角丸

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

アフィンガー6の画像スタイル「角丸」

シャドウ

画像に影をつけるスタイルです。

アフィンガー6の画像スタイル「シャドウ」

ワイド

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

アフィンガー6の画像スタイル「ワイド」

枠線

画像に枠を付けるスタイルです。

下の画像ではわかりにくいかもしれませんが、画像に枠が付いています。

アフィンガー6の画像スタイル「枠線」

ポラロイド風

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

アフィンガー6の画像スタイル「ポラロイド風」

画像の配置を変更する方法

※ WordPress既存の機能

画像をクリックして上部のメニューから「配置を変更」を選択します。

WordPressで挿入した画像の配置を変更する画面

配置は

  • なし
  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

から選択できます。

パパくま
パパくま

実際に変更してみて表示状態を確認してみてくださいね。

画像にリンクを挿入する方法

※ WordPress既存の機能

画像をクリックして上部メニューの「リンクを挿入」を選択します。

入力欄にリンク先のURLを入力すればOKです。

WordPressで挿入した画像にリンクを挿入する画面

画像の切り抜き機能

※ WordPress既存の機能

挿入したい画像を部分的に切り抜いたり、回転させることもできます。

画像をクリックして上部メニューの「切り抜き」を選択します。

WordPressで挿入した画像の切り抜き機能を選択する画面

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

WordPressで挿入した画像の切り抜き機能の操作画面

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

WordPressで挿入した画像の切り抜き機能を利用して実際に切り抜いた画像

画像にテキストを追加する方法

※ WordPress既存の機能

画像をクリックして上部メニューの「画像上にテキストを追加」を選択します。

WordPressで挿入した画像にテキストを追加する機能を選択する画面

テキストの入力欄が表示されるので、文字を入力します。

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

WordPressで挿入した画像にテキストを入力する画面
WordPressで挿入した画像にテキスト入力時に画像の不透明度を調整する画面

テキストの位置を変更することも可能です。

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

WordPressで挿入した画像にテキストを追加した際に、そのテキストの配置を変更する画面

画像にデュオトーンフィルターを適応する方法

※ WordPress既存の機能

ハムタ
ハムタ

デュオトーンフィルターって何のこと?

デュオトーンフィルターとは画像にデュオトーンを適用することができる機能です。

デュオトーンとは2色組を組み合わせて表現したデザインのことで、画像を目立たせたり雰囲気を変えたりすることができます。

画像をクリックして上部メニューの「デュオトーンフィルターを適用」を選択します。

WordPressで挿入した画像にデュオトーンフィルターを適用する画面

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

WordPressで挿入した画像にデュオトーンフィルターを適用した実際の画像

WordPressの機能で画像に文字を入力したり、画像に効果を与えることもできますが・・・

正直、自由に編集できるわけではないので画像を編集する際は画像編集ソフトを利用するのがお勧めです。

画像編集ソフトもいろいろありますが、オンライン上で無料で使える「Canva」というグラフィックデザインツールがとてもお勧めです。

この記事のアイキャッチ画像や挿入画像はすべて「Canva」を利用して作成しています。

初心者でも簡単に操作できるのでお勧めです。

「Canva」でアイキャッチ画像を作成する方法も別記事で紹介しているので、参考にしてみてください。

【Canva】アイキャッチ画像の作成方法
「Canva」でアイキャッチ画像を作成する方法【初心者向け】

2024/7/13    ,

この記事がお勧めな方 この記事は次のような疑問を解決したい方にお勧めになっています♪ アイキャッチ画像を作成したいけど、どうしたらいいの? アイキャッチ画像のサイズはどれくらいがいいの? 「Canva ...

画像のAltテキスト(代替テキスト)について

画像を挿入する際はAltテキスト(代替テキスト)にその画像の説明を入力しましょう。

WordPressで挿入した画像のAltテキスト(代替テキスト)を入力する欄

Altテキスト(代替テキスト)とは、その画像の説明文になります。

ただし、入力する際には次の点に注意して入力するようにしましょう。

注意点

  • 記事の内容に関係のないデザイン的な画像のAltテキストは「空欄」にする
  • 記事の内容にそったAltテキストを簡潔に入力する

この記事には「ウサギの画像」を沢山使用していますが、Altテキストに「ウサギの画像」とは全く入力していません。

例えば、すぐ上の画像のAltテキストは「WordPressで挿入した画像のAltテキスト(代替テキスト)を入力する欄」と入力してあります。

画像の前後の内容にそった補足となる画像の説明を簡潔に入力するわけです。

画像のサイズについて

ハムタ
ハムタ

記事に挿入する画像のサイズはどれくらいがいいの?

一般的に記事に挿入する画像はブログの横幅に合わせたサイズを利用するのがいいと言われています。

ブログの横幅は使っているテーマの種類によっても変わってきますが、横幅680~1000px程度の画像サイズを利用すれば問題ないと思います。

自分のブログの横幅以上のサイズであっても、自動で調整されるので大きい分には問題はありません。

ただ、大きいサイズ画像はその分読み込み速度が遅くなるので、できる限りサイズは小さくしておくのがお勧めです。

ちなみに、このブログでは記事に挿入する画像は横幅680pxのサイズで統一しています。

記事に挿入する画像は横幅680~1000px程度の画像サイズで大丈夫ですが

アイキャッチ画像は横幅1200px・縦幅630pxのサイズにするのがお勧めです。

理由はTwitterにシェアした際に画像が切れてしまったりなどの、不具合が発生しないサイズだからです。

以上がWordPressで画像を挿入する方法になります。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

ハムタ
ハムタ
パパくま
パパくま

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

無料お試しがずっと可能なAI記事作成ツール
無料お試しがずっと可能なAIライティングツール

2024/7/26    ,

「記事作成にAIを活用してみたいなぁ」 「でも料金はかけたくないなぁ」 そんな方に無料お試しがずっと可能なAIライティングツールをいくつか紹介します。 もちろん無料お試しなので、機能をフルに使用するこ ...

AFFINGER6の購入とインストール方法

AFFINGER6の設定関係

AFFINGER6の使い方

AFFINGER6のデザインカスタマイズ