SWELLでコーポレートサイトを作ってみた！【フッター・プラグイン編】

こんにちは、ゆうじ（＠yuji_sgs_prog）です。

前回の記事に引き続き、SWELLを活用したコーポレートサイト（カフェ風デモサイト）の作り方を解説していきます。

まだ、このシリーズにおける最初の記事を読んでいない方は、先にご覧ください。

＼　最初の記事はこちら　／

フッターのカスタマイズ方法

シンプルなデザインにしてますが、ちょい面倒くさいです。

ただ、手順通りにやっていけば簡単にできるので、サッとやって行きましょう。

まずダッシュボードにて「外観」→「カスタマイズ」をクリック。

カスタマイズに入って、「ウィジェット」→「フッター（PC）1」をクリック。

「フッター（PC）1」にて、「カスタムHTML」を追加していきましょう。

中身に下記のようなコードを追加していきます。（ローカル環境で作成してるのでコードは伏せてあります<(_ _)>）

デモサイトで追加しているコードは、

<div class="footer-img">
  <a href="https://cafe-sample.sgs-prog.com">
    <img src="https://cafe-sample.sgs-prog.com/wp-content/uploads/2022/03/logo.png">
  </a>
</div>

これを記述しています。

「トップページのURL」はドメインから持ってくるだけなので分かりやすいですが、「ロゴのURL」についてはわかりにくいのでちょっと解説します。

ロゴのURL獲得方法

ダッシュボードに戻って、「メディア」→「ライブラリ」をクリック。

ロゴの画像を選択して、「URLをクリップボードにコピー」をクリックすると、「ロゴのURL」が獲得できます。

この方法で自分なりにカスタマイズしてください。

<div class="footer-img">
  <a href="ドメイン">
    <img src="先ほど獲得したロゴのURL">
  </a>
</div>

自分なりにカスタマイズすると、上記のようになるかと思います。

少しコードに関する情報をまとめたので、わからない方いたら気軽に質問していただければと思います。

次にCSSを追加して、フッターのデザインを整えていきましょう。

以下のコードを追加CSSに記述したらOKです。

.w-footer__box {
  padding: 0;
}

.l-footer__foot {
  padding-top: 0;
}

.l-footer__widgetArea {
  padding-bottom: 0;
}

.footer-img {
  text-align: center;
}

最後に、「コピーライト」を記述してフッターは完成です。

カスタマイズから「フッター」をクリック。