sucreホームページを作っていて気になったこと。
「タイトル入りのアイキャッチ画像の上に記事タイトルがかぶってしまう……」
私も、最初はどう設定すればいいのか分からず、何度もカスタマイザーを探し回りました。
この記事では、SWELLテーマを使っている場合の、
記事タイトルの表示位置を変更する方法を、記録しておきます。
目次
なぜタイトルが画像にかぶるの？
- 記事スライダーは設定によって、記事タイトルが 画像の上に重なる表示 になります。
- タイトル入りのアイキャッチだと、文字が重なって 読みにくくなることがあります。
- なので今回は、タイトルの表示位置を 「画像の下側」 に変更してスッキリさせます。
（記事スライダー）タイトルの表示位置を「画像の下側」に変更する
🛠️ WordPress管理画面＜外観＜カスタマイズ＜トップページ＜記事スライダー＜記事の表示設定
【タイトルや日付などの表示位置】。
「画像の上に被せる」→「画像の下側」 に変更します。
タイトルの表示位置 変更前／変更後
| 変更前 | 変更後 |
|---|---|
| アイキャッチ画像の上にタイトルが重なっていた | アイキャッチ画像の下にタイトルが表示される |
私の現在の設定（例）｜記事スライダー「記事の表示設定」
この記事の手順で「タイトルが画像にかぶる」問題は解消しました。
そのうえで、私は今（2026年1月時点）記事スライダーの表示を次のように設定しています。
- タイトルや日付などの表示位置：画像の下側
- カテゴリー表示位置：サムネイル画像の上
- 日付の表示設定：表示しない（✅公開日／✅更新日 → どちらもOFF）
- 著者の表示設定：表示しない（✅著者を表示する → OFF）
このページは「記事スライダーの表示設定（タイトル位置）」の詳細メモです。
記事スライダーの全体像（地図）はこちら👇
▶ 記事スライダーとは｜SWELL（DEMO 02）でサイトの入口を整える方法
あわせて読みたい
記事スライダーとは｜SWELL デモサイト「DEMO02」でサイトの入口を整える方法
トップページはサイトの「入口」😊
まずは、SWELLのデモサイト「DEMO02」で使える記事スライダーについて、自分用に整理しておきます。
sucreSWELLでは、
トップページの「記事スライダー」設定から
記事タイトルの表示位置をかんたんに変更できます。
タイトルが画像にかぶると、せっかくのアイキャッチが読みにくくなることも。
そんなときは、**「画像の下側」**にしておくとスッキリ見えて安心です🎀
