SWELLでは、スマホ表示時のレイアウトは通常、

記事
↓
サイドバー
↓
フッター直前ウィジェット
↓
フッター

という順番になっています。

しかし、CTA（お問い合わせ・バナー・キャンペーンなど）を記事の直後に表示したい場合は、

記事
↓
フッター直前ウィジェット（CTA）
↓
サイドバー
↓
フッター

という流れの方がコンバージョン率の向上も期待できます。

今回は、フルワイドを維持したままこの並びへ変更する方法をご紹介します。

目次 [ close ]
  1. JavaScriptでサイドバーだけ移動する
    1. ポイント
  2. CSSを追加する
  3. 完成イメージ
  4. なぜラッパーに「l-container」を使うのか？
  5. この方法のメリット
  6. まとめ

JavaScriptでサイドバーだけ移動する

SWELL設定の

「高度な設定」→「</body> 直前コード」

へ以下を追加します。

<script>
document.addEventListener('DOMContentLoaded', function () {
  if (window.innerWidth > 959) return;

  const sidebar = document.getElementById('sidebar');
  const beforeFooter = document.getElementById('before_footer_widget');

  if (!sidebar || !beforeFooter) return;

  const wrapper = document.createElement('div');
  wrapper.className = 'l-container';

  wrapper.appendChild(sidebar);

  beforeFooter.after(wrapper);
});
</script>

ポイント

最初は「フッター直前ウィジェット」を移動しようと考えましたが、この方法ではフルワイドが解除されてしまいます。

そこで発想を変え、

  • フッター直前ウィジェットはそのまま
  • サイドバーだけ移動する

という方法にしました。

CSSを追加する

続いて「追加CSS」に以下を追加します。

@media (max-width:959px){

  #before_footer_widget + .l-container{
      margin:40px auto 50px;
  }

  #before_footer_widget + .l-container #sidebar{
      width:100%;
      margin:0;
  }

}

これでスマホ表示でも自然な余白になります。

完成イメージ

変更前

記事
↓
サイドバー
↓
フッター直前ウィジェット
↓
フッター

変更後

記事
↓
フッター直前ウィジェット（CTA）
↓
サイドバー
↓
フッター

なぜラッパーに「l-container」を使うのか？

最初は

wrapper.className = 'l-content l-container';

としていました。

しかし、.l-content は記事とサイドバーを横並びにするレイアウト用クラスです。

今回はサイドバーだけを配置するため、このクラスを付けると余白やレイアウトが不自然になってしまいました。

そこで

wrapper.className = 'l-container';

だけに変更することで、

  • コンテンツ幅
  • 左右余白

だけを維持でき、自然な見た目になりました。

この方法のメリット

  • PHPを編集しなくて済む
  • 子テーマのテンプレートを変更しない
  • SWELL本体のアップデートの影響を受けにくい
  • フッター直前ウィジェットのフルワイド表示を維持できる
  • スマホだけ表示順を変更できる

まとめ

SWELLではレイアウトの表示順を簡単に変更できませんが、JavaScriptでサイドバーだけを移動するという方法なら、安全かつシンプルに実現できます。

CTAを記事直後へ配置したい方や、コンバージョン率を改善したい方は、ぜひ試してみてください。