![](https://sposai-trivia.com/wp-content/uploads/2024/05/23724370-1.jpg)
SWELLのサイト型ページを自分で編集したいんだけど、編集方法がわからないよ〜。
こんなお悩みを解決します。
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/74dc1e57b951255721b38ef9d19ec5f4-375x375-1.png)
こんにちはろにぃです。サイト制作を始めてから10年
・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談
などの経験を活かして、サイト制作やSEOについて情報発信をしております。
SWELLで作成されたサイト型ページを見ると、『こんなサイトを自分も作ってみたい』と思いますよね。そんな要望に応えるため、今回はマニュアルを用意しました。
全部マスターするとWordPressに初めて触れる初心者でも、コーポレートサイトを自分で作れるほどの内容になっています。
もちろん全部覚える必要はないので、今回必要なところだけ目次で確認してチェックしてみてください!
※編集したい項目を目次から探して選択してください。スクショしながら作業すると便利です。
サイト型ってなに?
![サイト型ってなに?](https://sposai-trivia.com/wp-content/uploads/2024/06/23185603-edited.jpg)
![サイト型ってなに?](https://sposai-trivia.com/wp-content/uploads/2024/06/23185603-edited.jpg)
SWELLではトップページをサイト型、ブログ型のいずれかから選択ができます。
![](https://sposai-trivia.com/wp-content/uploads/2024/06/dac1825ba4f802a2a1a13ad6ede6bc51-edited-1024x640-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/dac1825ba4f802a2a1a13ad6ede6bc51-edited-1024x640-1.png)
各ページへアクセスしやすくリンクが設置されており、読者がサイトを巡回しやすいデザイン
コーポレートサイトなどに使用可能
![](https://sposai-trivia.com/wp-content/uploads/2024/06/15bb54a65fb67f3ae678e95b292313b3-edited-1024x640-1.png)
![](https://sposai-trivia.com/wp-content/uploads/2024/06/15bb54a65fb67f3ae678e95b292313b3-edited-1024x640-1.png)
新着記事が並び、更新状況がひと目でわかるデザイン
ブログサイト定番のデザイン
今回はデザインカスタマイズの幅が広いサイト型の編集方法について解説していきます。
サイト型とブログ型の切り替え方法
まずはサイト型とブログ型の切り替え方法を解説します。
トップページを新しく作成する場合は管理画面の左メニュー、固定ページ⇒新規追加でページを用意します。
![サイト型とブログ型の切り替え方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2d7e50a69ceffa181846144085817bce-1-edited-1024x768.jpg)
![サイト型とブログ型の切り替え方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2d7e50a69ceffa181846144085817bce-1-edited-1024x768.jpg)
切り替え方は以下の通り
![管理画面の外観、カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/254ccc8f8726264b6084a0354c07e1c0-edited-1024x768.jpg)
![管理画面の外観、カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/254ccc8f8726264b6084a0354c07e1c0-edited-1024x768.jpg)
![WordPress設定をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/563bb041f5fe76d8944eb4cb6ca5c0ff-edited-1024x768.jpg)
![WordPress設定をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/563bb041f5fe76d8944eb4cb6ca5c0ff-edited-1024x768.jpg)
![ホームページ設定をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/d215962fbdbb8832956d25ee3ef5662d-edited-1024x768.jpg)
![ホームページ設定をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/d215962fbdbb8832956d25ee3ef5662d-edited-1024x768.jpg)
![ホームページを固定ページに指定する](https://sposai-trivia.com/wp-content/uploads/2024/06/acad577fd20ef3441588babb4102e656-edited-1024x768.jpg)
![ホームページを固定ページに指定する](https://sposai-trivia.com/wp-content/uploads/2024/06/acad577fd20ef3441588babb4102e656-edited-1024x768.jpg)
以上でサイト型トップページに切り替わります。
SWELLサイト型トップページの編集方法
![SWELLサイト型トップページの編集方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2245386-1-1024x768-1.jpg)
![SWELLサイト型トップページの編集方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2245386-1-1024x768-1.jpg)
サイト型ページで始めに操作するトップページの編集方法を解説していきます。
サイトロゴをかえる
![サイトロゴをかえる](https://sposai-trivia.com/wp-content/uploads/2024/06/b06922930f7b5bf85b7e5157cda8fa34-edited-1024x768.jpg)
![サイトロゴをかえる](https://sposai-trivia.com/wp-content/uploads/2024/06/b06922930f7b5bf85b7e5157cda8fa34-edited-1024x768.jpg)
サイトを開いた時に表示されているサイトロゴの編集方法です。
![管理画面から外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/ec8edb007d177e6b3bf7b7e4c9078324-edited-1024x768.jpg)
![管理画面から外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/ec8edb007d177e6b3bf7b7e4c9078324-edited-1024x768.jpg)
![ヘッダーをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/e21466a70b203e34e577c1c943c82273-edited-1024x768.jpg)
![ヘッダーをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/e21466a70b203e34e577c1c943c82273-edited-1024x768.jpg)
![ヘッダーロゴの設定で用意した画像データを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/84f9f7bb92012eb2590d12fbff93e1a0-edited-1024x768.jpg)
![ヘッダーロゴの設定で用意した画像データを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/84f9f7bb92012eb2590d12fbff93e1a0-edited-1024x768.jpg)
![ヘッダーロゴの設定で用意した画像データを選択2](https://sposai-trivia.com/wp-content/uploads/2024/06/8bf309bcddefdd9718a3c4f832598b5a-edited-1-1024x768.png)
![ヘッダーロゴの設定で用意した画像データを選択2](https://sposai-trivia.com/wp-content/uploads/2024/06/8bf309bcddefdd9718a3c4f832598b5a-edited-1-1024x768.png)
これでロゴを変更できます。ロゴはサイトの顔になるので、じっくり選びましょう。
メニューを編集する
![メニューを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/c3e6cce1001ff15d9df40026488bba11-edited-1-1024x768.jpg)
![メニューを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/c3e6cce1001ff15d9df40026488bba11-edited-1-1024x768.jpg)
ヘッダーにあるメニュー(グローバルナビ)の編集です。
![管理画面のカスタマイズ・メニューをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/ec8edb007d177e6b3bf7b7e4c9078324-edited-1024x768-1.jpg)
![管理画面のカスタマイズ・メニューをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/ec8edb007d177e6b3bf7b7e4c9078324-edited-1024x768-1.jpg)
![新しいメニューを作成](https://sposai-trivia.com/wp-content/uploads/2024/06/00d628a15e494c19e029fd1e8470ff59-edited-1024x768.jpg)
![新しいメニューを作成](https://sposai-trivia.com/wp-content/uploads/2024/06/00d628a15e494c19e029fd1e8470ff59-edited-1024x768.jpg)
![メニュー名、メニュー設定を行い保存](https://sposai-trivia.com/wp-content/uploads/2024/06/bf6a78dfe13182402dd8f0947fe1868c-edited-1024x768.jpg)
![メニュー名、メニュー設定を行い保存](https://sposai-trivia.com/wp-content/uploads/2024/06/bf6a78dfe13182402dd8f0947fe1868c-edited-1024x768.jpg)
メニュー名は何でも構いません。わかりやすく設定しましょう。
メニューの位置でグローバルナビにチェックをいれます。
![編集するメニューを選択で作成したメニューを選択⇒追加したい固定ページを選択しメニューに追加](https://sposai-trivia.com/wp-content/uploads/2024/06/6ad6d66c5804d4c6ab30bff8c296c99a-edited-1024x768.jpg)
![編集するメニューを選択で作成したメニューを選択⇒追加したい固定ページを選択しメニューに追加](https://sposai-trivia.com/wp-content/uploads/2024/06/6ad6d66c5804d4c6ab30bff8c296c99a-edited-1024x768.jpg)
これでメニュー編集は完了です。
トップ画像を変える
![トップ画像を変える](https://sposai-trivia.com/wp-content/uploads/2024/06/29f3b91c5855774a2a47dbfec6054f99-edited-1024x768-1.jpg)
![トップ画像を変える](https://sposai-trivia.com/wp-content/uploads/2024/06/29f3b91c5855774a2a47dbfec6054f99-edited-1024x768-1.jpg)
サイトを開いた時、一番に目にする画像の変更方法です。
![管理画面の外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/29f3b91c5855774a2a47dbfec6054f99-edited-1-1024x768.jpg)
![管理画面の外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/29f3b91c5855774a2a47dbfec6054f99-edited-1-1024x768.jpg)
![トップページ・メインビジュアルを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/baea07087e7827ab1f866ad6a21ac996-edited-1024x768.jpg)
![トップページ・メインビジュアルを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/baea07087e7827ab1f866ad6a21ac996-edited-1024x768.jpg)
![各スライドの設定⇒スライド画像1で画像を選択](https://sposai-trivia.com/wp-content/uploads/2024/06/3b786b90482d84de42791ba45318450d-edited-1024x768.jpg)
![各スライドの設定⇒スライド画像1で画像を選択](https://sposai-trivia.com/wp-content/uploads/2024/06/3b786b90482d84de42791ba45318450d-edited-1024x768.jpg)
以上でトップ画像を変更できます。
ロゴ同様にサイトの顔となる部分。使用する画像によってサイトイメージが大きく変わり、サイトを更に見てくれるかどうかに関わります。
トップ画像もできればデザイナーに発注し、訪問者が興味を持つような画像を用意しましょう。
写真ではなくイラストにしたいという方にはこちらがおすすめ。当サイトで利用しているイラストをまとめて販売しております。
【RONILIGオリジナル】イラスト画像50枚セットを4,900円にて販売!
フッターを編集する
![フッターを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/91f1159b2294d5d130a7e3fe38849f52-1-edited-1024x768.png)
![フッターを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/91f1159b2294d5d130a7e3fe38849f52-1-edited-1024x768.png)
フッターの編集方法を解説します。
2つにわけて編集を行います。
フッター編集
![管理画面から外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/25bf5267105d79bfb0a4e0ed657d1597-edited-1024x768.jpg)
![管理画面から外観・カスタマイズをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/25bf5267105d79bfb0a4e0ed657d1597-edited-1024x768.jpg)
![フッターメニューから4つの項目を編集](https://sposai-trivia.com/wp-content/uploads/2024/06/786d32fe50960bbc9a2fd2c51402663f-edited-1-1024x768.jpg)
![フッターメニューから4つの項目を編集](https://sposai-trivia.com/wp-content/uploads/2024/06/786d32fe50960bbc9a2fd2c51402663f-edited-1-1024x768.jpg)
- フッターカラー設定
- コピーライト設定
- 余白設定
- SNSアイコンリストの表示
以上の4つの編集ができます。
ウィジェット編集
![ウィジェット編集](https://sposai-trivia.com/wp-content/uploads/2024/06/bdc3da0326ad50866f586b052a76fbec-2-edited-1024x768.jpg)
![ウィジェット編集](https://sposai-trivia.com/wp-content/uploads/2024/06/bdc3da0326ad50866f586b052a76fbec-2-edited-1024x768.jpg)
![管理画面から外観・カスタマイズをクリック⇒ウィジェットをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/4a393934b7c9088573c1ffcf2ea12acc-edited-1024x768.jpg)
![管理画面から外観・カスタマイズをクリック⇒ウィジェットをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/4a393934b7c9088573c1ffcf2ea12acc-edited-1024x768.jpg)
![フッター(PC)1,2,3にウィジェットを追加](https://sposai-trivia.com/wp-content/uploads/2024/06/2da5c9725ff75717f4cecaf46051fe82-1024x576-1.jpg)
![フッター(PC)1,2,3にウィジェットを追加](https://sposai-trivia.com/wp-content/uploads/2024/06/2da5c9725ff75717f4cecaf46051fe82-1024x576-1.jpg)
フッター1が左、2が真ん中、3が右
![フッター(PC)1,2,3にウィジェットを追加2](https://sposai-trivia.com/wp-content/uploads/2024/06/1649ce79f3997194b76bd4ae67a90048-1024x576-1.jpg)
![フッター(PC)1,2,3にウィジェットを追加2](https://sposai-trivia.com/wp-content/uploads/2024/06/1649ce79f3997194b76bd4ae67a90048-1024x576-1.jpg)
画像のように中央に1つだけウィジェットを置きたい場合、フッター1,3にブロックウィジェットを配置すれば2が中央にズレます。
フッター2だけに配置すると中央配置にはならないので気をつけてください。
SWELLサイト型固定ページの編集方法
![SWELLサイト型固定ページの編集方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2383239-1024x768-1.jpg)
![SWELLサイト型固定ページの編集方法](https://sposai-trivia.com/wp-content/uploads/2024/06/2383239-1024x768-1.jpg)
トップページに表示する固定ページの編集方法を解説していきます。
おしらせ欄を編集する
![おしらせ欄を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/6ccfdd8ab8a5ce381ba8cfc2aa0bdc20-edited-1-1024x768.jpg)
![おしらせ欄を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/6ccfdd8ab8a5ce381ba8cfc2aa0bdc20-edited-1-1024x768.jpg)
おしらせはサイトの企業のニュースリリースやサイトの更新情報を掲載します。
画像ではセクション用見出しで『おしらせ』と表示した下にブロックの投稿リストを使用しています。
![固定ページで投稿リストブロックを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/3b32ac477aa53c2b7255c727aba011e5-edited-1024x768.jpg)
![固定ページで投稿リストブロックを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/3b32ac477aa53c2b7255c727aba011e5-edited-1024x768.jpg)
![右側の編集メニューのsettingでレイアウトをテキスト型に設定](https://sposai-trivia.com/wp-content/uploads/2024/06/2d2feb36a9f4a13d2e8bc66572ee8898-edited-1024x768.jpg)
![右側の編集メニューのsettingでレイアウトをテキスト型に設定](https://sposai-trivia.com/wp-content/uploads/2024/06/2d2feb36a9f4a13d2e8bc66572ee8898-edited-1024x768.jpg)
表示記事数や表示項目も一緒に設定します。
サイト訪問者はこのおしらせ欄を見て、情報が新しいのか古いのかを判断します。
設定でカード型、サムネイル型にも変更できるので、お好みのデザインにあわせて使ってみてください。
カラムを編集する
![カラムを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/5722b696f4e0c765db1de3b74a539730-edited-1024x768.jpg)
![カラムを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/5722b696f4e0c765db1de3b74a539730-edited-1024x768.jpg)
カラムを使用して3つの画像を並列に設置しているブロックの編集方法です。
![固定ページでブロックリストからカラムを選択で追加](https://sposai-trivia.com/wp-content/uploads/2024/06/96d93ff00d0895b939872dec35aeecc1-edited-1024x768.jpg)
![固定ページでブロックリストからカラムを選択で追加](https://sposai-trivia.com/wp-content/uploads/2024/06/96d93ff00d0895b939872dec35aeecc1-edited-1024x768.jpg)
![カラムの数、幅を選択](https://sposai-trivia.com/wp-content/uploads/2024/06/7c96fd0b2744852de86f7ee2b46dcc02-edited-1024x768.jpg)
![カラムの数、幅を選択](https://sposai-trivia.com/wp-content/uploads/2024/06/7c96fd0b2744852de86f7ee2b46dcc02-edited-1024x768.jpg)
![右側の編集メニューでスタイルや余白を設定](https://sposai-trivia.com/wp-content/uploads/2024/06/a5d84aa5862fcd0b1788cfa765b9bfe0-edited-1024x768.jpg)
![右側の編集メニューでスタイルや余白を設定](https://sposai-trivia.com/wp-content/uploads/2024/06/a5d84aa5862fcd0b1788cfa765b9bfe0-edited-1024x768.jpg)
カラムを使うことでスッキリ見やすくコンテンツを配置できます。
内容に合わせて2カラム、3カラムを使い分けてください。
カバーの背景画像を変更する
![カバーの背景画像を変更する](https://sposai-trivia.com/wp-content/uploads/2024/06/3643d1594e90bc36a02344413a34e9a5-edited-1024x768.jpg)
![カバーの背景画像を変更する](https://sposai-trivia.com/wp-content/uploads/2024/06/3643d1594e90bc36a02344413a34e9a5-edited-1024x768.jpg)
コンテンツを重ねて表示する際の背景画像の変更方法です。
![ブロックリストからカバーを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/c60f524e72bc5c78358ce3a0695710d8-edited-1024x768.jpg)
![ブロックリストからカバーを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/c60f524e72bc5c78358ce3a0695710d8-edited-1024x768.jpg)
![背景画像をアップロードする](https://sposai-trivia.com/wp-content/uploads/2024/06/4b5edbc44bc5bde956b865a7fab3e719-edited-1024x768.jpg)
![背景画像をアップロードする](https://sposai-trivia.com/wp-content/uploads/2024/06/4b5edbc44bc5bde956b865a7fab3e719-edited-1024x768.jpg)
![オーバーレイを設定する](https://sposai-trivia.com/wp-content/uploads/2024/06/97495bda464f8801873ad439b163eb5c-edited-1024x768.jpg)
![オーバーレイを設定する](https://sposai-trivia.com/wp-content/uploads/2024/06/97495bda464f8801873ad439b163eb5c-edited-1024x768.jpg)
黒のオーバーレイに白文字を設定すると見やすくなります。
カバーの背景画像の変更は以上です
パララックス効果をつける
カバー画像と同じ表現方法でパララックス機能を使うこともできます。
パララックスとは重ね合わせたコンテンツを立体的に見せる方法です。
上下に何度もスクロールしてみてください
上下に何度もスクロールしてみてください
パララックス効果を使いたい場合、カバーではなくフルワイドブロックを使います。
![フルワイドブロックを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/59930b4031e0d36477ac4e5bd233b0cf-edited-1024x768.jpg)
![フルワイドブロックを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/59930b4031e0d36477ac4e5bd233b0cf-edited-1024x768.jpg)
![背景画像を設定](https://sposai-trivia.com/wp-content/uploads/2024/06/cba18b7a6a1ca1c3b44feeccc0bd53eb-edited-1024x768.jpg)
![背景画像を設定](https://sposai-trivia.com/wp-content/uploads/2024/06/cba18b7a6a1ca1c3b44feeccc0bd53eb-edited-1024x768.jpg)
![パララックス効果をつけるをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/dad3a5189b2d33f431cedaca6756f94c-edited-1024x768.jpg)
![パララックス効果をつけるをクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/dad3a5189b2d33f431cedaca6756f94c-edited-1024x768.jpg)
カバーとフルワイドブロックの背景画像、お好みで使い分けてください。
ボタンリンクを編集する
![](https://sposai-trivia.com/wp-content/uploads/2023/05/daniel-chen-cNaEqXSsZ0k-unsplash-scaled.jpg)
![](https://sposai-trivia.com/wp-content/uploads/2023/05/daniel-chen-cNaEqXSsZ0k-unsplash-scaled.jpg)
ボタンリンクには押した後に移動するサイトやコンテンツを指定できます。
同じページ内にある問い合わせフォームへ移動する場合
![ブロックリストからSWELLボタンを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/89510f95cf2f9cde05d6d79c1a730791-1-edited-1024x768.jpg)
![ブロックリストからSWELLボタンを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/89510f95cf2f9cde05d6d79c1a730791-1-edited-1024x768.jpg)
![右側ブロック編集メニューでボタンのスタイル、サイズ、カラー、計測設定、アイコンを設定](https://sposai-trivia.com/wp-content/uploads/2024/06/e01c5f7d1d56c56a913ef9cd7f83b300-edited-2-1024x768.jpg)
![右側ブロック編集メニューでボタンのスタイル、サイズ、カラー、計測設定、アイコンを設定](https://sposai-trivia.com/wp-content/uploads/2024/06/e01c5f7d1d56c56a913ef9cd7f83b300-edited-2-1024x768.jpg)
![ボタン下に表示されているリンク先設定をクリックし、リンク先を指定する](https://sposai-trivia.com/wp-content/uploads/2024/06/3df04d2de5081b52bddb7b118f8144f8-edited-1024x768.jpg)
![ボタン下に表示されているリンク先設定をクリックし、リンク先を指定する](https://sposai-trivia.com/wp-content/uploads/2024/06/3df04d2de5081b52bddb7b118f8144f8-edited-1024x768.jpg)
ボタンと同じページに問い合わせフォームがある場合、『#form』など半角#のあとにわかりやすい単語を指定します。
![指定した単語をリンク先にも設定する](https://sposai-trivia.com/wp-content/uploads/2024/06/8565407e30908f6fbe7fcdf53b995b6b-edited-1024x768-1.jpg)
![指定した単語をリンク先にも設定する](https://sposai-trivia.com/wp-content/uploads/2024/06/8565407e30908f6fbe7fcdf53b995b6b-edited-1024x768-1.jpg)
画像では問い合わせフォームをショートコードで設定しており、そのままショートコードをリンク先に設定することができません。この場合、直前の見出しをリンク先に設定しています。
見出しをクリックし、高度な設定を開き、HTMLアンカーに先程指定した『#form』の半角#を除いたformだけを入力。
これでボタンをクリックすると同じページ内の問い合わせフォームに移動するようになっています。
リンク先を変更すれば移動する場所も変更可能です。
違うページにある問い合わせフォームへ移動する場合
![違うページにある問い合わせフォームへ移動する場合](https://sposai-trivia.com/wp-content/uploads/2024/06/d69f165f0877f8b4dcae0a868d9a9ec9-edited-1024x768.jpg)
![違うページにある問い合わせフォームへ移動する場合](https://sposai-trivia.com/wp-content/uploads/2024/06/d69f165f0877f8b4dcae0a868d9a9ec9-edited-1024x768.jpg)
ボタンとは違うページにある問い合わせフォームへ移動する場合、ページ内リンクSTEP3のリンク先を変更するだけ。
例えばhttp://samplesite.com/contactというページにフォームがある場合、リンク先の#formの前にページを加え、
http://samplesite.com/contact/#form
にすれば完了
問い合わせ専用ページを用意している場合は、このケースが多いですね。
メールの送信先を変更する
![メールの送信先を変更する](https://sposai-trivia.com/wp-content/uploads/2024/06/dc460f40e947f4e3df5ae75e8d63be9d-edited-1024x640.png)
![メールの送信先を変更する](https://sposai-trivia.com/wp-content/uploads/2024/06/dc460f40e947f4e3df5ae75e8d63be9d-edited-1024x640.png)
『メールから』のボタンをクリックするとメーラーが起動し、自動で宛先が入る設定ができます。
イメージがわかない方が一度ボタンを押してみてください。メーラーが起動してぼくあてのメール作成が立ち上がります。くれぐれもいたずらはやめてくださいね!
宛先を変更する方法は以下の通り。
![右側ブロック編集メニューの広告タグ設定を開く](https://sposai-trivia.com/wp-content/uploads/2024/06/cb71a6bb3828ad3bebf7af2550b391bc-edited-1024x768.jpg)
![右側ブロック編集メニューの広告タグ設定を開く](https://sposai-trivia.com/wp-content/uploads/2024/06/cb71a6bb3828ad3bebf7af2550b391bc-edited-1024x768.jpg)
<a href=”mailto:〇〇〇@gmail.com“>メール送信</a>
の赤字の部分に設定したいメールアドレスを入力してコードを入力します。
これで送信先のアドレス変更は完了です。
料金表を編集する
![料金表を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/8e5aeca08247f232f9d3b58263d30a53-edited-1024x767.png)
![料金表を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/8e5aeca08247f232f9d3b58263d30a53-edited-1024x767.png)
料金表の編集方法についてです。
セル内の数値は打ち込むだけなので割愛し、デザインの変更について解説します。
![テーブルブロックを選択し、右側ブロック編集画面を表示する](https://sposai-trivia.com/wp-content/uploads/2024/06/c6111a15c2ec835293d9073b0ea1fb19-edited-1024x768.jpg)
![テーブルブロックを選択し、右側ブロック編集画面を表示する](https://sposai-trivia.com/wp-content/uploads/2024/06/c6111a15c2ec835293d9073b0ea1fb19-edited-1024x768.jpg)
編集できる内容は、
- スタイル⇒セルのラインや色のデザインを変更
- 設定⇒セルの幅、ヘッダー・フッターの有無
- テーブル設定⇒テーブル内のフォント配置、最低幅、スマホでの並び設定、1列目の強調
![テーブルブロックを選択し、右側ブロック編集画面を表示する2](https://sposai-trivia.com/wp-content/uploads/2024/06/0bdaac7166bc53442d1acfa0277c1e68-edited-1024x768.jpg)
![テーブルブロックを選択し、右側ブロック編集画面を表示する2](https://sposai-trivia.com/wp-content/uploads/2024/06/0bdaac7166bc53442d1acfa0277c1e68-edited-1024x768.jpg)
- 横スクロール設定⇒表示サイズを大きくし、スクロールしながら全体を確認できるようにする
- テーブルヘッダー⇒一番上のセルの色を変更
- デバイス制限⇒選択したデバイスでの閲覧時のみ表示させる
色々試しながら見やすいデザインに変更してみてください。
お客様の声を編集する
![お客様の声を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/2089dc18f078c493daaf9f725b8ad1b4-edited-1024x768.png)
![お客様の声を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/2089dc18f078c493daaf9f725b8ad1b4-edited-1024x768.png)
画像のお客様の声の構成は、
- 見出し
- カラム
- ボーダー(外枠)
- テキスト
- ショートコード⇒評価スター
になっています。
ショートコード以外はカラムを編集するで解説済みなので、評価スターについて解説します。
![段落からショートコード、評価スターを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/bfb89633a85b337a2360bd99a04d7445-edited-1024x768.jpg)
![段落からショートコード、評価スターを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/bfb89633a85b337a2360bd99a04d7445-edited-1024x768.jpg)
ショートコードが挿入されます。
![星の数を変える](https://sposai-trivia.com/wp-content/uploads/2024/06/443411e7c6dc923ebaa208fa8d40ea74-edited-1024x768.jpg)
![星の数を変える](https://sposai-trivia.com/wp-content/uploads/2024/06/443411e7c6dc923ebaa208fa8d40ea74-edited-1024x768.jpg)
ショートコード内5/5の数字を変えれば星の数、色が付いた星の数を変更することができます。
星があるとシンプルな構成にアクセントがつけられるし、訪問者もわかりやすいですよね!
全て星5つにしたいところですが、そのあたりはバランスを見て
STEPブロックを編集する
![STEPブロックを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/572eb14f9a24281410cb12f136d800fa-edited-1024x768.jpg)
![STEPブロックを編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/572eb14f9a24281410cb12f136d800fa-edited-1024x768.jpg)
この記事でもさんざん利用しているSTEPブロックの編集を解説します。
![ステップブロックを選択して配置](https://sposai-trivia.com/wp-content/uploads/2024/06/4f70672dc1e30d73201f103c998d7b4b-edited-1024x768.jpg)
![ステップブロックを選択して配置](https://sposai-trivia.com/wp-content/uploads/2024/06/4f70672dc1e30d73201f103c998d7b4b-edited-1024x768.jpg)
![右側メニューで各項目を編集](https://sposai-trivia.com/wp-content/uploads/2024/06/dfd3df1b88efa19466d0db8a6e372e33-edited-1024x768.jpg)
![右側メニューで各項目を編集](https://sposai-trivia.com/wp-content/uploads/2024/06/dfd3df1b88efa19466d0db8a6e372e33-edited-1024x768.jpg)
編集メニューで変えられるものは4つ
- スタイル
- 文字
- 始まりの番号
- ステップ番号の形
![タイトル、説明文を入力](https://sposai-trivia.com/wp-content/uploads/2024/06/f5bec2af3475179d8d82e987decbd669-edited-1024x768.png)
![タイトル、説明文を入力](https://sposai-trivia.com/wp-content/uploads/2024/06/f5bec2af3475179d8d82e987decbd669-edited-1024x768.png)
以上でステップブロックの完成です。
STEPブロックに背景色を加える
![STEPブロックに背景色を加える](https://sposai-trivia.com/wp-content/uploads/2024/06/d4121dea3f6495b28ddb276b822b00e8-edited-1024x769.png)
![STEPブロックに背景色を加える](https://sposai-trivia.com/wp-content/uploads/2024/06/d4121dea3f6495b28ddb276b822b00e8-edited-1024x769.png)
ステップブロックに背景色を加えたい場合、グループを使います。
![ステップアイコンをクリックして、グループを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/408a31a48a09abd4c4712f71e97829fc-edited-1024x768.jpg)
![ステップアイコンをクリックして、グループを選択](https://sposai-trivia.com/wp-content/uploads/2024/06/408a31a48a09abd4c4712f71e97829fc-edited-1024x768.jpg)
![右側メニューの色、背景を選択し、色を選ぶ](https://sposai-trivia.com/wp-content/uploads/2024/06/2899d27bc3660dc04a774c7f84f0a60b-edited-1024x768.jpg)
![右側メニューの色、背景を選択し、色を選ぶ](https://sposai-trivia.com/wp-content/uploads/2024/06/2899d27bc3660dc04a774c7f84f0a60b-edited-1024x768.jpg)
グループ設定をすればボーダー、スタイルも変更できます。
サイトに合うデザインをお選びください。
よくある質問を編集する
![よくある質問を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/9ec7bb5e6982ef85e13ed01c6fb13b84-edited-1-1024x768.png)
![よくある質問を編集する](https://sposai-trivia.com/wp-content/uploads/2024/06/9ec7bb5e6982ef85e13ed01c6fb13b84-edited-1-1024x768.png)
よくあるご質問ではアコーディオンブロックを使用しています。
![アコーディオンブロックを選択し配置](https://sposai-trivia.com/wp-content/uploads/2024/06/swell-top01-1024x576.jpg)
![アコーディオンブロックを選択し配置](https://sposai-trivia.com/wp-content/uploads/2024/06/swell-top01-1024x576.jpg)
![テキストを入力…の欄に質問を入力](https://sposai-trivia.com/wp-content/uploads/2024/06/fb9c361ac607ef85ffae6fe4bc8aa00d-edited-1024x768.jpg)
![テキストを入力…の欄に質問を入力](https://sposai-trivia.com/wp-content/uploads/2024/06/fb9c361ac607ef85ffae6fe4bc8aa00d-edited-1024x768.jpg)
![STEP2の下部に質問に対する答えを入力](https://sposai-trivia.com/wp-content/uploads/2024/06/fec5584c3c18cb21fc8d1fdf0f8eb20a-1-edited-1024x768.jpg)
![STEP2の下部に質問に対する答えを入力](https://sposai-trivia.com/wp-content/uploads/2024/06/fec5584c3c18cb21fc8d1fdf0f8eb20a-1-edited-1024x768.jpg)
![新たにQ&Aを追加する場合、画像の+をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/443ef37988c0e4aeaf9cf272c755d2a8-edited-1024x768.jpg)
![新たにQ&Aを追加する場合、画像の+をクリック](https://sposai-trivia.com/wp-content/uploads/2024/06/443ef37988c0e4aeaf9cf272c755d2a8-edited-1024x768.jpg)
必要な数だけQ&Aを追加して入力する流れです。
訪問者の疑問を解消するのに重要な項目なので、訪問者目線で必要な分だけ作成しましょう!
まとめ
膨大な量の解説になってしまったので、最後にまとめます。
本記事では、
- サイト型とブログ型の違い
- サイト型とブログ型の切り替え方法
- サイトロゴをかえる
- メニューを編集する
- トップ画像を変える
- フッターを編集する
- おしらせ欄を編集する
- カラムを編集する
- カバーの背景画像を変更する
- パララックス効果をつける
- ボタンリンクを編集する
- 料金表を編集する
- お客様の声を編集する
- STEPブロックを編集する
- よくある質問を編集する
以上について解説してきました。
これだけマスターすれば、充実したサイトを作ることができると思います。
本記事ではプラグインを使用した問い合わせフォームの編集まで解説しきれませんでした。
別記事で詳しく紹介していますので、リンクからご覧ください。
![](https://sposai-trivia.com/wp-content/uploads/2023/05/1bc81c72-a034-4308-8c8a-28f59532c62c-1-1-300x169.jpeg)
![](https://sposai-trivia.com/wp-content/uploads/2023/05/1bc81c72-a034-4308-8c8a-28f59532c62c-1-1-300x169.jpeg)
コメント