【SWELL活用術】サイト型トップページ作成手順：WordPress初心者のためのマニュアル

SWELLで作成されたサイト型ページを見ると、『こんなサイトを自分も作ってみたい』と思いますよね。そんな要望に応えるため、今回はマニュアルを用意しました。

全部マスターするとWordPressに初めて触れる初心者でも、コーポレートサイトを自分で作れるほどの内容になっています。

もちろん全部覚える必要はないので、今回必要なところだけ目次で確認してチェックしてみてください！

※編集したい項目を目次から探して選択してください。スクショしながら作業すると便利です。

サイト型ってなに？

SWELLではトップページをサイト型、ブログ型のいずれかから選択ができます。

今回はデザインカスタマイズの幅が広いサイト型の編集方法について解説していきます。

サイト型とブログ型の切り替え方法

まずはサイト型とブログ型の切り替え方法を解説します。

トップページを新しく作成する場合は管理画面の左メニュー、固定ページ⇒新規追加でページを用意します。

切り替え方は以下の通り

以上でサイト型トップページに切り替わります。

⬆ 目次に戻る

SWELLサイト型トップページの編集方法

サイト型ページで始めに操作するトップページの編集方法を解説していきます。

サイトロゴをかえる

サイトを開いた時に表示されているサイトロゴの編集方法です。

これでロゴを変更できます。ロゴはサイトの顔になるので、じっくり選びましょう。

ロゴを自分で作るのが難しい方は、ココナラでの発注がおすすめ！2,000〜3,000円くらいで作ってくれる方がいるので依頼してしまいましょう。

また、どうしても自分でロゴを作りたい！という方にはCanva Pro がおすすめ。画像編集が初めての方でもプロっぽく作れて素材も豊富。しかも今なら30日間無料でProコースが使える。

試しに使ってみて、今後も使うらなら継続、使う機会はありそうだけどProはいらないならFreeに変更が可能。サイト運営をしていると必ず使う機会があるので、いつでも使えるようにはしておきましょう。

＼　30日間無料で使える　／

メニューを編集する

ヘッダーにあるメニュー（グローバルナビ）の編集です。

これでメニュー編集は完了です。

トップ画像を変える

サイトを開いた時、一番に目にする画像の変更方法です。

以上でトップ画像を変更できます。

ロゴ同様にサイトの顔となる部分。使用する画像によってサイトイメージが大きく変わり、サイトを更に見てくれるかどうかに関わります。

トップ画像もできればデザイナーに発注し、訪問者が興味を持つような画像を用意しましょう。

フッターを編集する

フッターの編集方法を解説します。

２つにわけて編集を行います。

フッター編集

ウィジェット編集

画像のように中央に１つだけウィジェットを置きたい場合、フッター１，３にブロックウィジェットを配置すれば２が中央にズレます。

フッター２だけに配置すると中央配置にはならないので気をつけてください。

⬆ 目次に戻る

SWELLサイト型固定ページの編集方法

トップページに表示する固定ページの編集方法を解説していきます。

おしらせ欄を編集する

おしらせはサイトの企業のニュースリリースやサイトの更新情報を掲載します。

画像ではセクション用見出しで『おしらせ』と表示した下にブロックの投稿リストを使用しています。

サイト訪問者はこのおしらせ欄を見て、情報が新しいのか古いのかを判断します。

設定でカード型、サムネイル型にも変更できるので、お好みのデザインにあわせて使ってみてください。

カラムを編集する

カラムを使用して３つの画像を並列に設置しているブロックの編集方法です。

カラムを使うことでスッキリ見やすくコンテンツを配置できます。

内容に合わせて２カラム、３カラムを使い分けてください。

カバーの背景画像を変更する

コンテンツを重ねて表示する際の背景画像の変更方法です。

カバーの背景画像の変更は以上です

パララックス効果をつける

カバー画像と同じ表現方法でパララックス機能を使うこともできます。

パララックスとは重ね合わせたコンテンツを立体的に見せる方法です。

パララックス効果を使いたい場合、カバーではなくフルワイドブロックを使います。

カバーとフルワイドブロックの背景画像、お好みで使い分けてください。

ボタンリンクを編集する

ボタンリンクには押した後に移動するサイトやコンテンツを指定できます。

同じページ内にある問い合わせフォームへ移動する場合

これでボタンをクリックすると同じページ内の問い合わせフォームに移動するようになっています。

リンク先を変更すれば移動する場所も変更可能です。

違うページにある問い合わせフォームへ移動する場合

ボタンとは違うページにある問い合わせフォームへ移動する場合、ページ内リンクSTEP3のリンク先を変更するだけ。

例えばhttp://samplesite.com/contactというページにフォームがある場合、リンク先の#formの前にページを加え、

http://samplesite.com/contact/#form

にすれば完了

問い合わせ専用ページを用意している場合は、このケースが多いですね。

メールの送信先を変更する

『メールから』のボタンをクリックするとメーラーが起動し、自動で宛先が入る設定ができます。

イメージがわかない方が一度ボタンを押してみてください。メーラーが起動してぼくあてのメール作成が立ち上がります。くれぐれもいたずらはやめてくださいね！

宛先を変更する方法は以下の通り。

これで送信先のアドレス変更は完了です。

⬆ 目次に戻る

料金表を編集する

料金表の編集方法についてです。

セル内の数値は打ち込むだけなので割愛し、デザインの変更について解説します。

色々試しながら見やすいデザインに変更してみてください。

お客様の声を編集する

画像のお客様の声の構成は、

になっています。

ショートコード以外はカラムを編集するで解説済みなので、評価スターについて解説します。

星があるとシンプルな構成にアクセントがつけられるし、訪問者もわかりやすいですよね！

全て星５つにしたいところですが、そのあたりはバランスを見て

STEPブロックを編集する

この記事でもさんざん利用しているSTEPブロックの編集を解説します。

以上でステップブロックの完成です。

STEPブロックに背景色を加える

ステップブロックに背景色を加えたい場合、グループを使います。

グループ設定をすればボーダー、スタイルも変更できます。

サイトに合うデザインをお選びください。

よくある質問を編集する

よくあるご質問ではアコーディオンブロックを使用しています。

必要な数だけQ&Aを追加して入力する流れです。

訪問者の疑問を解消するのに重要な項目なので、訪問者目線で必要な分だけ作成しましょう！

⬆ 目次に戻る

まとめ

膨大な量の解説になってしまったので、最後にまとめます。

本記事では、

以上について解説してきました。

これだけマスターすれば、充実したサイトを作ることができると思います。

本記事ではプラグインを使用した問い合わせフォームの編集まで解説しきれませんでした。

別記事で詳しく紹介していますので、リンクからご覧ください。

⬆ 目次に戻る