WordPressテーマ/SWELL コーポレートサイトの作り方！Part.4 コンテンツ編②

2024年5月10日2024年10月16日

当ページのリンクには広告が含まれています。

本シリーズは、WordPressテーマ/SWELLでコーポレートサイトを作りたい人向けに手順書代わりに読んでもらえるよう、数記事にわたって解説しています。

わたしが作ったフラダンス教室のデモサイトをもとに進めていますが、前回に続き、コンテンツページの作り方を解説します。

本記事がコンテンツページ中盤となりますので、一緒に頑張っていきましょう！

WordPressテーマがSWELLではない人でも、基本的な操作は同じところが多いのでぜひ参考にしてくださいね！

おしゃれなホームページが簡単に作れる！
今回コーポレートサイト作成を紹介している【SWELL】はこちらです♪

WordPressテーマ「SWELL」

今回SWELLで作るコンテンツ各クラス紹介ページについて

今回制作するデモサイトはこちら

今回のコーポレート制作で必要なコンテンツは以下の通りです。

①教室＆講師紹介ページ
②各クラス紹介ページ
③よくある質問ページ
④お知らせページ
⑤お問い合わせページ
⑥プライバシーポリシー
⑦特定商取引法に基づく表記

作り方の大まかな流れとしては、各ページを【固定ページ】で作成していきます。
上記7ページ分の固定ページが作成できたら、
トップページに表示される「メニュー」に、作成した各ページのリンクを設置していく流れとなります。

前回のコンテンツページ編では、①教室＆講師紹介ページの作成方法を解説しましたので、今回は、
②各クラス紹介ページ
の作り方について解説していきます！

以下ページを作りますので、別タブで開いて確認しながら作業を進めていってくださいね。

デモサイト/各クラス紹介ページ

ちなみに、コーポレートサイトの顔であるトップページは、
各コンテンツページを総括して紹介するページとなるため、今回のコンテンツページが全て出来上がったら作成していきます。

SWELLコーポレートサイト/各クラス紹介ページの作り方

それでは、実際のWordPress固定ぺージ作成画面の画像を交えながら、WordPressテーマ/SWELLで「クラス紹介ページ」を作っていきましょう！

フラダンス教室に限らず、どんな教室でもいくつかクラスを設けているかと思うので、その全てのクラス紹介を1ページにまとめているページとなります。

今回の肝となる機能がWordpressの便利機能・アンカーリンク。

1ページ内に全クラスの詳細や画像をまとめて記載すると、とても長くなってしまって、読者が見たいクラスの箇所になかなかたどり着けない、なんてことになりますよね。
そんな時には、ページ冒頭に見たい箇所に誘導してくれるボタンを設置しておけば、読者が必要な情報のみを確認することができるんです。

このボタンに設置するリンクのことを、アンカーリンクといいます。
ホームページでは、よく見る形だと思います。

アンカーリンクの使い方を覚えれば、いろいろな場所で使えるのでぜひマスターしていきましょう！

各クラス紹介箇所へのリンクボタンの作り方

まず、ページ冒頭に、読者が見たいクラスの紹介箇所へ誘導するボタンを設置していきます。
管理画面のダッシュボードに入り、固定ページにカーソルを合わると出てくる【新規固定ページを追加】をクリックします。

固定ページの作成画面となり、冒頭に【タイトルを追加】という欄が出てくるので、
ページタイトルを入力した後、見出しを作成します。
ページタイトル入力から見出し作成については、前回のコンテンツ編part.1にて解説しているので、こちらからご確認ください。
ページタイトルは【各クラス紹介ページ】、冒頭の見出しは【クラスについて】としました。

見出しの下には、各クラスの詳細箇所に誘導する内容のテキストを入れてから、ボタンを設置していきます。
まずはテキストを入力し、その下に各クラス詳細箇所へのボタン4つを作成していきます。

まずは、テキストを入力します。
入力できたら、4つのボタンを作っていくので、画面左上の＋マークをクリックします。

検索窓に【カラム】と入力し、直下のカラムブロックをクリックします。

編集画面にカラムブロックが表示されるので、50/50の2カラムを選択してクリックします。

左側に表示されるカラムの、＋マークをクリックします。

直下に検索窓が出てくるので、【ボタン】と入力し、【SWELLボタン】をクリックします。

すると、ボタンが表示されるので、右上の設定マークをクリックします。

SWELLボタンの設定画面になるので、ここで形や大きさ、色を調整していきます。
まず最初にスタイル(形)を5種類から選べるので、ここでは【ノーマル】を選択してクリックします。

スタイル設定ができたら、その下の【ボタンサイズ設定】で大きさを調整します。
デフォルトでは標準ですが、少し小さいので今回は大で設定しました。
すると、ボタンのサイズが大きくなっていることが確認できるかと思います。

サイズ設定の下にいくと【フォントサイズ】とありますが、ここを調整するとボタンのサイズも一緒に変わってしまうので、わたしはデフォルトのままにしています。
フォント調整は、編集画面の上に出てくる設定バーの【TT】で設定した方がやりやすいかと思いますが、お好みで設定してくださいね。

次に、ボタンのカラーを設定していきます。
デフォルトでは、サイトの基本カラーがボタンに自動反映されますが、ここで設定することで変更できます。
【カラー設定】で3つのカラーから選択できるので、好きな色をクリックするとボタンのカラーが変更されます。

ちなみに、こちら3つのカラーについては【エディター設定】であらかじめ好きな色を設定しておくことができます。
グラデーションなどいろんなパターンから選べるので、ぜひ自分のサイトに合ったカラーを設定しておいてくださいね。

エディター設定でのカラー設定方法は、以下記事で解説しているので好みの色を使いたい方はチェックしてください！

各クラス紹介の詳細・画像を入れてコンテンツを作る

ボタンを作ったら、次の項目と少しスペースを作りたいので、【スペーサーブロック】を使ってスペースを入れます。
編集画面左上の＋マークをクリックしてブロック一覧を表示させ、検索窓に【スペーサー】と入力して直下に出てきたスペーサーをクリックします。

すると、デフォルトで高さ100pxのスペースができるので、高さを好みで変更していきます。
右上の【設定ボタン】をクリックします。

設定で高さを変更できるので、デフォルトで100pxとなっている高さを20pxに書き換えます。
すると、スペースが20pxに変更されていることが確認できます。
これで、スペーサーの設定は完了です。

スペースを入れることができたら、各クラス紹介のページを作っていきましょう。
まずは見出しを作ります。見出し名は【ケイキクラス】としています。
※見出しの作り方はこちらを参考に。

見出しを作ったら、以下のように中央揃えで、レッスン日・回数・月謝をテキストで入力し、設定バーの【B】をクリックして太字にしましょう。

テキスト入力・設定ができたら、テキストにカーソルがある状態で、右上にある【設定】ボタンをクリックします。

【ボーダー設定】という項目が表示されるので、01 を選択・クリックします。
すると、テキストがボーダーで囲われて協調させることができます。
こちらのボーダー(線)の色は、【SWELL設定】で自分の好きな色に設定することができますが、デフォルトではサイトのメインカラーになっています。

ボーダー設定ができたら、再びスペーサー(20px)を入れ、
その下から、画像→テキストの順でコンテンツを作っていきます。

画像の入れ方を確認したい人は以下記事を参考にしてください♪

あわせて読みたい

WordPress画像ブロックの使い方！画像挿入方法を解説します WordPressでサイトを作成するうえで、画像挿入は欠かせませんよね。コンテンツの見栄えがよくなるだけでなく、読者にも分かりやすくサービスを伝えることができます。 W…

次に、SWELLの独自機能【キャプションボックス】を使って、とくに強調させたい、読者に伝わりやすいコンテンツを作っていきます。
今作成しているフラのデモサイトでいうと、このクラスで習得すること、という項目となります。

画面左上の＋マーク(ブロック追加ボタン)をクリックします。

検索窓に【キャプションボックス】と入力し、直下に表示される【キャプションボックス】をクリックします。

すると、キャプションボックスが表示されるので、右上にあるブロック設定ボタンをクリックします。
【スタイル】でキャプションボックスの形が選択できるので好きな形を選びますが、今回はデフォルトでいきます。

設定バーを少しスクロールすると、【カラー設定】ができるので、3つのカラーから好きな色をクリックして選択します。
※3つのカラーはあらかじめ好きな色を【SWELL設定】で登録しておくことができます。

以下のようにタイトルと本文を入力したら、キャプションボックスでのコンテンツ作成はOKです。
キャプションボックスは、いろいろな用途で使える便利機能なのでぜひ活用してくださいね。

次に、クラスの雰囲気が分かるように画像を紹介するコンテンツを作ります。
まずは見出しを作成しましょう。

ここでの見出しは、【ケイキクラス】の中の【レッスンの様子】なので、中見出しである【H3】設定にします。
前項と同様に見出しを作成した後、見出しを選択した状態で、設定バーの【H3】をクリックします。

見出しを正しく使うことでページ構成を正しく伝えることができるので、順序を守りましょう。

見出しができたら、直下には、こんな様子でレッスンをしているよという内容のテキストを入れます。
そのテキストの下に画像を入れたいので、カラムブロックを挿入して画像を設定していきます。

前項でボタンを作成した時と同様、50/50のカラムを挿入してください。
カラム挿入の操作を忘れてしまった方はこちらから確認してくださいね。

そして、カラムブロックが挿入でできたら、カラムの＋マークをクリックして、検索窓に【画像】と入力し、直下に表示された画像ブロックをクリックします。

前項にならって、画像を設定していき、隣の2カラム目も同じように画像を入れていきます。
ここでの画像サイズは【500px×500px】のものを使っています。

2カラム目にも画像を入れたら、その下には再びカラムブロックを挿入し、同じように2つ画像を設定していきます。
これで4つの画像を入れることができました。
画像を増やしたい場合は、カラムを追加して入れていきましょう。

以上で、1クラス分の紹介が完成となります！
同じ要領で、下に続けて他3クラス分、カイカマヒネkaikamahine・オピオopio・ワヒネwahineも作っていきましょう。

全てのクラス紹介が作成できたら、この次の作業は、以下の通りとなります。

最下部にSNSシェアボタンを設定する
トップ画面に画像を登録して見た目を整える
パーマリンクを設定する

上記は、前記事の【WordPressテーマ【SWELL】ホームページの作り方！③コンテンツ編part.1】の後半で紹介している内容と同じなので、こちらから確認して作業していきましょう。

ちなみに、ここでのスラッグ名は【class】としましたので、
ページのパーマリンク(全体のURL)は、https://uruma-studio.com/sample3/class/　となっています。

ここまでできたら、冒頭に作った各ボタンにリンクを入れていくために、アンカーリンクの設定をしていきます。

ボタンにアンカーリンクを設定する

この時点では、冒頭にあるボタンにまだリンクがついていないので、ボタンから各クラス紹介へジャンプさせる【アンカーリンク】を設定していきます。
これが終われば、各クラス紹介ページの制作は完了となります！

まず、ケイキクラスの見出し部分に戻って、カーソルを合わせます。
そして、右上の設定ボタンをクリックします。

設定項目の中の【高度な設定】をクリックします。

すると、【HTMLアンカー】という入力欄が出てくるので、【anchor1】と入力します。
この文字列はanchor1でなくても、英数字であれば自分の決めたものでOK！
例えば、【jump1】とか【rink1】とか。

このHTMLアンカーは、ここでいう【ケイキクラス】の説明に導くための住所のようなものです。
この住所を他3クラス分にもつけていく、といったイメージです。

HTMLアンカーに入力できたら、下書き保存をして、
下に下がって、カイカマヒネkaikamahine・オピオopio・ワヒネwahine、の3つの見出しの箇所にも同様にアンカーリンクを作っていきます。
ただ、同じページ内で同じ名前のアンカーリンクは使えないので、

ケイキクラス→anchor1
カイカマヒネ→anchor2
オピオ→anchor3
ワヒネ→anchor4

といったように、番号などで分けるようにしていきましょう。

ここまでできたら、URLを組み合わせて各クラスごとのURLを作成していきます。

本ページ全体のURLが前述の通り、https://uruma-studio.com/sample3/class/　になるので、この末尾に各クラスのアンカーリンクを付け加えます。

アンカーリンクを付け加える時は、冒頭に【＃】をつけて、＃anchor1　とするので、各クラスのアンカーリンクは以下の通りとなります。

ケイキクラス　https://uruma-studio.com/sample3/class/#anchor1
カイカマヒネ　https://uruma-studio.com/sample3/class/#anchor2
オピオ　https://uruma-studio.com/sample3/class/#anchor3
ワヒネ　https://uruma-studio.com/sample3/class/#anchor4

後は、上記URLを冒頭にある各クラスのボタンに設定していくだけです！

ページ冒頭に戻り、keiki(ケイキクラス)ボタンをクリックします。