WordPressで記事を書いていると、画像を挿入したあとに「もう少し見やすくしたい」「文字を入れたい」などと感じることがあると思います。
実は、記事に挿入した画像は簡単に編集や装飾ができ、テキスト追加・配置変更・外枠設定などの操作もすべて画面上で完結します。
ここでは、WordPress標準の編集機能を使って、画像の見た目を整える基本的な操作手順について詳しく解説します。
※当ブログ内で使用している専門用語の意味については、「AI副業でよく使われる用語集（初心者向け）」のページをご参照ください。
記事に挿入する画像の準備
WordPressに画像を挿入する前に、ブラウザの読み込み速度（表示速度）を落とさないための準備をしておくことが重要です。
特に元画像が3600px✕2400pxのように大きい場合、そのまま挿入するとページが重くなり、読者が閲覧する際の表示速度に大きく影響します。
記事で使う画像は、まず「iLoveIMG（アイラブIMG）」を使って必要なサイズにリサイズし、その後に圧縮するのが最適な手順です。
たとえば記事内で使用する画像を900×600（当ブログ内での推奨値）で表示したい場合は、事前にiloveimgで900×600へリサイズしてから圧縮しておくと、容量を大きく削減できます。
＊当ブログ内での画像サイズ推奨値を900×600としているのは、WordPress（Cocoon）の本文エリアの横幅（約750〜800px）に対して900pxで用意しておくと、自動縮小されても劣化が起こりにくく、最も綺麗に見えるというのがその理由です。
実際のリサイズ・圧縮手順に入る前に、まずLeonardo.Aiで生成される画像サイズを確認しておきます。
まず「Leonardo.Ai」を使って画像生成を行いますが、この場合は以下のように生成する画像サイズを横長の一番小さいサイズに設定しても、1480×830px（Model等の設定値によって異なります）にて画像が生成されます。
下の画像が実際にLeonardo.Aiを使って生成した画像です。
左下の赤枠内に画像サイズ1480×824が表示されています。
次に以下のリンクから「iLoveIMG」を開きます。
このサイトは、アカウント登録なしで使用できますので、とても安心で便利なサイトです。
ページが開いたら、「画像のサイズ変更」をクリックします。
以下のページが開いたら、画面上に生成済みの画像をドラッグ＆ドロップします。
次の画面で、右サイドの「横縦比を維持」にチェックが入っていることを確認し、「幅(px)」に900と入力すると、高さの方は自動的に変更されますので、最後に「画像のサイズ変更」ボタンをクリックします。
次の画面で、「画像の圧縮」をクリックします。
次に「画像の圧縮」ボタンをクリックします。
すると、以下のように85％も圧縮されたようですので、「圧縮された画像をダウンロード」ボタンをクリックします。
以下がサイズ変更、及び圧縮後の画像です。
変更前後の数値は、以下の通りです。
画像サイズ：1480×824 → 900×501（px）
データサイズ：509.5 → 30.6（KB）
なお、画像を記事へ挿入した後でも画像のサイズ変更はできますが、それは見た目だけの縮小であり、画像ファイルそのものの容量は減らないため、挿入前のリサイズと圧縮が必須となります。
記事に画像を挿入する
WordPressの記事に画像を挿入する方法はとても簡単です。
編集画面で画像を入れたい位置にカーソルを置き、表示された「＋」ボタンをクリックします。
すると「＋」ボタンの下に小窓が開きメニューが表示されますので、その中から「画像」をクリックすると、パソコン内の画像をアップロードしたり、すでに登録してあるメディアライブラリから選択して画像を挿入することが出来ます。
挿入した画像は、その場でいろいろな編集や装飾などを行うことも可能です。
以下は、実際に記事中へ画像を挿入した時のものです。
詳しい画像の挿入手順については、『WordPressの記事作成手順を徹底解説』の6.「画像を挿入する」をご覧ください。
代替テキストの設定
画像を挿入したら、まず設定しておきたいのが「代替テキスト（altテキスト）」です。
代替テキストとは、画像が表示されないときにその内容を説明するためのテキストで、検索エンジンやスクリーンリーダー（視覚が不自由な方が使用する読み上げソフト）にも読み取られます。
代替テキストを設定する際は、まず挿入した画像をクリックし、右側の「ブロック設定」欄にある「代替テキスト」の入力欄にテキストを入力します。
ここには、画像の内容を一文で自然に説明する文章を入力します。
たとえば「WordPressのログデザインの前で微笑む女性」などが適切です。
SEOのためにキーワードを無理に詰め込むよりも、読者が画像を思い浮かべやすい文章にすることがポイントです。
外枠を追加する
記事に挿入した画像は、WordPressの標準機能を使って簡単に外枠を付けることができます。
外枠を付けておくと画像の境界がはっきりするため、背景が白い画像でも記事全体の見た目が整いやすくなり、読者が画像を見たときの識別性が高まります。
以下の画像は、記事へ挿入したままの状態ですので、画像の境界がはっきりしていません。
画像に外枠を追加するには、まず外枠を付けたい画像をクリックして選択し、右側のブロック設定パネルに表示されている「高度な設定」をクリックします。
「追加CSSクラス」の入力欄が表示されたら、ここに img-border と入力し、「保存」ボタンをクリックします。
あなたがブログ立ち上げ当初に設定したCocoon設定のスキンの種類によっては、これだけの操作で画像に外枠が表示されます。
もし上の操作で画像の外枠が表示されない場合は、以下の設定を追加で行います。
まず、管理画面の「外観 → カスタマイズ」をクリックします。
次の画面で「追加CSS」をクリックします。
追加CSSの枠内に、以下の記述をそのままコピーして貼り付け、最後に「公開」ボタンをクリックします。
.img-border img { border: 2px solid #cccccc; border-radius: 4px; display: block; margin-left: auto; margin-right: auto; }
このCSSは、画像に薄いグレーの枠線を付け、角を少し丸くし、画像を中央に配置する設定になっています。
追加CSSの設定が正しく行われていれば、記事内で img-border を指定したすべての画像に外枠が表示されるようになります。
特に背景が白い画像や、説明用のキャプチャ画像などでは外枠があると見た目が大きく改善されるため、記事全体の読みやすさを高める目的でも外枠設定は非常に有効です。
画像の配置を変える
WordPressでは、記事に挿入した画像の配置を「左寄せ」「中央揃え」「右寄せ」に簡単に変更することができます。
まず配置を変えたい画像をクリックすると、画像のすぐ上に小さなツールバーが表示されますので、「配置」アイコンをクリックします。
すると、以下のようなプルダウンメニューが表示されますので、「左寄せ」「中央揃え」「右寄せ」をクリックして配置を変更し、最後に「保存」ボタンをクリックします。
中央揃えを選ぶと、画像が本文の中央に大きく表示されるため、あなたが特に見てほしい画像を強調したいときに最も使いやすい配置になります。
左寄せや右寄せを選ぶと、画像の横に文章が回り込むように表示されるため、画像を見ながら補足説明を読み進めてもらいたいときに便利です。
ちなみに以下は、右寄せに設定したときのものです。
ただし、使用しているCocoonスキンや閲覧している端末の画面幅によっては、左右寄せにしたときに文章の折り返しが詰まって見えたり、スマホ画面でレイアウトが少し窮屈に感じられたりする場合があります。
もし左右寄せにしたときに、レイアウトが崩れたり読みにくく感じる場合は、無理に左右寄せを使わず、画像は中央揃えまたは「なし」にして、その下に説明文を置く形にそろえた方が、全体として読みやすい記事になります。
画像の配置を少し調整するだけでも、記事全体の印象や読みやすさは大きく変わりますので、実際の表示を確認しながら、あなたのブログにとって一番見やすい配置を選んでください。
画像のサイズを変更する
記事に挿入した画像は、WordPressの編集画面から簡単に表示サイズを変更することができます。
まずサイズを変更したい画像をクリックして選択すると、画面右側にブロック設定パネルが表示されます。
ブロック設定パネルの「アスペクト比」「幅」「高さ」「解像度」の設定を変えることで、画像のサイズを変更することができます。
アスペクト比の「元のサイズ」をクリックすると、以下のようなプルダウンメニューが表示されますので、あなたが必要な比率を選んでクリックしてください。
「幅」や「高さ」をピクセル指定で入力すると、あなたのブログに合わせて細かく表示サイズを調整することもできます。
さらに「解像度」では、「サムネイル」「中」「フルサイズ」の中から必要なものをクリックして、画像の表示サイズを変更することができます。
画像の表示サイズを少し小さくするだけでも、スマホ画面でのスクロール量が減ったり、文章とのバランスが取りやすくなったりするため、読みやすさの面で大きな効果があります。
ただしここで変更しているのは、あくまで画面上に表示される大きさだけであり、画像ファイルそのものの容量はまったく変わらない点に注意が必要です。
元の画像ファイルが大きすぎる場合、記事内で表示サイズを小さくしてもデータ容量は重いままなので、読み込み速度を改善することはできません。
そのため、画像の容量を軽くしたい場合は、記事へ追加する前にiLoveIMGなどの外部サービスを使ってリサイズと圧縮を行うのがおすすめです。
画像の準備段階で適切なサイズと容量に整えたうえで、記事内では表示バランスを微調整するつもりでサイズ変更機能を使うと、見た目と表示速度の両方を無理なく両立させることができます。
画像にキャプションを付ける
記事に挿入した画像の下に短い説明文を付けたい場合は、WordPressの「キャプション」機能を使うことで簡単に補足情報を追加することができます。
まずキャプションを付けたい画像をクリックすると、画像のすぐ上に小さなツールバーが表示されますので、その中にある「キャプションを追加」アイコンをクリックしてします。
すると、画像の直下にキャプション入力欄が表示されますので、ここに補足説明として表示したい文章を入力します。
キャプションは画像の目的や状況を簡単に伝えたいときに便利で、特に操作説明用のスクリーンショットや比較画像など、読者が画像の意図を理解しにくい場面で効果を発揮します。
例えば、設定画面の一部分を切り取った画像を掲載する場合、そのままでは何を示しているのか分かりにくいことがありますが、キャプションに「設定画面の右側にあるメニュー部分」などと書いておけば、読者はすぐに内容を把握できるようになります。
また、キャプションは画像本体とは別の位置に配置されるため、本文とは違った形で視覚的に目に入りやすく、文章として読まなくても自然と情報が伝わるという点でも使い勝手が良い機能です。
さらに、キャプションは記事全体のデザインにとけこむようにWordPress側で自動的に整形されるため、あなたが特別なデザイン調整をしなくても統一感のある見た目に仕上がります。
操作自体も非常にシンプルですので、画像の意味を補足したいと感じたときには、必要に応じてキャプションを追加して記事の読みやすさを高めてください。
画像にリンクを設置する
記事内の画像をクリックしたときに、別のページへ移動できるようにしたい場合は、WordPressの「リンク」機能を使って簡単にリンクを設置することができます。
まずリンクを設置したい画像をクリックすると、画像のすぐ上に小さなツールバーが表示されますので、その中にある「リンク」アイコンをクリックします。
すると、URLを入力する小さな入力欄が表示されますので、ここに移動させたいリンク先のURLを入力し、Enterキーを押します。
外部サイトへリンクを設置する際は、Enterキーを押すと以下の小窓が開きますので、「新しいタブで開く」を必ずONにしておきましょう。
内部リンクを設定する場合は、入力欄に記事タイトルの一部を入力すると候補が表示されますので、その中から目的の記事をクリックすることで簡単にリンク先を設定できます。
画像にリンクを設置しておくと、バナー画像や操作説明用のキャプチャなどをクリックしたときに関連ページへ自然に誘導できるようになり、記事全体の導線を分かりやすく整えることができます。
リンクを設置する操作は数クリックで完了しますので、読者をスムーズに案内したい場面では、必要に応じて画像リンクを活用しましょう。
別の画像と入れ替える
記事に挿入した画像を後から別の画像に差し替えたい場合は、WordPressの編集画面から簡単に入れ替えることができます。
まず入れ替えたい画像をクリックすると、画像のすぐ上に小さなツールバーが表示されますので、その中にある「置換」アイコンをクリックします。
すると、「アップロード」と「メディアライブラリ」の二つが表示されますので、差し替えたい画像がパソコン内にある場合は「アップロード」、すでにWordPress内に取り込んでいる場合は「メディアライブラリ」をクリックします。
今回は、「メディアライブラリ」に保存されている画像と差し替えてみます。
メディアライブラリが開きますので、入れ替えたい画像をクリックし、「保存」ボタンをクリックします。
以下のように無事に画像が入れ替わりました。
もし入れ替え後に画像の大きさや位置が気になる場合は、右側のブロック設定パネルで「幅」や「高さ」、または「配置」の設定を調整して、記事全体のバランスを整えてください。
画像の差し替えは数クリックで完了できる操作ですので、記事の作成途中でより分かりやすい画像を使いたくなったときや、古いキャプチャ画像を最新のものに更新したい場面でも、いつでも気軽に入れ替えることができます。
まとめ
この記事では、WordPressの記事内で使う画像について、挿入前の準備から挿入後の基本的な編集方法までを解説しました。
まず、元画像の容量が大きいと表示が遅くなるため、iLoveIMGでリサイズと圧縮を行ってから記事に挿入することが重要です。
画像を挿入した後は、「代替テキスト」の設定や、img-border を使った外枠の追加などで見た目を整えられます。
また、配置変更や表示サイズの調整、キャプションの追加、リンク設置、さらに別画像への差し替えなど、必要に応じた編集もすべて画面上で簡単に行えます。
これらの機能を活用すれば、記事の読みやすさや視認性を大きく向上させることができますので、作業に慣れつつあなたのブログに最適な形を整えてみてください。
コメント