セクション / CTA・擬似フッター
幅100%表示
【要素移動】

該当セクションをコンテンツエリア外（本来の共通フッターの位置）に移動させ、
サイドバーがある場合でも100%表示を実現。

【※追記※】
これまではコンテンツエリアの下にのみ配置ができましたが、
コンテンツエリアの上（メインビジュアルの下）に配置することも可能になりました。

MV下に横幅100%
デモ

⇧デモ

本来ここにあるセクションがコンテンツ外へ移動し、幅100%を実現

追加可能パーツ 変更可能 変更NG 複数設置 ページ複製・
クリップボード使用可否

（セクションに設置可能なパーツ）

  • 行
  • カラム
  • デザインパーツ
  • デザインに合わせて変更可能
  • MV下 / フッター上に移動可能※1
  • セクションの
    移動先※2
 × 〇
※留意事項

※1：

  • 「js-move_top_sec」→コンテンツエリアの上（メインビジュアル下）にセクションが移動します。
  • 「js-move_bottom_sec」→コンテンツエリアの下にセクションが移動します。


※2：専用クラスを付与したセクションが、<div class="wrapper"></div>の外に移動します。

構造図

デモのパーツの構造を説明しています。

 

  • 専用クラスを付与したセクションが、<div class="wrapper"></div>の外に移動します。

    • 「js-move_top_sec」→コンテンツエリアの上（メインビジュアル下）にセクションが移動します。

    • 「js-move_bottom_sec」→コンテンツエリアの下にセクションが移動します。

  • これにより、サイドバーがある場合の幅100%表示に対応します。
    ※編集画面ではJavaScriptが効かないため、サイドバー表示時の幅が公開画面と異なって見えるのでご注意ください。
  • 更新性を考慮し、疑似フッター内のサイトマップエリアとコピーライトエリアを共通パーツで作成しています。
擬似フッター【要素移動】構造図

設定方法

  • CSSをカスタムCSSに記述。
  • JavaScriptをデモ通りの位置（疑似フッター内の一番下）に配置。
  • クラス名をデモとあわせる。
  1. セクションを作成し、必要に応じてクラス名「width100_sec」を追加。
  2. 上記セクションの下に疑似フッター用セクションを作成し、スタイル調整用のクラス名「footer_sec」を追加。
  3. 疑似フッター用セクション内で、行（row）を作成し、新規共通パーツを配置。
    ▼以下、共通パーツ内での作業▼

    ※以下の流れはデモの例です。デザインによって配置パーツなど異なるかと思うので、必要に応じてクラス名の変更や用途にあったパーツを使用してください。
    • 上記共通パーツ内で新規行（row）を作成し、クラス名「ftLink_row」を追加。
    • 上記行（row）を4分割し、一番左のカラム（col）にクラス名「info_col」を追加。2~4カラム目にはクラス名「site_map_col」を追加。
    • カラム「info_col」の中にロゴ用の画像パーツを配置し、クラス名「footer_logo_img」を追加。
    • カラム「site_map_col」の中にリッチテキストパーツを配置し、クラス名「site_map_list」を追加。リスト機能を使用してそれぞれリンクを設定。
  4. 共通パーツの行（row）の下に、新規行（row）を作成し、クラス名「page_top_row」を追加。中にページトップアイコン用の画像を配置する。
  5. 更に下にコピーライト用の新規行（row）を作成し、クラス名「foot-copyright_row」を追加。
    上記行（row）内に新規共通パーツを挿入し、共通パーツ内にリッチテキストパーツを配置してクラス名「foot-copyright」を追加。
  6. 最後に、移動させたいセクションにクラス名「js-move_top_sec / js-move_bottom_sec」を追加。このクラスを付与した要素がコンテンツ外に移動し、幅100%表示されます。
    • （CTA含む）セクション
    • 疑似フッター用セクション

 

  • 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。

注意点

  • 疑似フッターで使用している共通パーツ内のリッチテキストは時々意図しない挙動になり崩れる恐れがあるので注意してください。
    ※半角スペースが入っていると崩れたりなど
     
  • 要素をtheme-fo-baseより外に移動すると構造が変わるため、本来のネストでは動かなくなる可能性があるのでセクションから直接紐付けるなどのCSS調整をしてください。
    また、fOのテーマCSS（fo-base.css）が当たらない場合もあり、CSSの書き方が通常と異なる場合があります。
     
  • JavaScriptの影響により表示順序が変わるのを防ぐため、コピーライトは擬似フッター用セクション内の一番下に入れてください。

JS・CSS・編集画面用CSS

  • JS
  • CSS
  • 編集画面用CSS

JavaScript

JSをコピーする

2025-05-16更新（v1.1.0）

<script>
/* ------------------------------------
CTA・擬似フッター幅100%表示【要素移動】）v1.1.0
------------------------------------ */
'use strict';

document.addEventListener('DOMContentLoaded', function() {

/*------------- 変数定義 START -------------*/
const move_top = document.querySelectorAll('.js-move_top_sec');/* MV下に移動させるセクション */
const move_bottom = document.querySelectorAll('.js-move_bottom_sec');/* コンテンツ下に移動させるセクション */
const wrapper = document.querySelector('.wrapper');
const foot = document.querySelector('.foot');
/*------------- 変数定義 END -------------*/

/*------------- MV下への処理 -------------*/
move_top.forEach(function(el) {
wrapper.parentNode.insertBefore(el, wrapper);
});

/*------------- コンテンツ下への処理 -------------*/
move_bottom.forEach(function(el) {
if (foot) {
wrapper.parentNode.insertBefore(el, foot);
} else {
wrapper.parentNode.appendChild(el);
}
});
});

/* ------------------------------------
CTA・擬似フッター幅100%表示【要素移動】）END
------------------------------------ */
</script>

CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。

CSSをコピーする

2023-07-21更新（v1.0.0）

/*----- CTA・擬似フッター幅100%表示 START v1.0.0-----*/
//要素移動させる場合・させない場合でも効くように両方指定
/* CTA */
.theme-fo-base .wrapper .contents:is(section,section[data-designpart-id]:not(:root:root:root:root)).cta_sec,
.width100_sec {
.inner {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 20px;
}
}
/* 疑似フッター */
.theme-fo-base .wrapper .contents:is(section,section[data-designpart-id]:not(:root:root:root:root)).footer_sec,
.footer_sec {
padding: 0;
.inner {
padding: 0;
.row {
.col {
padding: 0;
.component {
&.cta {
margin: 0;
padding: 0;
.cta-row {
margin: 0;
padding: 0;
&.ftLink_row {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px;
@include breakpoint-msp {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 40px 20px;
}
//各colの幅やスタイル部分
.cta-column {
margin: 0;
padding: 0;
//ロゴの部分
&.info_col {
@include breakpoint-pc {
width: 28% !important;
}
@include breakpoint-pro_s {
width: 100% !important;
}
@include breakpoint-msp {
padding: 0 0 20px;
}
}
//サイトマップ
&.site_map_col {
@include breakpoint-pc {
width: calc(72% / 3) !important;
}
@include breakpoint-pro_s {
width: 33% !important;
}
@include breakpoint-msp {
margin: 0;
padding: 0;
}
@include breakpoint-tb {
width: 33% !important;
margin: 10px 0;
}
&:empty {
@include breakpoint-msp {
display: none;
}
}
& + .site_map_col {
@include breakpoint-ssp {
margin-top: 10px;
}
}

}
.component {
&.text {
@include breakpoint-msp {
padding: 10px 0;
}
}
&.richtext {
//サイトマップ
&.site_map_list {
ul {
list-style: none;
margin: 0;
li {
list-style-type: none;
font-size: 16px;
// color: $footCont_text_color;//旧CMS用（不要であれば削除）
color: var(--fo-text-main-color);//新CMS用（不要であれば削除）
// line-height: $base_line_height;//旧CMS用（不要であれば削除）
line-height: var(--fo-text-line-height);//新CMS用（不要であれば削除）
&:not(:first-child) {
margin: 10px 0 0;
}
a {
display: block;
color: inherit;
line-height: inherit;
text-decoration: none;
padding: 0 5px;
&:hover {
background: transparent;
opacity: $hover_opacity;
}
}
}
}
}
}
&.image {
// フッターロゴ
&.footer_logo_img {
margin: 0;
img {
max-width: 170px !important;
}
}
}
}
}
}
}
}
}
}
/* ページトップアイコン */
&.page_top_row {
@extend %page_top;
}
/* コピーライト */
&.foot-copyright_row {
.col {
.component {
&.cta {
.cta-row {
.cta-column {
margin: 0;
padding: 0;
.component {
&.richtext {
&.foot-copyright {
@extend %copyright_custom;
}
}
}
}
}
}
}
}
}
}
}
}
/*----- CTA・擬似フッター幅100%表示 END -----*/

編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。

CSSをコピーする

2024-09-17更新（v1.0.0）

/*-- CTA・擬似フッター幅100%表示 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
&.footer_sec {
.inner {
padding: 20px;
.row {
&.page_top_row {
.component {
&.image {
position: static;
&::before {
content: "ページ右下に固定されます";
background: #0987d4;
color: #fff;
position: absolute;
bottom: -24px;
left: 0;
padding: 0 5px;
}
}
}
}
}
}
}
}
/*-- CTA・擬似フッター幅100%表示 編集画面用 END --*/

本来ここにあるセクションがコンテンツ外へ移動し、幅100%を実現

⇩デモ

CONTACT

●●●でお悩みの方は、お気軽にご相談ください(H2)

ご不明な点はお気軽に
お問い合わせください

お問い合わせ

●●のお役立ち資料は
こちらから

資料ダウンロード

お電話でのお問い合わせはこちら

03-1234-5678

平日 00:00~00:00

ページトップへ戻る

© Basic Inc. All Rights Reserved.

※サイドバー表示時の
フッター幅 確認用

カテゴリ一覧

タグ一覧