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

こんにちは、ゆうじです。

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

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

\  最初の記事はこちら /

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

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

本記事を書いている人
  • 22歳国立理系大学生(機械学習をテーマに研究)
  • Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
  • Twitterのフォロワー数は1500名ほど
  • 現在は法人のWebマーケティングの仕事を受けています

\  SWELL公式サイトはこちら /

目次

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

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

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

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

Wordpressの外観→カスタマイズ

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

SWELLのウィジェットカスタマイズ
SWELLのフッター(PC)1

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

SWELLのフッター(PC)1にカスタムHTMLを追加

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

SWELLのフッター(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獲得方法

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

Wordpressのメディア→ライブラリ

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

Wordpressで画像のURLを取得

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

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

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

少しコードに関する情報をまとめたので、わからない方いたら気軽に質問してください\(^o^)/

次に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」と入力して、「公開」をクリック。

SWELLでコピーライトを記述

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

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

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

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

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

Wordpressのプラグイン→新規追加

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

Blocks Animation: CSS Animations for Gutenberg Blocksをインストール

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

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

Loading Animations

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

Loading Animationsの設定

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

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

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

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

本シリーズを通してやったこと
  • デザインカンプあり
  • 5記事を通して、10000文字弱・100枚以上の画像を使って解説
  • 期間は3週間ほど

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

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

このツイートにもある通り、SWELLでのホームページ制作は圧倒的にコスパがいいです。

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

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

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

そういったわけで、SWELLを活用したコーポレートサイト制作に可能性を感じています。

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

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

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

\  SWELL公式サイトはこちら /

Thank you for sharing my post !!
  • URLをコピーしました!
目次