WordPressテーマ/SWELL コーポレートサイトの作り方！part.3 コンテンツ編①

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

わたしが作ったフラダンス教室のデモサイトをもとに進めていますが、
今回からは、教室＆講師紹介、クラス紹介、お知らせ、お問い合わせ、よくある質問、また、コーポレートサイトでは必須項目である、プライバシーポリシーなどのコンテンツページを作成していきます。

コーポレートサイトは、コンテンツページが完了するとほぼ完成するので、一緒に頑張って進めて行きましょう！

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

今回SWELLで作るコンテンツ 教室＆講師紹介ページについて

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

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

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

このコンテンツの作り方全てを1記事で解説すると相当長くなってしまうので、本記事では、

①教室＆講師紹介
の作り方について解説していきます！

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

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

SWELLコーポレートサイト/教室＆講師紹介ページの作り方

それでは、実際のWordPress固定ぺージ編集画面を見ながら、教室＆講師紹介ページの作り方を解説していきます。
完成イメージは、以下の通りです。

この教室にはどんな特長があってどんなことを教えてくれるのか、講師はどんな人なのか、雰囲気はどんな感じ？など、
最初に読者が知りたいであろう内容のページとなるのでしっかり作りこんでいきましょう！

画像やテキストを組み合わせてコンテンツを作る

管理画面のダッシュボードに入り、固定ページにカーソルを合わると出てくる【新規固定ページを追加】をクリックします。

固定ページの作成画面となり、冒頭に【タイトルを追加】という欄が出てくるので、ページタイトルを入力します。
ページタイトルが入力できたら、【見出し】を作成しますので、画面左上にある＋マークをクリックします。

ブロックエディターの一覧が出てくるので、検索欄に【見出し】と入力します。
すると、直下に見出しブロックが表示されるので、クリックします。

見出しブロックが表示されて見出しが入力できるようになります。
今回は見出しのデザインをサイト向けに変更したいので、右上にある【設定】ボタンをクリックします。

設定ボタンの下に設定項目が表示されるので、丸いスタイルボタンをクリックします。

見出しをカスタイマイズする設定項目が表示されるので、【セクション用】をクリックします。
すると、見出しが中央に入るよう変更されています。

見出しを入力します。
直下の英語表記【about us】は、パソコンのShift＋Enterで改行して入力することができますよ。

見出しが入力できたら、文字の大きさを調整しましょう。
調整したい文字部分を選択した状態で、以下のTマークをクリックすると、XS～XLで大きさの調整ができます。
今回は、Sサイズにして、英字表示はXSにしました。

また、その下の欄に数値を入力→適用をクリックすることで文字の大きさを設定することもできるので、お好きな方で文字の調整を行ってください。

文字の大きさまで調整できたら、次は画像を入れていきますが、画像は画像ブロックを使って挿入していきます。

見出しのところからEnterで改行し、左上の＋マークをクリックし検索欄を出します。
検索欄に【画像】と入力します。

すると、画像ブロックが挿入されて画像がダウンロードできるようになるので、PCより入れたい画像をダウンロードします。

画像ブロックの詳しい使い方について、以下記事で解説しているので、こちらで確認してくださいね。

画像が挿入できたら、その下にテキストを入力していきます。

画像→テキスト、画像→テキスト、といった手順で教室の概要など紹介できたら、次の見出しを作って教室の特長紹介に進みます。

教室の特長紹介は、SWELLの独自機能である【ステップブロック】を使って作成していきます。

まず、画面左上の＋マークをクリックします。

検索欄に【ステップ】と入力して、下に表示されたステップブロックをクリックします。

ステップブロックが表示されるので、
親ブロックを選択した状態で、右上にある設定ボタンをクリックします。

すると、ステップブロックの設定項目が表示されるので、
・スタイル　→　デフォルトのまま
・STEPの文字　→　POINT
・始まりの番号　→　1(デフォルトのまま)
・ステップ番号の形　→　円形(デフォルトのまま)
上記のように設定します。

編集画面に戻ると、ステップブロックの番号の文字が【POINT】に変更されていることが確認できます。
その後、そのままタイトル文を記入して、右の設定項目・ステップ番号のカラー設定の【色】をクリックします。

ステップ番号のカラー選択【色】をクリックすると、色が選択できるようになるので、【No color selected】の枠をクリックします。

枠をクリックすると、好みの色が選択できるようになるので、クリックして選択します。
色をクリックすると、その上部に#から始まる色番号が確認できるので、これ以降同じ色を使いたい場合は、この色番号をコピペすればOKです。

すると、ステップ番号に選択した色が反映されていることが分かるかと思います。

次にタイトル直下に画像→テキストを入れていきましょう。
画像挿入手順は、上記手順と同じです。そして、以下のようになればOK！

ステップブロックが1つ作成できたら、POINT2以降も同じようにステップブロックを作っていきます。
また、ステップブロックは、デフォルトでは2ブロックしか表示されません。

3ブロック目以降を作るには、以下動画のように【親ブロックを選択】をクリックして、
全体を選択した状態にすれば、最下部に＋マークが表示されるので、その＋マークをクリックして項目を追加していくことができます。

ステップブロックの使い方については、以下記事で詳しく解説しています。
上記解説では分かりづらい、もっと詳しく知りたい、という人はこちらも参考にしてくださいね！

ステップブロックで教室の紹介ができたら、次の見出しを作って講師のプロフィール紹介に進みます。

画像→テキストを入れていきます。

次に、SWELLの独自機能【キャプションボックス】を使って、以下の講師経歴の表を作成していきます。

まず、画面左上の＋マークをクリックします。

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

すると、キャプションボックスが表示されるので、右上の設定ボタンをクリックします。

キャプションボックスの形となるスタイルが7種類から選択できるので、今回はデフォルトを選択します。

　

次に、スクロールするとカラー設定ができるので、3つのカラーより好みのカラーを選択してクリックします。
この3つのカラーについては、あらかじめ【SWELL設定】で設定の変更をすれば自分が使いたい色や好みの色を指定可能です。
SWELL設定で設定の変更をしていない場合はデフォルトで3つのカラーが表示されます。

キャプションボックスの形と色が設定できたら、タイトルと本文を入力していきます。
これでキャプションボックスで講師経歴の表が作成できました！

これで、教室＆講師紹介の内容は作成できました！

SNSシェアボタンを設置する

次はページの最下部となりますが、SNSのシェアボタンを作っていきたいと思います。
ここでは、instagram、X、YouTubeの3つを設定していきます。

まず、【スペーサー】を使って講師紹介の項目との余白を作ります。
画面左上の＋マークをクリックします。

検索窓に【スペーサー】と入力して直下に表示されるスペーサーブロックをクリックします。

すると、スペーサーが表示されるので、右上の設定ボタンをクリックして高さの調整をします。
スペーサーの高さ設定は、デフォルトでは100pxとなっているので、ここでは、20pxに変更します。

スペーサーの設定をして余白ができたら、以下テキストを入れます。

次に、画面左上の＋マークをクリックします。

検索窓に【ソーシャルアイコン】と入力し、直下に表示されるソーシャルアイコンブロックをクリックします。

すると、【プラス記号をクリックして追加】と表示されるので、右にある黒い＋マークをクリックします。

＋マークをクリックすると、その下に検索窓が出てくるので【instagram】と入力して、直下に表示されるinstagramをクリックします。

instagramを選択・クリックすると、instagramボタンが表示されるので、隣の余白をクリックします。
すると、再度黒い＋マークが表示されるので、同じ要領で、XボタンとYouTubeボタンを設定します。

instagram、X、YouTube、3つのボタンが配置できたら、1つ1つのボタンにそれぞれのリンク先URLを登録していきます。
まず、Instagramボタンをクリックすると、URLの入力欄が表示されるのでinstagramリンク先のURLを入力します。
URLを入力したら、その右にある適用ボタンをクリックしたら設定完了です。
X、YouTubeボタンについても同様に設定していきましょう！

各ボタンにURL設定ができたら、左寄りになっているボタンの配置を中央に揃えたいと思います。
ボタン右の余白をクリックすると表示される設定バーの中の、以下配置ボタンをクリックします。

すると、左寄せ、中央揃え、右寄せ、から選択できるようになるので、【中央揃え】を選択してクリックします。

これで、SNSリンクボタンが設定できました！

ここまでで、教室・講師紹介ページの作成は一通り完了です！
最後に、画面右上の【下書き保存】を忘れずに行ってくださいね！

次の項目では、本記事最後の仕上げで、タイトル部分の見た目を整えていきパーマリンクを設定します。

トップ画面に画像を登録して見た目を整える

ここからは最後の仕上げで、トップ部分に画像を入れて見た目を整えていき、パーマリンクを設定します。
まずは、タイトルを非表示にする設定から解説していきます。

タイトルを非表示にする

下書き保存した状態で実際のページを確認してみましょう。
画面右上にあるプレビューボタンをクリックします。

すると、直下にデスクトップ、タブレット、モバイル、の選択肢が表示されているので、デフォルトのデスクトップにチェックを入れて【新しいタブでプレビュー】をクリックします。

以下のように、トップ画面のプレビューが表示されますが、
【当教室＆講師について】というタイトルが画面左に表示されていて、見出しと重複していますよね。
このままだと見た目がよくないので、このタイトルを表示しない設定にしていきます。

まず、固定ページ編集画面に戻り、SNSリンクボタンを設定した下の箇所までスクロールします。
すると、【カスタムCSS＆JS】という設定項目があるので、【カスタムCSS＆JS】の文字のところをクリックします。

CSSコードの入力欄が表示されるので、タイトルを非表示にするCSSコードを入力します。
入力するコードは、以下をコピペすればOKです。

h1 {
display: none;
}
.l-mainContent__inner>.post_content {
margin-top: 0;
}

これで下書き保存の上再度プレビューを確認して、以下のようにタイトルが表示されなくなっていたらOKです！

トップ画面に画像を登録する

今回のコーポレートサイトの各コンテンツページには、トップ画面に横長の画像を登録しています。
これをSWELLでは【タイトルの背景画像】といいますが、ここではその画像設定方法について解説します。

最初に、タイトルの背景画像に入れる画像を準備しておきます。
目安としては、【1600×300px】くらいがちょうどよく収まるサイズとなり、本デモサイトでも1600×300pxの画像を使っています。

画像が準備できたら、編集中のページに設定していきましょう！
画面右上の設定ボタンから設定バーを表示させて、スクロールして【タイトルの背景画像】を見つけます。
見つかったら、【画像を選択】をクリックしてください。

すると、通常の画像登録と同様、画像を選択できるようになるので、準備しておいた画像を【ファイルをアップロード】からアップロードします。

すると、タイトルの背景画像に画像が設定されていることが確認できます。
次に、直下の表示の上書き設定のタイトル位置で、【コンテンツ上】を選択・設定します。
これをしないと、画像が設定されていてもトップ画面に表示されないので注意！

ここまでできたら、最後に上書き保存を忘れずにして、タイトルの背景画像設定は完了です！

タイトルの背景画像の設定方法は以下記事でも解説しているので、よかったら合わせてチェックしてくださいね。

パーマリンクを設定する

パーマリンクとは、ホームページのページ毎に設定している、httpsから始まる全体のURLのことです。
デフォルトではタイトルの日本語がそのまま表記されていますが、日本語のままだと文字化けの原因となります。
SEO的にはあまりよくないので、読者から見やすく認識してもらいやすいパーマリンク設定をしていきます。

まず、画面右上の設定ボタンをクリックして、【固定ページ】の方を選択します。
すると、その下にURLが表示されていて、パーマリンクの最下部がタイトル名になっていることが確認できるかと思います。
そのURLをクリックしてください。

URLをクリックすると、URL編集のポップアップが出てきて、パーマリンクがタイトルのまま日本語で表記されています。
ここを英語表記に書き換えていきます。
ここでは分かりやすく【about】とします。コーポレートサイトではよく使われる表記ですよね。

そして、パーマリンクを【about】に書き換えたら右上の×マークでポップアップを閉じて、パーマリンクの設定は完了です。
最後に下書き保存を忘れずにしてくださいね！

以上で、本記事の内容である教室＆講師紹介ページの作成は完了です！
プレビューを確認すると、最初に紹介している動画のように表示できているかと思います。

そして、一番最後に、画面右上の【公開】をクリックして公開状態としてください。
公開ボタンは2段階認証となっており、1回公開ボタンをクリックすると【公開してもよいですか？】と聞いてくるのでもう1回公開ボタンをクリックします。

WordPressテーマ/SWELLでコーポレートサイトのコンテンツを作ろう！

今回は、デモサイトをもとに、WordPressテーマ・SWELLで作るコーポレートサイトのコンテンツページの作り方を解説しました。

ブロックエディターで直感的に作り上げていけることがお分かりいただけたと思います！
まだ1ページ目となりますので、このまま進めて各コンテンツページを作っていきましょう。

次は、Part4として各クラス紹介ページを作成していきます。

最後まで読んでいただき、ありがとうございました！

＼次の記事はこちら／