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

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

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

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

＼ 　最初の記事はこちら　／

あわせて読みたい

SWELLでコーポレートサイトを作ってみた！【デザインカンプあり】 本記事では配布するデザインカンプを基に、SWELLでのコーポレートサイトの作り方について解説しています。SWELLのコーポレートサイト制作は素晴らしいので、興味ある方は是非ご覧ください。

本記事では、フッターの作成と、プラグインでアニメーションを追加していきます。

今回が完了するとコーポレートサイトが完成するので、気合を入れてやっていきましょう〜！

＼ 　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;
}

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

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

「コピーライトのテキスト」という項目に「2022 cafe sample all rights reserved」と入力して、「公開」をクリック。

以上で、デモサイトのデザインは完成です！

次にプラグインを使って、アニメーションを追加して行きましょう！

プラグインでのアニメーション追加

ここからは、プラグインでアニメーションを追加していきます。

ダッシュボードにて「プラグイン」→「新規追加」をクリック。

「Blocks Animation: CSS Animations for Gutenberg Blocks」と検索し、インストール→有効化していきましょう。

すると、フロントページの編集に「Animation」という項目が追加されます。

「フルワイドセクション」を選択して、「Loading Animations」項目を開きましょう。

デモサイトでは、このようにしています！

これを各セクションごとに設定して、完成です(＊｀･ω･)ゞ

長い間おつかれさまでした！

最後に：SWELLのコーポレートサイト制作は素晴らしい

今回割と大掛かりなことをしたなぁと思います。

これだけの労力を投下しました。

このシリーズを通して伝えたかったことは、”SWELLのコーポレートサイト制作は素晴らしい”ということ。

上記ツイートにもある通り、SWELLでのコーポレートサイト制作は圧倒的にコスパがいいです。

これは、長期インターンでの実務の経験や、個人でこなした案件などの実体験から言えます。

今回のシリーズでは分かりやすく解説するために、ほとんどコードを使わなかったですが、HTML CSSの知識があればもっとデザインの幅は広がります。

プラグインなどを活用すれば、もっとカスタマイズの幅は広がります。（phpファイルをいじって、テーマ機能を超えたカスタマイズにも挑戦したい。）

これから、もっとSWELLを勉強していきたいし、色んなことに挑戦したいと思ってます。

まだまだ勉強不足な僕ですが、もっとSWELLについて有益な情報を発信できるように頑張ります！

というわけで今回は以上とします。最後まで読んでいただきありがとうございました。

＼ 　SWELL公式サイトはこちら　／