【SWELL】ホームページの作り方②~サンプルサイトで固定ページ解説~

ホームページの作り方 アイキャッチ画像

今回の記事は、前回の続編として「」でのホームページ制作で固定ページコンテンツの作り方を解説!

D-AMUS

第1弾では、メインビジュアル・ヘッダー・フッターの制作手順をご紹介しました!

\ 前回の記事を見たい方はこちらからご覧ください /

この記事を見ていただいているということは、

  1. 前回の続編が見たい
  2. SWELLでホームページを作りたい
  3. SWELLをクライアント案件で活用したい

というご要望をお持ちだと思います。

今回この記事ではホームページを制作するwebデザイナー初心者向けにSWELLでのホームページの作り方を徹底的にお伝えしていきます。

クライアントワークでSWELLを使いたい方は、是非参考にしてください!

目次

SWELLだけのブロックも使用!固定ページでのトップページ制作手順

前回同様、数年前にSWELLでサンプル制作したトップページのみのwebサイトで詳しい作り方を解説します。

今回はメインビジュアル下のコンテンツ部分を紹介します!

サンプルサイトを見る ▶

D-AMUS

では、早速始めましょう!

固定ページをトップページへ設定

前回、初期設定としてトップページに固定ページを表示する設定は済んだ前提で解説しました。

念のためここでもう1度手順を簡単に紹介します。

設定」→「表示設定」をクリック。

ホームページの表示で「固定ページにチェックを入れ、トップページ用に作成した固定ペ-ジを選択しましょう。

そうすることで、これから制作する固定ページがトップページのコンテンツとして表示されます。

サイト型トップページの作り方2-1
表示設定をクリック
サイト型トップページの作り方2-2-1
固定ページを選択

もしくは「外観」→「カスタマイズ」→「WordPress設定」→「ホームページ設定」からも選択できます。

コーポレートサイト固定ページ制作手順 準備

固定ページの作成手順を詳しく確認したい場合はこちらを参考にしてください!

1. ギャラリーの作成

コンテンツのトップ部分に今回「ギャラリー」を掲載。

下記の3つを使用して、コンテンツを制作しました。

  • フルワイドブロック
  • ギャラリーブロック
  • アニメーションプラグイン:「Blocks Animation: CSS Animations for Gutenberg Blocks」

① フルワイドブロックの追加

今回のサイトはコンテンツごとにいくつかフルワイドブロックを活用しています。

どのコンテンツでもフルワイドブロックを「サイト幅」に設定しています。

詳細は下記画像を参考にしてください。

背景色は、前回設定した背景色の黒を使用。

コーポレートサイト固定ページ制作手順1-1-1

\ SWELLのおすすめブロック /
フルワイドブロックの詳しい使い方はこちらを参考にしてください!

② ギャラリーブロックの追加

ギャラリー部分を広く見せるため、フルワイドブロックの中にギャラリーを追加します。

コーポレートサイト固定ページ制作手順1-2-1

ギャラリーブロックをクリックすると、メディアライブラリに移動するので、ギャラリーに追加する写真を選択します。

今回は手順解説用に、サンプルサイトのギャラリーとは別に作成。

仮で6枚写真選択しています。

コーポレートサイト固定ページ制作手順1-2-2

選択後に右下の「ギャラリーを作成」をクリック

ここで、写真の追加やキャプションの入力ができます。

コーポレートサイト固定ページ制作手順1-2-3

この手順は、ギャラリー作成後でもできます

この時点で変更がある場合は、変更しましょう。

今回は何も変更せず右下の「ギャラリーを挿入」をクリックします。

そうすると、下記画像のようにギャラリーが作成されます!

コーポレートサイト固定ページ制作手順1-2-4
ギャラリー完成例

ギャラリー作成後に写真の追加や変更をしたい場合は「ギャラリーブロックをクリック」→「追加」で先程の編集画面に移動できます。

コーポレートサイト固定ページ制作手順1-2-6

画像を1枚だけ差し替えたい場合や順番変更は、エディタ上でも可能

ドラッグ順番の入れ替えができます。

コーポレートサイト固定ページ制作手順1-2-5
画像差し替え例

また、画像単体をクリックすると、通常の画像差し替えと同様置換で変更できます。

ギャラリーの表示設定も行いましょう。

右側のブロックメニューから行いますが、ここで重要なのが「画像を切り抜いて調整にチェックを入れること。

ここのチェックを入れることで、写真の高さを自動で調整し、きれいに見せてくれます。

コーポレートサイト固定ページ制作手順1-2-7

カラムは今回の例では横3列なので、「3」に設定。

サンプルサイトのギャラリーは、全媒体共通の2列なので「2」と入力しています。

D-AMUS

ここまででギャラリー作成自体は終了です!
次は、アニメーションの設定をするので、不要な方は飛ばしてください!

③ プラグイン”Blocks Animation”のインストールとアニメーションの設定

最初に紹介したプラグイン「Blocks Animation」を使ってギャラリーをゆっくりふわっと表示させてみましょう。

実際の表示はサンプルページをご覧ください。

アニメーションプラグインは、下記画像のプラグインから「新規プラグインを追加」で検索すると出てきます。

プラグインでのOGP画像の設定方法1-1

インストールして「有効化」しましょう。

プラグイン「Blocks Animation」インストール手順

プラグインのインストール・有効化をすると、右側のブロックメニューの中に「アニメーション」という表記が追加されます。

アニメーションで動きを付けたいブロックを選択すると、「アニメーション」メニューで下記画像のように種類や速度を選択できます。

コーポレートサイト固定ページ制作手順1-3-1

サンプルサイトでは、ギャラリーブロックに上記赤枠のアニメーションを設定しています。

すごく簡単!

D-AMUS

はい、これで完成です!アニメーションの種類はたくさんありますが、過度な使用はページを見づらくしてしまうこともあります。デザインにもよりますが、ポイントになる部分で使用したり、全体を通して使用するならアニメーションの種類や速度を統一したりすると良いでしょう!

2. コンテンツの背景画像設定

今回は、3箇所に背景画像を設定しています。

どの部分もフルワイドブロックで背景画像を設定していますので、3箇所まとめて紹介します。

また、コンテンツ内の要素にアニメーションやリッチカラムブロックを使用。

  • フルワイドブロック×背景画像の設定
  • リッチカラムブロック
  • アニメーションプラグイン:「Blocks Animation: CSS Animations for Gutenberg Blocks」

① フルワイドブロックで背景画像の追加

まずは、ギャラリー下のこの部分。

サンプルサイトコンテンツイメージ画像1
サンプルサイト例

ここは、フルワイドブロックの背景画像に文字を載せただけのデザイン。

まず、背景にしたい画像をメディアライブラリから選択し、位置を焦点ピッカーで調整しています。

次に、オーバーレイカラーには、背景色と同じ色を不透明度70%で使用。

下記に参考画像を掲載します。

コーポレートサイト固定ページ制作手順2-1-1
背景画像設定
コーポレートサイト固定ページ制作手順2-1-2
カラー設定
SWELLのショートコードなら指定の場所で”スマホだけ改行”できる

今回、スマホ表示は一部文節で改行しています。

サンプルサイトですので、スマホでも1文をきれいに見せたいと思い…

サンプルサイトコンテンツイメージ画像1 スマホ表示
サンプルサイトスマホ表示例

SWELLには、スマホだけ改行できるショートコード」があるので、それを使用しています。

手順としては、改行したい場所にカーソルを合わせ、下記画像のショートコードを呼び出すだけ!

コーポレートサイト固定ページ制作手順2-1-3
ショートコード例

ちなみに上記画像からわかるように、パソコン(PC)だけ改行もできます

そして、下記画像の部分も、上記と同じ背景画像・カラー設定で、位置だけ焦点ピッカーで変更しています。

サンプルサイトコンテンツイメージ画像2
サンプルサイト例

フッター直前のエリアにも、同様の手順で背景画像を追加しています。

こちらは不透明度だけ80%へ変更しています。

サンプルサイトコンテンツイメージ画像3
サンプルサイト例
D-AMUS

不透明度などは、特別決まりがあるわけではないので、今回の設定を紹介しました。今回でいえば、テキストの白文字が読みやすい程度に調整しています。

以上、3箇所を紹介させていただきました。

今回3箇所とも背景画像を固定させていませんが、スクロール時に背景を固定させることもできます。

フルワイドブロックで背景画像を固定させるならこちらを参考にしてください!

② リッチカラムブロックで画像の追加

先程、画像掲載した「お部屋のご紹介」コンテンツでは、フルワイドブロックで設定した背景画像の上に、リッチカラムブロックを使用して写真を載せています。

再度載せますが、この部分。

サンプルサイトコンテンツイメージ画像2
リッチカラム使用例

横4列(スマホだと2列)に並べています。

コーポレートサイト固定ページ制作手順2-2-1

\ SWELLのおすすめブロック /
リッチカラムの詳しい使い方はこちらを参考にしてください!

③ アニメーションの”遅延”で画像を時間差表示

②のリッチカラムで追加した画像にはアニメーションを設定。

今回は、4枚あるイメージ写真を順番に表示させるようにしています。

コーポレートサイト固定ページ制作手順2-3-1
左から1番目のアニメーション例
コーポレートサイト固定ページ制作手順2-3-2
左から2番目のアニメーション例
コーポレートサイト固定ページ制作手順2-3-3
左から3・4番目のアニメーション例

実際のページでは、左からゆっくり表示されます。

D-AMUS

スマホでレイアウト変更する時などに、アニメーション設定も変えたい場合は、パソコン表示とスマホ表示それぞれのコンテンツを制作して表示させましょう。

デバイスごとの表示切り替えもエディタから簡単にできます。

ブログパーツメインビジュアルカスタマイズ方法1-1
デバイスごとの表示制限設定

3. ボタン表示で下層ページへ誘導

今回、下層ページは制作していませんが、実際にはトップページから下層ページへ誘導することが多いです。

今回のサンプルサイトでいえば、下記画像の部分。

コーポレートサイト固定ページ制作手順3

ボタンをクリックすると、サービスやコース・プランなどのより詳しい内容を掲載している下層ページへ移動します。

そして、この部分では、下記ブロックとアニメーションを使用。

  • カラムブロック(リッチカラム使用だと思っていたら違いました・・・)
  • SWELLボタン
  • アニメーションプラグイン:「Blocks Animation: CSS Animations for Gutenberg Blocks」

③のアニメーション設定に関しては、重複するためここでは割愛します。

① カラムブロックで画像やテキストを追加

カラムブロックの使い方リッチカラムブロックとほぼ同じなので、詳細は割愛します。

D-AMUS

ブロックエディタのカラムブロックをさらに高機能にしたものがSWELLの「リッチカラムブロック」です。

今回は、カラムブロックの中に

  • 画像
  • リストもしくはテキスト(段落ブロック)・ボタン

を配置しています。

詳細は下記画像を参考にしてください。

コーポレートサイト固定ページ制作手順3-1-1

てっきりリッチカラムで作ったものだと思い込んでいましたが・・・

リッチカラムが使えれば、問題なく配置できるはずです!

ちなみに、今回の場合、どちらを使っても見た目の差はほとんどありません。

カラムブロックとリッチカラムブロックの違いはこちらで解説しています!

② SWELLボタンの設置

今回、SWELLボタンを使用しています。

コーポレートサイト固定ページ制作手順3-2-1

2024年8月現在で、5種類からスタイルを選べます。

今回は「MOREボタン」を選択。

どのボタンも、選択するとボタンに表示されるテキストを入力できます。

さらに、ボタン表示テキストの左右にアイコンを使うこともできます。

コーポレートサイト固定ページ制作手順3-2-2
ボタンスタイル・計測設定
コーポレートサイト固定ページ制作手順3-2-3
ボタン内アイコン設定

また、SWELLボタンには計測機能をつけられます。

チェックを入れることで、ボタンのクリック率を計測できます。

SWELLボタンの背景色を3色から選択できる

SWELLボタンで「MOREボタン」以外を選ぶと配色を3つから選択できます。

下記、参考画像です。

コーポレートサイト固定ページ制作手順3-2-4

今回、青色でボタン例を作ってみました。

上記の3色はデフォルトで設定されている配色です。

この配色を自分で選びたい場合「SWELL設定」→「エディター設定」→「ボタンタブ」から変更できます。

コーポレートサイト固定ページ制作手順3-2-5
SWELLボタンの設定変更

ボタンのスタイル変更やグラデーションボタンの作成もこちらからできます。

D-AMUS

サイトのテーマカラーに合わせて用意しておくと、使い分けができて便利です!

例えば、3色あるので

  • CTA用(購入や問い合わせなどユーザーの行動を促すための目立たせたいボタン)
  • 内部リンク用(トップページから下層ページへ移動などサイト内での誘導ボタン)
  • 投稿ページ用(投稿ページへの遷移ボタンや投稿内でのボタン)
  • CTA変更用(クリック数が悪い時にボタンの色を変えて測定するための予備カラー)

など、ご自身のサイトに合わせて使い分けて見ると良いでしょう。

4. カスタムHTMLでGoogleマップの埋め込み

最後のアクセス部分には「Googleマップ」を埋め込んでいます。

  • カスタムHTMLブロック

① カスタムHTMLブロックに指定のコードを貼り付け

まずは、埋め込みをしたい場所に「カスタムHTML」を配置します。

コーポレートサイト固定ページ制作手順4-1-1

このカスタムHTMLに指定のコードを貼り付けます。

今回は、Googleマップからコードを取得しますので、住所を入力し「共有」をクリック。

コーポレートサイト固定ページ制作手順4-1-2

次に「地図を埋め込む」を選択します。

コーポレートサイト固定ページ制作手順4-1-3

特にサイズの指定がない場合は、デフォルトの「中」のまま「HTMLをコピー」をクリック。

サイズを指定・変更する場合は、サイズ表記横の「▼」をクリックして任意の大きさに変更しましょう。

その後、同様に「HTMLをコピー」をクリックします。

コーポレートサイト固定ページ制作手順4-1-4
埋め込みコードの例
コーポレートサイト固定ページ制作手順4-1-5
サイズ変更時の例

あとは、コピーしたコードをそのままカスタムHTMLに貼り付けるだけです。

コーポレートサイト固定ページ制作手順4-1-6

これでGoogleマップの埋め込みが完成しました。

コーポレートサイト固定ページ制作手順4-1-7
Googleマップサンプルサイト表示例

5. SWELLアイコンの呼び出し

Googleマップ下の所在地部分は、すでに紹介した「フルワイドブロックでの背景設置」と「SWELLで使用できるアイコン」を使用。

アイコンはショートコードを使って呼び出しができます。

  • SWELLアイコン(段落ブロック×ショートコード

① アイコン用のショートコードをエディタに入力

まずは、アイコンを使いたい場所に「ショートコード」を配置します。

今回は、段落ブロックのテキストと合わせて使用。

コーポレートサイト固定ページ制作手順5-1-1

電話番号の前と営業時間の前にそれぞれアイコンを配置しています。

実際の表記がこちら。

[icon class="icon-home"] AM11:00 ~ PM11:00
SWELLで使えるアイコン一覧とショートコードはこちら ▶

ページで確認すると、下記画像のようにアイコンが表示されています。

サンプルサイトコンテンツイメージ画像3
アイコン表示例

以上が、今回のサンプルサイト制作手順です。

D-AMUS

お疲れ様でした!実際はここから下層ページの制作もありますが、トップページ制作の流れを掴んでいただけると嬉しいです!

前回の第1弾「メインビジュアル・メニュー編」を確認したい方は下記リンクから確認できます!

ホームページの作り方~メインビジュアル・メニュー編~はこちら ▶

また、SWELLで制作したサイトのSEO対策なら「SEO SIMPLE PACK」がおすすめです!

「SEO SIMPLE PACK」のインストール・設定手順はこちら ▶

\ SWELLならホームページ制作もスムーズです /

まとめ:SWELLだけの機能で固定ページカスタマイズの幅が広がる

最後まで読んでいただきありがとうございます!

今回の記事では

  1. 固定ページでのコンテンツ制作手順
  2. 各ブロックやショートコードの使い方
  3. プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」の使い方

以上、3点について解説させていただきました!

特に重要なポイントは、以下の3つです。

  1. まずは、トップページに固定ページを表示する設定をする
  2. 背景画像を設定できるフルワイドブロックは、SWELLだけの機能でコンテンツごとに背景を変更できて便利
  3. サイトに動きを付けたいなら、プラグインを利用することで簡単にアニメーション設定ができる

ホームページ制作にSWELLを活用したい方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください!


お問い合せはこちらから承っております。

サイト制作・運用をサポート!

カスタムプランもご用意
サイト制作&運用サービスはこちら

ホームページサブスク用バナー
ホームページの作り方 アイキャッチ画像

この記事が気に入ったら
フォローしてね!

\ サイトの制作や更新をするなら知っておきたいweb知識

キャッシュクリアの前に試す2つのこと アイキャッチ画像
キャッシュクリアの方法 アイキャッチ画像

SWELLカスタマイズと合わせてご覧ください!

目次