- SWELLの記事スライダーからタイトルを消す方法
- 画像の下表示・画像の上表示それぞれの対処法
- CSSなしで消す方法と注意点
- タイトルを消すのが向いているサイトの特徴
「SWELLの記事スライダー、画像をもっとスッキリ見せたいのにタイトルが邪魔……」
そんなふうに感じたことはありませんか？
結論から言うと、SWELLの記事スライダーのタイトルを消す方法は2つあります。
1つ目は、追加CSSに書き込む方法。
2つ目は、投稿タイトル自体を空欄にする方法です。
ただし、後者にはデメリットもあります。
というわけで、この記事ではこの辺りに触れながら、
SWELLの記事スライダーからタイトルを消す方法を、初心者の方にもわかりやすく解説します。
あわせて、どんなサイトでタイトル非表示が向いているのかも紹介します。
SWELLの記事スライダーのタイトルを消すならCSSがいちばん安全
SWELLの記事スライダーでタイトルだけを非表示にしたいなら、追加CSSを使う方法がもっとも安全です。
理由はシンプルで、記事そのもののタイトル情報は残したまま、見た目だけ消せるからです。
SWELLでは、記事スライダーのテキスト表示を調整できますが、タイトルそのものを完全に消す専用設定は基本的に想定されていません。
そのため、見た目だけ整えたいならCSS対応が王道です。
SWELLの記事スライダーからタイトルを消す方法【CSS編】
SWELLの記事スライダーのタイトルを非表示にしたい場合は、追加CSSにコードを貼り付ける方法がもっとも安全で確実です。
貼り付け先はこちらです。
外観 ＞ カスタマイズ ＞ 追加CSS
以下のCSSを、「追加CSS」に貼り付けてください。
.p-postSlider.-ps-style-normal .p-postList__title {
display: none;
}
.p-postSlider.-ps-style-img .p-postList__title {
display: none;
}このCSSを使うと、記事スライダー内のタイトルだけを非表示にできます。
投稿タイトルそのものを削除するわけではないため、関連記事や投稿一覧など他の場所に影響を与えにくいのがメリットです。
「記事スライダーだけスッキリ見せたい」という場合は、この方法がもっともおすすめです。
ちなみに、SWELLでは記事スライダーのタイトルを2パターン選ぶことができます。
- 画像の下側
- 画像の上に被せる
この設定に応じてCSSを使い分ける方法もありますが、今回はどちらの表示パターンにも対応できるCSSをまとめて掲載します。
そのため、現在どちらの設定にしているか分からない場合でも、そのままコピペでOKです。
また、念のために記事スライダーのタイトルの確認場所も掲載しておきます。
外観 ＞ カスタマイズ ＞ トップページ ＞ 記事スライダー ＞ 記事の表示設定 ＞ タイトルや日付などの表示位置
CSSを使わずにタイトルを消す方法
「できればCSSは触りたくない……」
「設定だけで何とかしたい……」
そんな方に向けて、CSSを使わずに、SWELLの基本操作で記事スライダーのタイトルを非表示にする方法もご紹介します。
やり方は簡単で、投稿編集画面のタイトル入力欄を空欄にするだけです。
ただ、あとから困る可能性もあるため、試す前にデメリットまで確認しておくのがおすすめです。
- 投稿ページ上部のタイトル欄を空欄にする
- SEO用タイトル（タイトルタグ）に本来のタイトルを入力する
投稿ページのタイトルを入力する欄を空白にします。
そのままだと検索結果に表示されるタイトルまで消えてしまうため、SEOタイトルに本来のタイトルを入力します。
SEO SIMPLE PACKを入れているとページ下部に入力欄が出現します。
この操作で、SWELLの記事スライダーからタイトルが表示されなくなります。
ただしデメリットもある
このやり方、パッと見はすごく簡単なんですが、正直あまりおすすめはしません。
というのも、投稿タイトルって記事スライダーのためだけに使われているわけじゃなくて、サイト全体で「この記事の名前」として使われている重要な情報なんですよね。
なので、ここを空欄にしてしまうと、思わぬところに影響が出てきます。
たとえば…
- 関連記事でタイトルが出ず、「どんな記事か分からない」状態になる
- 投稿一覧や新着記事が、ちょっと分かりにくい見た目になる
- サイト内検索でも、どの記事か判断しづらくなる
こんな感じで、「スライダーだけスッキリさせたい」という目的だったはずなのに、他の場所まで巻き込んでしまうのがこの方法のちょっと怖いところです。
なので、記事スライダーだけ整えたい場合は、前の章で紹介したようにCSSでスライダー部分だけを調整する方法が無難かと思います。
そもそもSWELLの記事スライダーでタイトルを消すのはどんなとき？
「わざわざタイトルを消す必要あるの？」と思う方もいるかもしれません。
でも、次のようなサイトではかなり相性がいいです。
商品カタログのように見せたいサイト
商品画像そのものに魅力があるなら、文字情報は少ない方が見やすいです。
特に、アイキャッチ画像の中に商品名やコピーを入れている場合は、記事スライダー側のタイトルが重複しやすくなります。
例えば、トレーニングジムなどのサイトなら、キャンペーンバナーを用意して記事スライダーで訴求するのもいいかもです！
ポートフォリオサイト
制作実績や写真を見せるサイトでは、まず視線を画像に集めたいことが多いです。
タイトルを消すだけで、ギャラリーのような印象に近づきます。
このほかにも、工務店などでは施工事例を見せるのもいいかもですね。
高級感を出したいサイト
文字情報を減らすと、余白が生まれて洗練された雰囲気が出やすくなります。
特に、ビジュアル重視のトップページでは効果的です。
SWELLの記事スライダーでタイトルを消すときの注意点
便利なカスタマイズですが、いくつか気をつけたいポイントもあります。
画像だけでは内容が伝わりにくいことがある
タイトルを消すと、ユーザーが「何の記事か」を一目で理解しづらくなることがあります。
とくにブログ型サイトでは不向きな場合もあります。
アイキャッチ画像の質が重要になる
タイトルを消すなら、画像だけで魅力が伝わることが大切です。
中途半端な画像だと、逆にクリックされにくくなる可能性があります。
すべてのサイトに向いているわけではない
情報を読ませるサイトなら、タイトルはあった方が親切です。
一方で、見せるサイトやカタログ型サイトなら、非表示の相性が良いです。
よくある質問
SWELLの記事スライダーにタイトルを消す標準設定はありますか？
記事スライダーの表示設定はありますが、タイトルだけを完全に消す専用設定としては使いにくく、見た目だけ調整したい場合はCSS対応が現実的です。公式でも記事スライダーは表示位置などを設定する形になっています。
タイトルを消してもSEOに悪影響はありませんか？
投稿タイトル自体を残したまま、記事スライダー上の見た目だけをCSSで消すなら、大きな問題は起きにくいです。
カテゴリー表示も消せますか？
「トップページ → 記事スライダー → カテゴリー表示位置」で非表示も選択することができます。
まとめ
SWELLの記事スライダーからタイトルを消す方法は2つあります。
- おすすめは、追加CSSでタイトルだけを非表示にする方法
- 非推奨なのは、投稿タイトル欄を空にする方法
記事スライダーだけ整えたいなら、見た目だけをコントロールできるCSS対応がもっとも安全です。
画像を主役にしたトップページを作りたい方は、ぜひ試してみてください。
KATADORIでは、SWELL専用の業種別テンプレートを配布しています。
構成・デザイン・導線まであらかじめ整えているので、
文章や画像を差し替えるだけで、見た目の整ったサイトを作りやすくなります。
