アイキャッチに文字を入れすぎていませんか

アイキャッチの文字は、短いタイトルと、伝えたい要点ひとつから考えてみましょう。詳しい説明は記事のタイトルや本文に置き、スマホのブログ一覧でも内容の見当がつく画像を目指します。

せっかく作るなら、対象者も、メリットも、注意点も入れておきたくなりますよね。パソコンの制作画面では読めても、小さな一覧画像になると、どこから読めばよいか分かりにくくなることがあります。

文字を全部なくす必要はありません。まずは、次に公開する記事の1枚だけ見直してみてください。

表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。

画像に残す言葉を決める

アイキャッチは、記事の内容を表す画像です。WordPressでは、記事の先頭やブログ一覧などに使われます。表示される場所は、サイトの見た目を決める「テーマ」によって異なります。

例えば、架空の水彩教室で、次の記事を紹介するとします。

記事のタイトル：はじめての水彩体験レッスン｜持ち物・服装・当日の流れ

この内容をすべて画像に入れると、「初心者向け」「道具は教室で用意」「汚れてもよい服で」「開始10分前に受付」と、言葉が増えていきます。

そこで、画像には次の2つを残します。

・短いタイトル：体験レッスンの持ち物

・伝えたい要点：道具は教室で用意

服装や受付時間は、本文の「当日の準備」にまとめます。案内をなくすのではなく、読みやすい場所に移すと考えると、言葉を減らしやすくなります。

同じレッスンの案内を、画像に残す言葉と本文で伝える情報に分けた架空の例です。

「何文字までならよい」という共通の正解はありません。画像の形や表示の大きさ、文字の太さでも変わります。長い言葉を小さくして押し込む前に、タイトルを短くできないか見直しましょう。

大切な情報は、本文の文字でも伝える

画像の中の文字は、文章のように画面の幅に合わせて折り返されません。画像全体が縮むと、文字も一緒に小さくなります。

料金や日付、申込条件を画像だけに載せている場合は、本文にも入力してください。読む人が文字を拡大したり、読み上げ機能を使ったりするときにも、通常の文章として書いてあることが役立ちます。

画像に載せた短い言葉だけで、記事の正式なタイトルを置き換える必要はありません。WordPressのタイトル欄には記事の内容が分かる題名を、本文には必要な説明を残します。

画像で興味を持った人が、本文で具体的な準備を確認できるようにします。

画像の「代替テキスト」は、画像の意味を文字で伝える説明です。設定欄がある場合は、表示場所での役割に合わせ、画像内の言葉や必要な意味が伝わるか確認します。長い案内は代替テキストだけに移さず、読む人に見える本文にも書きましょう。

背景の写真がにぎやかで文字が埋もれるなら、文字の後ろを無地にする方法もあります。写真なしの、シンプルな背景から始めても大丈夫です。素材写真を使うときは、商用利用や加工などの利用条件を確認してください。

WordPressでは、その記事の画像だけを差し替える

今日は、1記事のアイキャッチと、画像から移す説明だけを扱います。本文に画像を追加する操作や、サイト全体の見た目を変える操作とは別です。

先に、現在の画像のファイル名と、表示のスクリーンショットを控えます。画像を作ったアプリでは元データを複製し、複製した方の文字を減らして、別名の画像ファイルに書き出してください。例は「lesson-cover-short.png」。元の画像ファイルも残します。画像の中の文字は、WordPressの本文を書き換えても変わりません。

戻すときは、後の手順2〜4と同じ場所で元の画像を選び直します。本文の直前の編集は、画面左上の左向きに曲がった矢印「元に戻す」で取り消します。どちらも、戻った状態を確かめてから保存しましょう。

以下は標準のブロックエディターでの操作です。ブロックは、段落や画像などの記事の部品。画面例はWordPress 7.1.2／Twenty Twenty-Fiveの下書きで確認しており、テーマやバージョンで表示が異なります。画面の「公開」は、今回の確認のために押しません。

画面例で確認できたのは、アイキャッチの設定入口と画像選択前の画面までです。画像選択後の確定・見本の確認・設定済み画像の「置換」は公式資料を基にした説明で、今回の検証画面では実操作を確認していません。

手順1：記事を開き、画像から外す説明を本文に残す

管理画面の「投稿」（固定ページなら「固定ページ」）から一覧を開き、対象の題名をクリックします。

本文をクリックし、右上の「設定」を開きます。右側に「投稿」または「固定ページ」と「ブロック」のタブがあり、「ブロック」を選ぶと「段落」など部品の名前が出ることが、この手順に近い画面の目安です。「テンプレート」など別の編集画面が出る場合や、この目安が見当たらない場合は、ここで止めて使用中のツールの案内を確認してください。

本文の「当日の準備」など、説明を置きたい場所の文章をクリックし、通常の「段落」ブロックを選びます。「同期パターン」など複数のページで共通に使う部品や、その中の文章の場合や、共通の部品か判断できない場合は、ここでは編集を止めて影響範囲を確認してください。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。例なら「汚れてもよい服装でお越しください。開始10分前に受付へお越しください。」と、実際の案内に合わせて書き足します。すでに書いてあれば追加は不要です。

削った情報が伝わらなくなるのは心配ですよね。まず本文にあることを確かめてから、画像を差し替えます。

手順2：右の設定を開き、「投稿」を選ぶ

右側に設定欄がなければ、画面右上の「設定」をクリックします。実画面では、左右に分かれた長方形のアイコンです。マウスを重ね、表示される名前を確かめて選びます。

右側の「投稿」タブをクリックします。固定ページを編集している場合は「固定ページ」です。ここでは「ブロック」タブや、本文内の「画像」ブロックを選びません。

画像が未設定なら「アイキャッチ画像を設定」をクリックします。すでに画像があり、その下に「置換」が表示されている場合は、そちらをクリックして画像選択画面を開きます。「置換」が見つからない画面では、元の画像を削除せず、テーマの案内を確認してから進めてください。

手順2：「投稿」タブ内の設定入口です。別の説明用下書きの画面の一部を拡大しており、画像は未設定です。WordPress 7.1.2／Twenty Twenty-Five。

手順3：用意した画像を選ぶ

画像選択画面で「ファイルをアップロード」→「ファイルを選択」をクリックし、手元に保存した新しい画像を選びます。すでにアップロードしてある場合は「メディアライブラリ」でその画像をクリックします。

手順3：「ファイルをアップロード」を開いた画面です。画像をまだ選んでいないため、右下の「アイキャッチ画像を設定」は押せない状態です。選択・設定を終えた画面ではありません。WordPress 7.1.2／Twenty Twenty-Five。

選んだ画像と、詳細欄のファイル名が新しい方になっているか確かめます。古い画像と似ていて迷うときは、控えた名前と比べましょう。

手順4：「アイキャッチ画像を設定」で確定する

画像選択画面の「アイキャッチ画像を設定」をクリックします。編集画面に戻り、右側のアイキャッチ欄が、新しい画像の小さな見本に変わっていれば選択できています。この時点で、記事の更新まで終わったとは限りません。

設定欄やボタンが見つからない、見本が変わらない場合は、ここで止めます。画面を控えてテーマの案内を確認し、「外観」やテンプレートへ移って直そうとしなくて構いません。

手順5：プレビューで記事内の見え方を確認する

右上のモニター形の「表示」のメニューから「新しいタブでプレビュー」を開きます。別のタブで、新しい画像か、本文に必要な案内が残っているかを確認します。戻ってスマホ幅でも見たいときは「表示」から「モバイル」を選びます。お使いの画面で「プレビュー」と表示される場合は、そのメニューを確認してください。

「表示」で確認に使うのは「モバイル」「新しいタブでプレビュー」だけです。確認後は「デスクトップ」へ戻してから設定を編集します。「レスポンシブスタイル」「テンプレートを表示」や、ほかの設定は一緒に変更しません。

本文の画像を選んだときの「縦横比」などの設定と、ブログ一覧でのアイキャッチの表示は別です。本文の画像設定を変えれば、一覧も同じように直るとは限りません。 画像の周りに余白を足しても、すべての表示で必ず残る範囲があるわけではありません。

スマホでは、記事と一覧の両方を見る

スマホ表示のプレビューに加えて、可能なら実際のスマートフォンでも確認します。まず拡大せず、普段ブログを読む大きさで見てください。

・短いタイトルが読めて、記事の内容が想像できるか

・背景に文字が埋もれていないか

・文字の端が欠けていないか

・ブログ一覧の小さな画像でも確認できるか

一覧では、画像の一部が切り取られることがあります。これは「トリミング」と呼ばれる表示です。記事ページでは横長でも、一覧では正方形に近い形になるなど、同じ画像の見える範囲が変わる場合があります。

説明用に作った表示例です。画像の形や切り取られる位置は、実際のサイトで確かめます。

下書きのプレビューでは、ブログ一覧への反映まで確認できない場合があります。その場合は、公開済みの別の記事で今の切り取られ方を確認します。確認のためだけに下書きを公開する必要はありません。

問題がなければ、公開済みの記事は右上の「保存」または「更新」で変更を反映します。下書きなら「下書き保存」までにします。通常の公開・更新をしたあとに、スマートフォンで対象の記事とブログ一覧の両方を開き、文字の欠けをもう一度確認してください。

元に戻したいときと、相談したいとき

更新したあとに戻す場合は、残しておいた元の画像を再びアイキャッチに指定し、更新します。保存履歴を確認する「リビジョン」で、画像ファイルやアイキャッチの指定まで必ず戻せるとは限りません。元の画像は削除せず残しておきましょう。

文字を減らしても毎回違う場所で切れる、設定変更がほかの記事にも影響しそう、という場合は作業を止めて大丈夫です。まずは「どの記事の、どの表示で困るか」をスクリーンショットで残します。

今日は、1枚の画像から説明をひとつ本文へ移す。 そのくらいの見直しから始めてみてください。

アイキャッチの整理や表示の確認に迷う場合は、該当記事のURLと画面を添えて、ココナラ内のメッセージからご相談ください🌿 画面にパスワードやお客さまの個人情報が写らないようにしてください。