【SWELL】フッター周りの作り方やカスタマイズ方法を解説

こういった悩みにお答えします。

本記事を読むことで以下の作り方やカスタマイズ方法が行えるようになります。

デモ

SWELLでフッター周りの「フッター直前」と「フッター（PC）1〜3」を作り込む

「フッター直前」を作り込む

以下の赤枠部分がフッター直前です。

今回は、事前に用意したブログパーツを使います。

「呼び出しコード」をコピーする

管理画面メニューから、「ブログパーツ」を選択します。

ブログパーツから、「呼び出しコード」をコピーします。

ブログパーツでは以下を作りました。

「呼び出しコード」をペーストする

管理画面メニューから、「外観」＞「ウィジェット」を選択します。

利用できるウィジェットから、「カスタムHTML」を「フッター直前」にドラッグ&ドロップします。

フッター直前に挿入したカスタムHTMLを開いて、先ほどコピーした呼び出しコードをペーストします。

これで表示させるとフッター直前にブログパーツが設置されています。

「フッター（PC）1〜3」を作り込む

以下の赤枠部分がフッター（PC）1〜3です。

左から「フッター（PC）1」→「フッター（PC）2」→「フッター（PC）3」と並んでいます。

フッター（スマホ）にウィジェットを挿入すると、フッター（PC）1〜3より優先されてタブレットやスマホで表示されます。

詳しい作り方やカスタマイズ方法は以下の記事で解説しています。

SWELLでフッター周りの「SNS情報」を作り込む

赤枠部分がSNS情報です。

SNS情報を入力する

管理画面メニューから、「外観」＞「カスタマイズ」を選択します。

サイドバーから、「SNS情報」を選択します。

SNSリンク設定から、ページURLを入力します。

SNSアイコンリストを表示させる

サイドバーから、「フッター」を選択します。

フッターを下へとスクロールすると「その他の設定」が現れますので、フッターにSNSアイコンリストを表示するにチェックを入れるとSNSアイコンリストが表示されます。

SWELLでフッター周りの「メニュー」を作り込む

赤枠部分がフッターメニューです。

管理画面メニューから、「外観」＞「メニュー」を選択します。

以下の赤枠を参考にメニューを作ります。

これで表示させるとフッターメニューが設置されています。

詳しい作り方やカスタマイズ方法は以下の記事で解説しています。

SWELLでフッター周りの「コピーライト」と「カラー」を作り込む

コピーライト設定

フッターを下へとスクロールすると「コピーライト設定」が現れますのでコピーライトのテキストを入力すると表示されます。

カラー設定（背景色と文字色）

フッターの背景と文字色

左右の赤枠が対応しています。

ウィジェットエリアの背景と文字色

左右の赤枠が対応しています。

「フッター」と「フッター直前ウィジェット」の間の余白をなくす

以下の赤枠が「フッター」と「フッター直前ウィジェット」の間の余白です。

フッターを下へとスクロールすると「その他の設定」が現れますので「フッター」と「フッター直前ウィジェット」の間の余白をなくすにチェックを入れると余白が無くなります。

今回は以上です。