SWELLの記事スライダーを設定したものの、思った位置に表示されず戸惑っている方もいるでしょう。標準の記事スライダーは、トップページ上部にあるメインビジュアルの下へ表示される機能で、カスタマイザーから表示の有無や余白、横幅などを調整できます。
ただし、管理画面には記事スライダーそのものを自由に上下移動する項目はありません。見た目の位置を整えたい場合と、固定ページや本文内など別の場所へ移したい場合では、選ぶ方法が異なります。
この記事では、標準の表示位置、カスタマイザーで調整できる範囲、任意の位置へ設置する際の考え方を順番に整理します。まずはテーマ標準の設定から確認し、必要以上に難しいカスタマイズを増やさない進め方を選んでみてください。
SWELLの記事スライダー位置は標準でどこに表示されるか
最初に、SWELLが標準で想定している記事スライダーの位置を整理します。配置の仕組みを先に知っておくと、表示されない原因や、別の場所へ移す必要があるかを判断しやすくなります。
標準位置はトップページのメインビジュアル下
SWELLの記事スライダーは、標準機能ではトップページ上部のメインビジュアル下に表示されます。メインビジュアルを非表示にしている場合でも、記事スライダーはトップページ上部の専用エリアに配置されるため、本文ブロックの好きな位置へ直接挿入する仕組みではありません。
例えば、「ヘッダーのすぐ下に注目記事を見せたい」「サイトを開いた直後におすすめ記事へ誘導したい」という用途には標準位置が合います。一方、トップページ中段のサービス紹介後や、固定ページの文章途中へ置きたい場合は、標準設定だけでは対応しにくい点に注意してください。
設定場所は外観からカスタマイザーを開く
記事スライダーの設定は、WordPress管理画面の「外観」から「カスタマイズ」を開き、「トップページ」内の「記事スライダー」へ進みます。SWELL公式マニュアルでも、このメニューに表示設定や記事のピックアップ条件、スライドの見た目に関する項目が用意されています。
最初に記事スライダーを表示する設定を有効にし、公開ボタンを押して反映させます。カスタマイザーのプレビューだけで判断せず、別タブやシークレットウィンドウで実際のトップページを開くと、キャッシュの影響を切り分けやすくなります。
投稿ページや固定ページには標準で表示されない
標準の記事スライダーは、基本的にトップページ向けの機能です。そのため、投稿ページ、固定ページ、カテゴリー一覧などに同じスライダーを表示したいと考えても、カスタマイザーの表示スイッチだけでは設置できません。
ここで記事スライダーと投稿リストブロックを混同しないことが大切です。記事スライダーはテーマがトップページ用に出力するパーツですが、投稿リストブロックはエディターで任意のページへ配置できます。目的が「複数の記事を横並びで紹介すること」であれば、無理に標準スライダーを移植せず、投稿リストブロックやバナーを使う方法も検討するとよいでしょう。
| 確認したい場所 | 標準の記事スライダー | 代替手段 |
|---|---|---|
| トップページ上部 | カスタマイザーで設置可能 | 投稿リストブロックも利用可能 |
| トップページ中段 | 自由な移動項目はなし | 固定ページ編集やブログパーツを活用 |
| 投稿・固定ページ内 | 標準では表示されない | 投稿リスト、関連記事、バナーを活用 |
| 全ページ共通部分 | 標準では対象外 | ウィジェットや専門的なカスタマイズ |
具体的には、トップページを開いて「メインビジュアル、記事スライダー、ピックアップバナー、メインコンテンツ」の順に並んでいるかを確認します。記事スライダーが見つからない場合は、位置を変える前に、表示設定と対象記事の指定を見直してください。
- 標準位置はトップページ上部のメインビジュアル下です。
- 設定は外観、カスタマイズ、トップページ、記事スライダーの順に開きます。
- 投稿ページや固定ページには標準機能だけでは表示されません。
- 目的によっては投稿リストブロックのほうが安全で簡単です。
記事スライダーの位置感をカスタマイザーで整える方法
標準の配置場所がわかったところで、次は同じ位置のまま見え方を整える方法を確認します。上下の余白や横幅、背景などを調整すると、スライダーを移動しなくても位置の違和感を減らせます。
上下の余白を調整して前後の距離を整える
記事スライダーの位置が高すぎる、または下のコンテンツから離れすぎているように見える場合は、まず上下の余白設定を確認します。配置順そのものは変わらなくても、前後のパーツとの距離が変わるため、視覚的な位置は大きく変化します。
例えば、メインビジュアルと記事スライダーの間が広く感じるときは、記事スライダー側だけでなく、メインビジュアルやピックアップバナーの余白も確認するとよいでしょう。空のパーツや非表示設定が中途半端に残っていると、意図しない空間が生まれる場合があります。
横幅とスライド枚数で存在感を調整する
記事スライダーがページ上部で大きく見えすぎる場合は、横幅や表示するスライド数を調整します。画面いっぱいに広げる表示は写真を目立たせやすい一方、本文へ進みたい読者には圧迫感が出るかもしれません。コンテンツ幅に収めると、ページ全体にまとまりが生まれます。
スマートフォンでは、パソコンと同じ枚数や余白に見えないことがあります。カスタマイザーの端末切り替えだけでなく、実機でもタイトルの改行、画像の切れ方、矢印やページネーションの重なりを確認してみてください。長い記事タイトルを選びすぎないことも、位置の乱れを防ぐポイントです。
表示記事を絞ってスライダーの役割を明確にする
位置を整えても雑然として見える場合は、表示する記事の選び方に原因があるかもしれません。SWELLの記事スライダーでは、カテゴリーやタグなどを使ってピックアップ対象を絞り、並び順を指定できます。サイトの入口に置くなら、読者に最初に読んでほしい記事へ限定すると導線が伝わりやすくなります。
例えば、「初めての方へ」「人気記事」「サービス案内につながる記事」など、役割が近い記事をまとめます。新着記事を自動で並べるだけでは内容が頻繁に変わり、スライダーの目的が曖昧になる場合があります。副業ブログなら、収益を強く訴える記事だけでなく、始め方や注意点など判断に役立つ記事も含めると自然です。
次に、表示する記事を少数へ絞り、タイトルと画像の統一感を確認します。
標準設定で目的を満たせるなら、コードによる位置変更は避けるほうが管理しやすくなります。
具体的には、変更前の画面をスクリーンショットで保存し、「余白だけ変更」「横幅だけ変更」のように1項目ずつ試します。複数の設定を同時に変えると、どの項目が位置の違和感を解消したのかわかりにくくなるためです。
よくある質問として、「記事スライダーをメインビジュアルより上にできますか」という疑問があります。標準のカスタマイザーには、パーツの順番を自由に入れ替える操作は用意されていません。上へ移すにはテーマ出力の変更が関係するため、まずメインビジュアルを非表示にする案を比較してください。
もう一つは、「余白をゼロにしても空間が残るのはなぜですか」という疑問です。前後にあるピックアップバナーや固定ページ側の余白、追加CSS、キャッシュが影響している可能性があります。各機能を一時的に切り替え、原因を一つずつ分けて確認するとよいでしょう。
- 上下の余白調整で視覚的な位置を変えられます。
- 横幅と表示枚数はスライダーの存在感に影響します。
- 表示記事を絞るとトップページの目的が伝わりやすくなります。
- 変更は1項目ずつ行い、パソコンとスマートフォンで確認します。
記事スライダーを任意の位置へ置きたいときの選択肢
標準設定で位置感を整えても目的を満たせない場合は、別の設置方法を比較します。テーマファイルの変更には保守上の負担があるため、同じ見せ方が必要なのか、記事への導線を作れればよいのかを先に整理しましょう。
投稿リストブロックで近い導線を作る
トップページ中段や固定ページ内へ記事を並べたいだけなら、投稿リストブロックを使う方法が取り組みやすいでしょう。記事スライダーと完全に同じ動きではありませんが、カテゴリーやタグで記事を絞り、カード型やリスト型で見せられます。エディター上で場所を移せるため、更新時の管理もしやすくなります。
例えば、サービス紹介の下へ「最初に読みたい3記事」を置き、その下に問い合わせやプロフィールへの導線を配置します。自動で動くスライダーより、読者が記事タイトルを落ち着いて比較できる利点もあります。装飾を増やしすぎず、見出しと短い説明文を添えると目的が伝わりやすくなります。
ブログパーツやバナーを使って誘導する
紹介したい記事が少ない場合は、ブログパーツや画像バナー、ボタンを使う方法もあります。1〜2記事への誘導にスライダーを使うと、動きに対して情報量が少なくなり、かえって操作しにくく感じられることがあります。固定した導線なら、表示崩れの確認範囲も抑えられます。
具体的には、「ブログの始め方はこちら」「よく読まれている記事」などの短い見出しを置き、アイキャッチ画像と記事リンクを組み合わせます。スマートフォンでは画像が縦に長くなりすぎないようにし、リンク先が何の記事なのかを文字でも示してください。画像だけの導線にしないことは、使いやすさの面でも大切です。
テーマファイルを使うカスタマイズは慎重に判断する
標準の記事スライダーと同じパーツを投稿ページや任意のテンプレート位置へ表示する方法として、テーマファイルを呼び出すカスタマイズが紹介されることがあります。ただし、PHPやテンプレート構造を扱うため、コードの貼り付けだけで安全に完了する作業ではありません。
親テーマを直接編集すると、アップデートで変更が失われたり、記述ミスで画面が表示されなくなったりするおそれがあります。実施する場合は、バックアップと復元手順を用意し、子テーマや検証環境を使用してください。SWELLの更新によってファイル構成や仕様が変わる可能性もあるため、作業前にはSWELL公式マニュアルと最新の案内を確認するとよいでしょう。
| 方法 | 向いている目的 | 難しさ | 主な注意点 |
|---|---|---|---|
| カスタマイザー調整 | 標準位置の見え方を整える | 低い | 配置順は自由に変えられない |
| 投稿リストブロック | 任意のページで記事を紹介する | 低い | 標準スライダーと動きは異なる |
| ブログパーツやバナー | 少数の記事へ明確に誘導する | 低い | リンク先を文字でも示す |
| テーマファイルの変更 | 標準パーツを別の場所へ出力する | 高い | 更新、エラー、保守の負担がある |
例えば、在宅で運営する小規模ブログなら、まず投稿リストブロックで代替し、アクセス状況やクリック状況を見ながら必要性を判断します。法人サイトで制作会社や保守担当者がいる場合は、更新後の検証や復旧を含めた運用体制を決めてから独自実装を検討するとよいでしょう。
よくある質問として、「追加CSSだけで記事スライダーを好きな位置へ移せますか」というものがあります。CSSは見た目を整える仕組みであり、HTML上の出力場所を安全に変更できるとは限りません。大きな位置変更を無理に行うと、画面幅によって重なりや空白が生まれる場合があります。
「カスタマイズ記事のコードをそのまま使ってもよいですか」という疑問もあります。公開時期や対象バージョンが古いコードは、現在のテーマで動かない可能性があります。利用規約を確認したうえで、検証環境、バックアップ、エラーログの確認方法を準備し、不安があれば制作者やSWELLのサポート情報を参照してください。
- 任意の位置で記事を紹介するだけなら投稿リストが使いやすいです。
- 紹介記事が少ない場合はバナーやボタンでも導線を作れます。
- テーマファイルの変更には更新と復旧まで含めた管理が必要です。
- 追加CSSだけで無理に大きく移動させる方法は表示崩れに注意します。
記事スライダーが希望の位置に見えないときの確認手順
設置方法を選んだら、最後に表示状態を順番に確認します。位置の問題に見えても、対象記事の不足、キャッシュ、画像サイズ、別パーツの余白などが原因になっている場合があります。
表示設定とピックアップ対象を確認する
最初に、カスタマイザーで記事スライダーが表示する設定になっているかを確認します。次に、指定したカテゴリーIDやタグのスラッグに該当する公開記事があるかを見ます。対象記事が下書きや非公開になっている場合、想定した枚数がそろわないことがあります。
カテゴリーIDとカテゴリーのスラッグ、タグ名とタグのスラッグは別の情報です。入力欄が求める値を取り違えると、設定画面では保存できても記事が表示されない場合があります。公式マニュアルの画面と現在の管理画面に違いがあるときは、SWELLのアップデート情報も確認してください。
キャッシュと端末ごとの表示を切り分ける
設定変更が反映されないときは、WordPress、SWELL、キャッシュ系プラグイン、サーバー、ブラウザのキャッシュが関係している可能性があります。すべてを一度に操作するのではなく、通常画面とシークレットウィンドウを比較し、ログイン中だけ違うのか、全端末で違うのかを確認します。
スマートフォンだけ位置が崩れる場合は、追加CSSや画像の縦横比、長いタイトルも見直します。画面幅ごとの表示枚数が変わることで、パソコンでは目立たなかった高さの差が表れることもあります。複数の実機がなくても、ブラウザの開発者ツールと手元のスマートフォンを併用すると確認しやすくなります。
更新前にバックアップと変更記録を残す
記事スライダーの調整で追加CSSやPHPを編集する場合は、変更前のコードと画面を保存します。バックアップがあっても、復元方法がわからなければトラブル時に対応しにくいため、利用中のサーバーで復元できる範囲まで確認しておくと安心です。
具体的には、変更日、変更したファイルや設定項目、追加したコード、参考にしたページをメモします。制作を外部へ依頼する場合は、親テーマを直接編集していないか、SWELL更新後の確認を誰が担当するかも共有してください。小さな変更でも記録があると、数か月後の修正が進めやすくなります。
反映されない場合はキャッシュを切り分け、スマートフォンとパソコンの両方で確認します。
コードを編集するときは、変更前のバックアップと作業記録を必ず残してください。
明日すぐ試すなら、まずトップページをスクリーンショットで保存し、カスタマイザーの上下余白を1段階だけ変更します。次に別タブで表示を確認し、改善しなければ元へ戻します。この手順なら、設定を見失いにくく、位置の違和感が余白によるものかを判断できます。
- 表示設定、カテゴリーID、タグスラッグ、公開状態を確認します。
- キャッシュの影響を端末やブラウザごとに切り分けます。
- 画像比率とタイトルの長さも表示位置に影響します。
- コード変更前にはバックアップと復元手順を準備します。
- 変更内容を記録し、更新後にも表示を確認します。
まとめ
SWELLの記事スライダーの標準位置はトップページ上部のメインビジュアル下であり、カスタマイザーでは余白や横幅を調整できます。
最初は上下の余白、表示枚数、対象記事を1項目ずつ見直し、任意の位置に記事を置きたい場合は投稿リストブロックやバナーで代替してみてください。
サイトの目的に合う導線が作れれば、必ずしも標準スライダーを移動する必要はありません。更新しやすさも含めて、無理なく管理できる方法を選びましょう。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
