SWELLでコーポレートサイトを作ってみた!【メインビジュアル編】

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

前回に引き続き、SWELLでコーポレートサイト(カフェ風デモサイト)の作り方を解説していきます。(まだ前回の記事を見てない方は、先にご覧ください。)

\  前回の記事はこちら /

本記事では、コーポレートサイト(カフェ風デモサイト)の「メインビジュアル」を作成していきます。

SWELLのメインビジュアルにおけるカスタマイズが知りたいだけの方でも、参考になると思うので、ぜひ最後まで見ていってください!

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

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

目次

メインビジュアルとは

メインビジュアルとは

メインビジュアル」とは、ホームページに訪れた際に、最初に表示される部分の「大きな写真やイラスト」のことです。

また、最初に表示される全体部分を「ファーストビュー」と定義されています。

SWELLでの「メインビジュアル」のカスタマイズは、

  • 画像
  • スライド(画像1~5枚 | アニメーション設定可能)
  • 動画

などなど、基本的なことは対応しています。

ここで説明すると長くなるので、気になる方はSWELLのマニュアルを一通り見ておきましょう。

メインビジュアルのカスタマイズ方法

前回の状態から、メインビジュアルをカスタマイズしていきましょう。

メインビジュアルのカスタマイズ方法
  1. 表示設定変更
  2. 各スライドの設定
  3. 画像スライダーの設定
  4. 記事スライダーの設定
  5. CSSの追加

順番に解説していきます。

1. 表示設定変更

まずカスタマイズに入って、「トップページ」→「メインビジュアル」をクリック。

ここで、メインビジュアルの設定をしていきます。

SWELLのメインビジュアル設定

表示設定を下のようにしていきましょう。

SWELLのメインビジュアル表示設定

デモサイトではこのような設定にしてますが、各々で好みの設定に変えていってもOKです<(_ _)>

2. 各スライドの設定

次に各スライドの設定をしていきます。

SWELLのメインビジュアルにおける各スライドの設定

スライド[1]では、このように設定していきましょう。

また、メインテキスト[1]の内容は、

<div class="main-text">しあわせを感じる<br>ひとときを<br>カフェサンプルで</div>

このように設定してます。

デフォルトで「さぁ、始めよう」が入ってると思うのですが、それは消してもOKです。

SWELLのメインビジュアルにおける各スライドの設定[2]
SWELLのメインビジュアルにおける各スライドの設定[3]

スライド[2]、[3]も同様に設定していきましょう。

3. 画像スライダーの設定

各スライドの設定が完了したら、「画像スライダーの設定」ができるようになってます。

デモサイトでは、上記のような設定になってます。(ここの部分も、設定を自分好みに変えていってもOKです。)

4. 記事スライダーの設定

カスタマイズの「トップページ」→「記事スライダー」をクリック。

設置しない」を選択しましょう。

SWELLの記事スライダー
SWELLの記事スライダー設定

これで、記事スライダーを非表示にすることができます。

5. CSSの追加

最後に、メインテキストの部分をCSSで調整していきます。

カスタマイズの「追加CSS」をクリック。

SWELLの追加CSS設定

このようにCSSを追加して、「公開」をクリック。

SWELLでCSSの追加

また、追加するCSSの内容は、

.main-text {
  text-align: left;
  font-size: 40px;
  position: relative;
  top: 150px;
}

@media screen and (max-width: 1100px) {
  .main-text {
    font-size: 36px;
    top: 130px;
  }
}

@media screen and (max-width: 959px) {
  .main-text {
    font-size: 32px;
    top: 115px;
  }
}

@media screen and (max-width: 600px) {
  .main-text {
    font-size: 24px;
    top: 60px;
  }
}

このように記述してます。(レスポンシブ調整もされてあります。)

SWELLのメインビジュアル完成形

このような感じになればOKです(*`・ω・)ゞ

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

次回はコンテンツをカスタマイズしていきます!

\  次回の記事はこちら /

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