悩む人フッター周りの作り方やカスタマイズ方法が分からないので教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
本記事を読むことで以下の作り方やカスタマイズ方法が行えるようになります。
- フッター直前
- フッター（PC）1〜3
- SNSアイコンリスト
- フッターメニュー
- コピーライト
- フッター周りの背景色
デモ
News
以下にブロックエディタで使える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でフッター周りの「コピーライト」と「カラー」を作り込む
コピーライト設定
フッターを下へとスクロールすると「コピーライト設定」が現れますのでコピーライトのテキストを入力すると表示されます。
カラー設定（背景色と文字色）
フッターの背景と文字色
左右の赤枠が対応しています。
ウィジェットエリアの背景と文字色
左右の赤枠が対応しています。
「フッター」と「フッター直前ウィジェット」の間の余白をなくす
以下の赤枠が「フッター」と「フッター直前ウィジェット」の間の余白です。
フッターを下へとスクロールすると「その他の設定」が現れますので「フッター」と「フッター直前ウィジェット」の間の余白をなくすにチェックを入れると余白が無くなります。
今回は以上です。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。