こんにちは、ゆうじ(@yuji_sgs_prog)です。
前回の記事に引き続き、SWELLを活用したコーポレートサイト(カフェ風デモサイト)の作り方を解説していきます。
まだ、このシリーズにおける最初の記事を読んでいない方は、先にご覧ください。
\ 最初の記事はこちら /
![](https://sgs-prog.com/wp-content/uploads/2022/03/beach-gae727b138_1920-300x200.jpg)
本記事では、各セクションごとのコンテンツを作成していきます。
今回が完了するとコーポレートサイトの大枠が完成するので、気合いを入れてやっていきましょう。
\ 国内人気No.1!簡単なコーポレートサイトは誰でも作れる! /
なお、「SWELLでコーポレートサイトを作ってほしい!」という方向けに、受託での制作サービスを提供しています。興味のある方は「こちら」よりご確認ください。
セクションごとのコンテンツの作り方
![](https://sgs-prog.com/wp-content/uploads/2022/02/lamp-g2b6b8d494_1920-1024x665.jpg)
コーポレートサイト(カフェ風デモサイト)のセクションは以下の7つに分かれています。
- コラム
- アバウト
- メニュー
- ギャラリー
- ニュース
- アクセス
- お問い合わせ
順番に解説していきます。
コラム
![コーポレートサイト(カフェ風デモサイト)のコラム](https://sgs-prog.com/wp-content/uploads/2022/03/1-1024x458.png)
まず、投稿ページを作成していきます。
「投稿」→「新規追加」をクリック。
![Wordpressの投稿新規追加](https://sgs-prog.com/wp-content/uploads/2022/03/2-1-1024x523.jpg)
下記のようにして、投稿ページを作っていきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/3-1-1024x577.jpg)
3つの投稿をそれぞれ作成して、下記のような感じになればOKです。
![コーポレートサイト(カフェ風デモサイト)の投稿](https://sgs-prog.com/wp-content/uploads/2022/03/4-1-1024x488.png)
では、フロントページを編集していきましょう。
「固定ページ」→「固定ページ一覧」から「フロントページ」をクリック。
![Wordpressの固定ページ](https://sgs-prog.com/wp-content/uploads/2022/03/5-1-1024x519.png)
![固定ページのフロントページ](https://sgs-prog.com/wp-content/uploads/2022/03/6-2-1024x514.jpg)
フロントページに入ったら、左上にある「青色のプラスボタン」をクリックして、「パターン」の中にある「フルワイドセクション」を選択。
![コーポレートサイト(カフェ風デモサイト)のフロントページ編集](https://sgs-prog.com/wp-content/uploads/2022/03/7-1-1024x544.png)
![SWELLのフルワイドセクション](https://sgs-prog.com/wp-content/uploads/2022/03/8-1024x536.png)
すると、下記のようになるので、セクションタイトルを「コラム」に変更。
![フルワイドセクションのタイトル変更](https://sgs-prog.com/wp-content/uploads/2022/03/9-1024x279.png)
次に下記のようにして、「投稿リスト」を表示します。
![SWELLの投稿リスト](https://sgs-prog.com/wp-content/uploads/2022/03/10-1024x371.png)
表示できたら、カテゴリーを表示しないような設定にしていきましょう。
![コーポレートサイト(カフェ風デモサイト)の投稿リスト](https://sgs-prog.com/wp-content/uploads/2022/03/11-1024x472.png)
最後に「SWELLボタン」を表示します。
![SWELLボタン](https://sgs-prog.com/wp-content/uploads/2022/03/12-1024x458.png)
下記のように設定したら完了です。
![コーポレートサイト(カフェ風デモサイト)のSWELLボタン設置](https://sgs-prog.com/wp-content/uploads/2022/03/13-1024x440.png)
以上でコラムのデザインは完成したのですが、この時にメインビジュアルとコラムの間に微妙な空白ができます。
![SWELLのメインビジュアル下に生じる微妙な空白](https://sgs-prog.com/wp-content/uploads/2022/03/14-1024x449.png)
これはSWELLの設定で微妙な空白が生まれるので、追加CSSを記述して直していきましょう。
.top #content {
padding-top: 0 !important;
margin-bottom: 0;
}
これを追加CSSに記述すればOKです。
アバウト
![コーポレートサイト(カフェ風デモサイト)のアバウト](https://sgs-prog.com/wp-content/uploads/2022/03/15-1024x534.jpg)
まず、先ほどと同じように「フルワイドセクション」を選択して、背景は白色に変更しましょう。
![SWELLのフルワイドセクション](https://sgs-prog.com/wp-content/uploads/2022/03/16-1024x471.jpg)
次に下記のようにして、「カラム」を選択→「50/50」にしていきます。
![SWELLのカラム設定](https://sgs-prog.com/wp-content/uploads/2022/03/17-1024x388.jpg)
![SWELLのカラム50/50](https://sgs-prog.com/wp-content/uploads/2022/03/18-1024x440.jpg)
50/50のカラムができたら、左側のブロックで「画像」を選択。
![SWELLの画像設定](https://sgs-prog.com/wp-content/uploads/2022/03/image-2-1024x514.png)
「アップロード」から該当する画像を選択してください。
![SWELLの画像アップロード](https://sgs-prog.com/wp-content/uploads/2022/03/20-1024x479.jpg)
その下にも該当する画像を挿入して、次に右側を作っていきます。
右側のブロックでは「段落」を選択。
![SWELLの段落設定](https://sgs-prog.com/wp-content/uploads/2022/03/21-1024x622.jpg)
下記のように右側のブロックに文章を載せていきます。
![SWELLで太字の文章を記述](https://sgs-prog.com/wp-content/uploads/2022/03/22-1024x657.jpg)
↓記述している文章はこちら↓
ゆったりとした
時間がながれる
くつろぎの場所・空間
「カフェサンプル」は2021年8月に〇〇町でオープンしました。
海沿いに面した、開放的で自然ゆたかな見晴らしのよいカフェです。
陽の光が差し込む明るい店内で
お出かけ途中の休憩に
おしゃべりを楽しむティータイムに
ほっと一息入れるおひとり時間に
あなたに合わせた使い方で癒しの時間をお過ごしください。
記述したら、上の3行を選択して、サイズを特大にしていきます。
![SWELLで文章のサイズを特大に変更](https://sgs-prog.com/wp-content/uploads/2022/03/23-1024x416.jpg)
また、記述した文章の下のブロックに「SWELLボタン」を追加していきましょう。
![SWELLボタンの設置](https://sgs-prog.com/wp-content/uploads/2022/03/24-1024x499.jpg)
先ほどと同じような設定にしていきます。
![SWELLボタンの設定](https://sgs-prog.com/wp-content/uploads/2022/03/25-1024x557.jpg)
最後にデザインを整えていくために、カラムの右側の部分を選択して、「about-right」というクラスを付与します。
![SWELLの追加CSSクラス付与](https://sgs-prog.com/wp-content/uploads/2022/03/26-1024x465.jpg)
「カスタマイズ」から「追加CSS」に移りましょう。
.wp-block-column.about-right {
margin-left: 50px !important;
}
@media screen and (max-width: 769px) {
.wp-block-column.about-right {
text-align: center;
margin-left: 0 !important;
}
}
これを追加CSSに記述すればキレイなデザインになります。
メニュー
![コーポレートサイト(カフェ風デモサイト)のメニュー](https://sgs-prog.com/wp-content/uploads/2022/03/27-1024x512.jpg)
まず、「フルワイドセクション」を選択して、下記のように「カラム」を作成していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/28-1024x420.png)
カラムは「33/33/33」にしていきます。
![SWELLのカラム33/33/33](https://sgs-prog.com/wp-content/uploads/2022/03/29-1024x427.jpg)
1番左のブロックから画像を入れていきます。
![SWELLで画像の挿入](https://sgs-prog.com/wp-content/uploads/2022/03/30-1024x586.png)
「アップロード」から該当する画像を選択していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/31-1024x433.jpg)
同様に真ん中と1番右のブロックにも画像を入れていきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/32-1024x529.png)
最後に「SWELLボタン」を作成して完了です。
![SWELLボタン設置](https://sgs-prog.com/wp-content/uploads/2022/03/33-1024x464.png)
ギャラリー
![コーポレートサイト(カフェ風デモサイト)のギャラリー](https://sgs-prog.com/wp-content/uploads/2022/03/34-1024x474.png)
まず、アバウトセクションと同様に、背景が白の「フルワイドセクション」を作っていきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/35-1024x471.png)
次に下記のようにして、「カラム」を選択→「33/33/33」にしていきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/36-1024x380.png)
![](https://sgs-prog.com/wp-content/uploads/2022/03/37-1024x422.png)
4列にしていくために、カラムとカラムの間にカーソルを合わせて、カラムを追加していきます。
![SWELLでカラムを4列に](https://sgs-prog.com/wp-content/uploads/2022/03/38-1024x351.png)
あとは、2行にして、各々画像を入れていくだけです。
![](https://sgs-prog.com/wp-content/uploads/2022/03/39-1024x393.png)
画像を全部入れたら、下のようにして、「幅広」にしていきましょう。
![SWELLで幅広設定](https://sgs-prog.com/wp-content/uploads/2022/03/40-1024x448.png)
1行全てを選択するときにカーソルを合わせるのが難しいですが、頑張ってください。
ニュース
![コーポレートサイト(カフェ風デモサイト)のニュース](https://sgs-prog.com/wp-content/uploads/2022/03/41-1024x445.png)
まず、いつも通り「フルワイドセクション」を作成していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/42-1024x270.png)
投稿リストを表示していきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/43-1024x368.png)
レイアウトを「テキスト型」にして、カテゴリーを表示しないような設定にしていきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/44-1024x479.jpg)
今回はデザインだけ表現するために、「コラム」と「ニュース」のカテゴリーは分けませんでした<(_ _)>
実際にホームページとして使用する際は、カテゴリーを分けるか、カスタム投稿タイプのプラグインを使って区別するのがいいと思います。
最後に「SWELLボタン」を表示していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/45-1024x507.png)
このように設定したら完了です。
![](https://sgs-prog.com/wp-content/uploads/2022/03/46-1024x496.png)
アクセス
![コーポレートサイト(カフェ風デモサイト)のアクセス](https://sgs-prog.com/wp-content/uploads/2022/03/47-1024x405.png)
まず、背景が白の「フルワイドセクション」を作っていきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/48-1024x471.png)
次に下記のようにして、「カラム」を選択→「50/50」にしていきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/49-1-1024x418.png)
![](https://sgs-prog.com/wp-content/uploads/2022/03/50-1024x494.png)
50/50のカラムができたら、左側のブロックで「カスタム HTML」を選択。
![SWELLでカスタムHTMLを選択](https://sgs-prog.com/wp-content/uploads/2022/03/51-1024x431.png)
Googleマップで東京都を表すコードを追加していきます。(架空サイトなので、場所は適当です)
![](https://sgs-prog.com/wp-content/uploads/2022/03/52-1024x370.png)
また、コードは
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207446.24819290053!2d139.60078258937565!3d35.66844146330864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b857628235d%3A0xcdd8aef709a2b520!2z5p2x5Lqs6YO95p2x5Lqs!5e0!3m2!1sja!2sjp!4v1630488964511!5m2!1sja!2sjp" width="500" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
これを追加しています。
Googleマップの埋め込みに関しては、こちらの記事を参考にするとわかりやすいです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwSFRNTCVFMyU4MCU5MUdvb2dsZSUyME1hcCVFMyU4MSVBRSVFNSU5RiU4QiVFMyU4MiU4MSVFOCVCRSVCQyVFMyU4MSVCRiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NGNlNzg1MTRiZDdlMjJhMTIwYmQzM2Q0OGNlZjdmNjc&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzbWtoa2MmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWE1NTNmODljOGI1OThjNmFlZTQ5Y2IyNTMwZjNhNzdk&blend-x=142&blend-y=486&blend-mode=normal&s=2c65260d6a67634eb9bc42b5e618fee3)
右側のブロックでは「段落」を選択。
![](https://sgs-prog.com/wp-content/uploads/2022/03/53-1024x478.png)
下記のように記述していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/54-1024x431.png)
店名 カフェサンプル
住所 東京都サンプル区サンプル町1-1-1
TEL 000-0000-0000
営業時間 9:00~18:00
定休日 水曜日
座席数 30席
貸し切り 可(8名様~30名様)
お支払い 現金/カード/PayPay
このように記述しています。
お問い合わせ
![コーポレートサイト(カフェ風デモサイト)のお問い合わせ](https://sgs-prog.com/wp-content/uploads/2022/03/55-1024x323.png)
いよいよ最後のセクションです。
まず、いつもの如く「フルワイドセクション」を作成していきましょう。
![](https://sgs-prog.com/wp-content/uploads/2022/03/56-1024x361.png)
次に下記のようにして、「カラム」を選択→「50/50」にしていきます。
![](https://sgs-prog.com/wp-content/uploads/2022/03/57-1024x406.png)
![](https://sgs-prog.com/wp-content/uploads/2022/03/58-1024x449.png)
後はデザイン通りに画像を入れたら完了です(*`・ω・)ゞ
![](https://sgs-prog.com/wp-content/uploads/2022/03/59-1024x384.png)
長かったと思いますが、以上でコンテンツ編は終了です!
それでは今回は以上とします。最後まで読んでいただきありがとうございました。
\ 次回の記事はこちら /
![](https://sgs-prog.com/wp-content/uploads/2022/03/yucar-fotografik-cfR-V1QuEKw-unsplash-300x200.jpg)