フッター・フッター直前ウィジェット上の余白調整

実装説明

フッター上と、フッター直前ウィジェット上の妙な隙間。ありますよね。

「会社概要を見る」ボタンとオレンジ帯の間、およびオレンジ帯と濃紫フッター(About Us・Service・Blog)の間に不要な白い余白が生じているレイアウトの悪い例

これを省くために、制作の度にCSSを書いてました。
毎回セレクタを調べても大した手間ではないのですが…大した手間ではないからこそ、恥ずかしながら毎回調べて書いてしまっていたのです。

しかも、CSSへの理解度も制作者によって千差万別です。
せっかくノーコードでも良いサイトが作れるSWELL、ここのコーディングに時間をかけるよりも、デザインやコンテンツ内容のブラッシュアップに工数をかけたいですよね!!

このコードは、主に以下の問題を解決するために作成しました。

フッター直前の空白

メインコンテンツエリア(#content)や、フッター直前ウィジェット(#before_footer_widget)には、テーマ独自のデフォルトマージンが設定されています。背景色を敷いてフッターとシームレスに繋げたい場合、この空白がデザインを分断してしまいます。

設定では届かない箇所の補正

カスタマイザーでの余白設定はページ全体に影響しますが、フッター直前ウィジェットの上下マージンなど、細かいパーツが持つ余白をピンポイントで、かつ全ページ一括でゼロにしたい場合には、CSSによるリセットが最も確実です。

固定ページなどで余白をリセットする一方で、投稿ページ(ブログ記事)には、あえてSWELL標準の余白を再定義してあります。
これにより、特定のページをフッターと密着させつつ、ブログ記事の本来の読みやすさはそのまま維持されます。

目次

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

\お申込みはこちら/

コードスニペットをオンにします。

アドオン機能導入方法

STEP
プラグイン「Code Snippets」を検索します。
WordPressの「プラグインを追加」画面で検索欄に「code snippets」と入力し、Code Snippetsプラグインが検索結果の先頭に表示されている

管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。

STEP
プラグイン「Code Snippets」をインストール・有効化します。
「Code Snippets」プラグインの紹介画面で、サイトにコードを簡単に追加できる機能と開発者情報が記載されている。

このプラグインを「今すぐインストール」「有効化」します。

STEP
コードスニペットをダウンロードします。

該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。

Code Snippets (コードスニペット)とは?

インポート/エクスポートが容易な、コード管理プラットフォームです。

「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ(トグル)のオンオフで導入できる神ツールです。

STEP
コードスニペットをインポートします。
WordPress管理画面のメニューにある「スニペット」項目から「インポート」を選択する場面が表示されている。
重複スニペットの取り扱い設定と、JSONファイルをドラッグ&ドロップでアップロードする操作画面が表示されている。

管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。

重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。

アップロードされたスニペットを選択し、「Import Selected」ボタンからインポート操作を実行する確認画面。

インストールするファイルにチェックを入れ、「Import Selected」を押します。

STEP
コードスニペットをオンにします。
WordPress管理画面のサイドメニューにある「スニペット」の項目が青く選択されている状態。「すべてのスニペット」「新規追加」「インポート」「設定」などのサブメニューが表示されています。
Code Snippetsプラグインで登録されたスニペット一覧が表示され、トグルスイッチで各スニペットの有効・無効を切り替えられる画面。

管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ(トグル)をオンにします。

目当ての機能が有効化されているか確認します。

オンにするだけで完了!

スニペットをオンにしたら、サイトを確認してみましょう!

全てのサイトにとりあえず実装してもいいくらいの必須カスタムです!ぜひご活用ください!!


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次