こんにちは、ゆうじ(@yuji_sgs_prog)です。
前回に引き続き、SWELLでコーポレートサイト(カフェ風デモサイト)の作り方を解説していきます。
まだ、このシリーズにおける最初の記事を見てない方は、先にご覧ください。
\ 最初の記事はこちら /

本記事では、フッターの作成と、プラグインでアニメーションを追加していきます。
今回が完了するとコーポレートサイトが完成するので、気合を入れてやっていきましょう〜!
- 22歳国立理系大学生(機械学習をテーマに研究)
- Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
- SWELL利用歴2年(ブログ運営、コーポレートサイト制作)
- 現在は法人のWebマーケティングの仕事を受けています
\ 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のコーポレートサイト制作は素晴らしい


今回割と大掛かりなことをしたなぁと思います。
- デザインカンプあり
- 5記事を通して、10000文字弱・100枚以上の画像を使って解説
- 期間は3週間ほど
これだけの労力を投下しました。
このシリーズを通して伝えたかったことは、”SWELLのコーポレートサイト制作は素晴らしい”ということ。
上記ツイートにもある通り、SWELLでのコーポレートサイト制作は圧倒的にコスパがいいです。
これは、長期インターンでの実務の経験や、個人でこなした案件などの実体験から言えます。
今回のシリーズでは分かりやすく解説するために、ほとんどコードを使わなかったですが、HTML CSSの知識があればもっとデザインの幅は広がります。
プラグインなどを活用すれば、もっとカスタマイズの幅は広がります。(phpファイルをいじって、テーマ機能を超えたカスタマイズにも挑戦したい。)
そういったわけで、SWELLを活用したコーポレートサイト制作に可能性を感じています。
これから、もっとSWELLを勉強していきたいし、色んなことに挑戦したいと思ってます。



まだまだ勉強不足な僕ですが、もっとSWELLについて有益な情報を発信できるように頑張ります!
というわけで今回は以上とします。最後まで読んでいただきありがとうございました。
\ SWELL公式サイトはこちら /