【ペライチ】フッター下の空白を削除するには


ペライチとは

ホームページを簡単に作れるWebサービス。
ブロック組み替えで作成できて、SEOはページから自動引用できます。
ショッピングカート機能も有料オプションで使えます。


そのペライチで作ったページ。
フッター(ページ末)の下に、空白ができてしまいました。
下図、赤枠が空白。



ページを作り直せば、空白はないだろうと思いつつ。
作り直しは手間なので「タグの埋め込み」で解消しました。
※有料オプションご利用の必要があります

ページ下部の空白を消す手順


1. ペライチにログイン

 編集したいページの「ページ編集」クリック

2. 編集画面が表示されます

2-1. 左メニュー「ページ情報編集」クリック


2-2. 左メニュー「タグの埋め込み」クリック

 「headタグ内の埋め込み」に下記を入力して保存

<style>
.theme-modern .s_footer-peraichi, 
.theme-modern .s_footer-peraichi-fix {
    position: absolute;
    width: 100%;
}
.s_footer-peraichi {
    margin-top: 40px;
    padding-top: 60px;
    text-align: center;
    font-size: .7272727273em;
}
</style>


3. 編集画面の左メニュー「プレビュー」クリック

 ✅フッター下の空白が表示されていない
 ✅ページ全体のレイアウト崩れがない
 確認したら左メニュー「保存する」クリック

空白が消えました!

タグの作り方

前述のタグでは解決しなかったり、自分で解決法を知りたかったり。
CSS知識をある程度もってらっしゃるなら、手順は簡単。
  1. ブラウザ Google Chromeで原因を特定
  2. テスト的にタグを入れて解決
  3. テスト的に入れたタグをコピー、ペライチのタグに貼り付け
1. ブラウザ Google Chrome を起動
 Windows機なら「F12」キー押下。
 あるいは画面で右クリックしてメニュー「検証」(Ctrl+Shift+l)クリック。
 右側に「検証」画面が表示されます。


左右それぞれクリックすると、該当箇所がハイライト表示されます。
右側「検証」のハイライト箇所に、タグを入れてみて‥で解決法を探ります。

フッター下部の空白はよくある現象

画面いっぱいのページ構成では、よくある現象です。
ページ全体で囲み、その中にフッター。
「position」タグで解決する場合が多いです。