【Random Image Inserter】アイキャッチデザイン作成の使い方

Random Image Inserterのアイキャッチデザイン機能では、写真に記事タイトルを重ね、背景と文字のデザインを整えることができます。

写真ACなどで用意した写真も、タイトルと装飾を組み合わせれば、文字入りのアイキャッチのような見た目に。カテゴリーごとに設定できるため、記事ごとに同じデザイン作業を繰り返す手間を減らせます。

このページでは、設定画面を開くところから、デザイン選択・プレビュー・保存までを順番に説明します。記事冒頭やh2下への画像挿入については、自動画像設置の使い方をご覧ください。

この機能は、記事ページ上で元のタイトルと写真を組み合わせて表示するものです。文字入り画像ファイルを生成・ダウンロードする機能ではありません。

アイキャッチデザイン機能でできること

• 背景9種類と文字9種類を、それぞれ選んで組み合わせる
• 記事に設定した写真や、プラグインが表示する代替画像にタイトルを重ねる
• 長いタイトルを最初の区切りまでに短くして表示する
• 写真とタイトルを使って、スマホ・タブレット・PCのプレビューを確認する
• 背景・文字・色をランダムに表示する

画像の自動設定とデザイン設定は別々に管理します。デザインの適用条件はカテゴリーです。画像セットで選択したカテゴリー・タグが、自動でデザイン設定にも選択されるわけではありません。

アイキャッチデザイン作成の使い方

画面はバージョン3.0.0のデモ環境で撮影しています。赤枠が操作する場所の目印です。カテゴリー名やプレビュー画像は、ご自身のサイトに合わせて選んでください。

設定画面を開いて、セットを追加する

WordPress管理画面の「Random Image Inserter」→「アイキャッチのデザイン」を開きます。

キー入力画面が表示される場合は、先に「基本情報」で有効なシークレットキーを設定してください。

「アイキャッチのデザインを有効にする」にチェックが入っていることを確認し、「＋ 設定セットを追加」をクリックします。

セット名と適用カテゴリーを設定する

セット名には「旅行記事のアイキャッチ」など、後から分かる名前を入力します。セット名は管理用で、記事には表示されません。

「適用カテゴリー」を開き、デザインを使いたいカテゴリーにチェックを入れます。複数選択もできます。すべてのカテゴリーに適用したい場合は「すべて選択」を使ってください。

複数のデザインセットに該当する記事には、画面上で上から最初に一致したセットを使います。カテゴリーごとに見た目を変える場合は、適用範囲が重なりすぎないように設定してください。

タイトルを表示する場所を選ぶ

「タイトルの表示場所」では、画像に文字を重ねる条件を選びます。

記事にアイキャッチとして設定した写真にタイトルを載せたい場合は、「画像に重ねる」を選択してください。

選択肢	表示の違い
記事に設定した画像には重ねない（初期設定）	記事に直接設定したアイキャッチでは、タイトルをテーマ本来の位置に表示します。プラグインのランダム画像など、代替画像にだけ重ねます。
画像に重ねる	記事に直接設定したアイキャッチと代替画像の両方が対象です。元のタイトルを画像上に移動します。
画像の外に表示する	画像の種類にかかわらず、タイトルをテーマ本来の位置に表示します。この設定では背景・文字のデザインも適用しません。

初期設定のままでは、記事に直接設定した写真にはタイトルが重なりません。「設定したのに変わらない」という場合は、まずここを確認してください。

長いタイトルは、最初の区切りまでにする

「画像上に載せるタイトル」は、初期設定の「最初の区切りまで表示」がおすすめです。タイトルの先頭から最初に見つかった区切りまでを使うため、補足の長いタイトルでも写真が窮屈になりにくくなります。

記事タイトルの例	画像上に表示する文字
Switch Liteにコントローラーを接続する方法7ステップ｜Joy-ConやProコンを使う手順がすぐ分かる！	Switch Liteにコントローラーを接続する方法7ステップ
週末の旅行を楽しもう！おすすめの持ち物を紹介	週末の旅行を楽しもう！
初めてでも大丈夫!?準備のコツを解説	初めてでも大丈夫!?
週末に訪れたい海辺の街	週末に訪れたい海辺の街

「｜」「|」は区切り記号を含めず、その前までを表示します。「！」「？」「!」「?」は記号も含め、「!?」など連続する記号はまとめて残します。区切りがない場合は全文を表示します。

短くなるのは画像上での表示だけです。保存済みの記事タイトルは書き換えません。全文を載せたい場合は「全文を表示」を選んでください。

背景と文字のデザインを選ぶ

初期設定は文字が「額縁」、背景が「スモーク」です。その後、背景と文字を別々に変更できます。

迷ったら「おすすめセットから選ぶ」で見た目の方向性を決めてみてください。

背景デザインでは、写真の色や質感を選びます。「オーロラ」は写真全体にピンク・青・緑の光を重ねるデザインです。

写真をそのまま使いたい場合は、左上の「なし（元の画像）」を選びます。

文字デザインでは、タイトルの枠やカード、ラベルなどを選びます。背景が「なし」でも、文字側の額縁やカードは表示されます。

こんな見た目にしたいとき	試してみたい文字デザイン
落ち着いた雰囲気にしたい	額縁
明るい写真でも文字を読みやすくしたい	白いカード
短いタイトルを印象的に見せたい	ラベル
光のある背景と大きな文字を合わせたい	オーロラ

「帯・アクセントの色」で、文字のライン・ラベルや背景の光などに使う色を変更できます。色の出方はデザインによって異なるので、プレビューを見ながら選んでください。

自分の写真とタイトルでプレビューする

表示プレビューの「試したいタイトル」に、実際に使う予定の記事タイトルを入力します。続いて、「メディアから画像を選択」または「端末の画像で試す」から写真を選んでください。

画面サイズは「スマホ 375px」「タブレット 768px」「PC 1280px」で切り替えられます。PCで整えた後は、スマホでも文字の大きさや改行を確認してください。

プレビューで選んだ写真や入力したタイトルは、記事には保存されません。「端末の画像で試す」で選んだ画像もアップロードしません。記事に使う写真は、別途アイキャッチや画像セットへ設定してください。

「記事に設定した画像には重ねない」を選んでいる場合、プレビューは代替画像に重ねる場合の見本です。記事に直接設定したアイキャッチにも同じ表示になる、という意味ではありません。

ランダム表示を試す

背景・文字それぞれの一覧下にある「ランダム（読み込みごとに選択）」を選ぶと、ページを読み込むたびに、その項目を9種類から選び直します。両方をランダムにすれば、背景と文字で81通りの組み合わせが候補になります。

ランダムを選択すると、プレビューに「ランダム表示を切り替える」ボタンが現れます。クリックして、いろいろな組み合わせを確認してみてください。

背景だけをランダムにして、文字を「額縁」に固定することもできます。「帯・アクセントの色」もランダムにできます。実際の記事では再読み込み時に同じデザインが選ばれることもあります。

必要に応じて文字サイズや配置を調整する

基本ここは触らなくてもOKです。

細かく整えたい場合は、「詳細調整 — 文字サイズ・配置」を開きます。まずは推奨値のまま試し、文字が小さい・写真の見せたい部分に重なる、といった場合に調整してください。

項目	調整する内容
横幅（%）	タイトルを配置する領域の横幅。狭くすると改行が増えやすくなります。
縦方向（%）・横方向（%）	縦は0が上端、100が下端。横は0が左、100が右です。
文字揃え	左寄せ・中央・右寄せから選びます。
画面幅ごとの文字（px）	スマホ・タブレット・PCなどの画面幅に応じた文字サイズです。

文字デザインを切り替えると、そのデザインの推奨サイズ・配置に戻ります。デザインを決めてから詳細調整を行ってください。背景だけの変更では、文字のサイズ・配置は維持されます。

文字デザインがランダムの場合は、選ばれたデザインの推奨値を使うため、詳細調整は操作できません。文字が画像に収まらない場合は、タイトルを元の位置に戻して表示します。

設定を保存して、実際の記事で確認する

設定ができたら、ページ下部の「設定を保存」をクリックします。プレビューを見るだけでは保存されないので、最後に忘れずに押してください。

対象カテゴリーの記事で、アイキャッチとタイトルの表示を確認します。

テーマのフォントや余白によって、プレビューと実際の見た目が異なる場合があります。

キャッシュを使っているサイトでは、必要に応じてキャッシュを削除してから確認してください。

デザインが反映されない場合

• 「基本情報」のシークレットキーが有効か
• 「アイキャッチのデザインを有効にする」にチェックが入っているか
• デザインセットで選んだカテゴリーに、記事が該当しているか
• 直接設定したアイキャッチに重ねたい場合、「画像に重ねる」を選んでいるか
• 対象の記事ページに、アイキャッチ画像と記事タイトルが表示されているか
• 記事編集画面の「画像・デザインの例外設定」で、デザインを無効にしていないか
• 最後に「設定を保存」をクリックしたか
• ページキャッシュに以前の表示が残っていないか

文字が画像に収まらない場合や画像を読み込めない場合は、タイトルを元の位置に表示します。

また、テーマ独自の構造により対象の画像・タイトルを特定できない場合もあります。設定を見直しても反映されない場合は、お問い合わせフォームからご連絡ください。

よくある質問

SNSやブログカードにも、文字入りの画像が表示されますか？

この機能の装飾は記事ページ上の表示です。画像ファイル自体は変わらないため、SNSの共有画像やブログカードに、ここで重ねたタイトル・背景加工がそのまま反映されるわけではありません。

一部の記事だけ、デザインを使わないことはできますか？

できます。対象の記事の編集画面で「画像・デザインの例外設定」を開き、「アイキャッチのデザイン」を「この記事では無効」にします。通常どおり使う場合は「共通設定に従う」に戻してください。

ライセンスが無効になった場合はどうなりますか？

シークレットキーが無効・期限切れになった場合は、画像の自動表示とデザインの反映を停止します。設定内容は保持されます。