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

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

SWELLのサイト型ページを自分で編集したいんだけど、編集方法がわからないよ〜。

こんなお悩みを解決します。

こんにちはろにぃです。サイト制作を始めてから10年

・月収100万円のサイトを作成、運営
・クライアントのサイトの作成、編集、管理
・SEO相談

などの経験を活かして、サイト制作やSEOについて情報発信をしております。

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

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

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

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

目次

サイト型ってなに?

サイト型ってなに?

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

サイト型

各ページへアクセスしやすくリンクが設置されており、読者がサイトを巡回しやすいデザイン

コーポレートサイトなどに使用可能

ブログ型

新着記事が並び、更新状況がひと目でわかるデザイン

ブログサイト定番のデザイン

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

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

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

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

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

切り替え方は以下の通り

STEP
管理画面の外観、カスタマイズをクリック
管理画面の外観、カスタマイズをクリック
STEP
WordPress設定をクリック
WordPress設定をクリック
STEP
ホームページ設定をクリック
ホームページ設定をクリック
STEP
ホームページを固定ページに指定する
ホームページを固定ページに指定する

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

⬆ 目次に戻る

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

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

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

サイトロゴをかえる

サイトロゴをかえる

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

STEP
管理画面から外観・カスタマイズをクリック
管理画面から外観・カスタマイズをクリック
STEP
ヘッダーをクリック
ヘッダーをクリック
STEP
ヘッダーロゴの設定で用意した画像データを選択
ヘッダーロゴの設定で用意した画像データを選択
ヘッダーロゴの設定で用意した画像データを選択2

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

メニューを編集する

メニューを編集する

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

STEP
管理画面のカスタマイズ・メニューをクリック
管理画面のカスタマイズ・メニューをクリック
STEP
新しいメニューを作成
新しいメニューを作成
STEP
メニュー名、メニュー設定を行い保存
メニュー名、メニュー設定を行い保存

メニュー名は何でも構いません。わかりやすく設定しましょう。

メニューの位置でグローバルナビにチェックをいれます。

STEP
編集するメニューを選択で作成したメニューを選択⇒追加したい固定ページを選択しメニューに追加
編集するメニューを選択で作成したメニューを選択⇒追加したい固定ページを選択しメニューに追加

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

トップ画像を変える

トップ画像を変える

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

STEP
管理画面の外観・カスタマイズをクリック
管理画面の外観・カスタマイズをクリック
STEP
トップページ・メインビジュアルを選択
トップページ・メインビジュアルを選択
STEP
各スライドの設定⇒スライド画像1で画像を選択
各スライドの設定⇒スライド画像1で画像を選択

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

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

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

写真ではなくイラストにしたいという方にはこちらがおすすめ。当サイトで利用しているイラストをまとめて販売しております。

【RONILIGオリジナル】イラスト画像50枚セットを4,900円にて販売!

フッターを編集する

フッターを編集する

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

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

STEP
管理画面から外観・カスタマイズをクリック
管理画面から外観・カスタマイズをクリック
STEP
フッターメニューから4つの項目を編集
フッターメニューから4つの項目を編集
  1. フッターカラー設定
  2. コピーライト設定
  3. 余白設定
  4. SNSアイコンリストの表示

以上の4つの編集ができます。

ウィジェット編集

ウィジェット編集
STEP
管理画面から外観・カスタマイズをクリック⇒ウィジェットをクリック
管理画面から外観・カスタマイズをクリック⇒ウィジェットをクリック
STEP
フッター(PC)1,2,3にウィジェットを追加
フッター(PC)1,2,3にウィジェットを追加

フッター1が左、2が真ん中、3が右

フッター(PC)1,2,3にウィジェットを追加2

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

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

⬆ 目次に戻る

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

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

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

おしらせ欄を編集する

おしらせ欄を編集する

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

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

STEP
固定ページで投稿リストブロックを選択
固定ページで投稿リストブロックを選択
STEP
右側の編集メニューのsettingでレイアウトをテキスト型に設定
右側の編集メニューのsettingでレイアウトをテキスト型に設定

表示記事数や表示項目も一緒に設定します。

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

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

カラムを編集する

カラムを編集する

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

STEP
固定ページでブロックリストからカラムを選択で追加
固定ページでブロックリストからカラムを選択で追加
STEP
カラムの数、幅を選択
カラムの数、幅を選択
STEP
右側の編集メニューでスタイルや余白を設定
右側の編集メニューでスタイルや余白を設定

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

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

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

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

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

STEP
ブロックリストからカバーを選択
ブロックリストからカバーを選択
STEP
背景画像をアップロードする
背景画像をアップロードする
STEP
オーバーレイを設定する
オーバーレイを設定する

黒のオーバーレイに白文字を設定すると見やすくなります。

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

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

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

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

上下に何度もスクロールしてみてください

上下に何度もスクロールしてみてください

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

STEP
フルワイドブロックを選択
フルワイドブロックを選択
STEP
背景画像を設定
背景画像を設定
STEP
パララックス効果をつけるをクリック
パララックス効果をつけるをクリック

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

ボタンリンクを編集する

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

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

STEP
ブロックリストからSWELLボタンを選択
ブロックリストからSWELLボタンを選択
STEP
右側ブロック編集メニューでボタンのスタイル、サイズ、カラー、計測設定、アイコンを設定
右側ブロック編集メニューでボタンのスタイル、サイズ、カラー、計測設定、アイコンを設定
STEP
ボタン下に表示されているリンク先設定をクリックし、リンク先を指定する
ボタン下に表示されているリンク先設定をクリックし、リンク先を指定する

ボタンと同じページに問い合わせフォームがある場合、『#form』など半角#のあとにわかりやすい単語を指定します。

STEP
指定した単語をリンク先にも設定する
指定した単語をリンク先にも設定する

画像では問い合わせフォームをショートコードで設定しており、そのままショートコードをリンク先に設定することができません。この場合、直前の見出しをリンク先に設定しています。

見出しをクリックし、高度な設定を開き、HTMLアンカーに先程指定した『#form』の半角#を除いたformだけを入力。

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

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

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

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

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

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

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

にすれば完了

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

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

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

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

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

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

STEP
右側ブロック編集メニューの広告タグ設定を開く
右側ブロック編集メニューの広告タグ設定を開く
STEP
広告タグを直接入力欄のコードを変更する

<a href=”mailto:〇〇〇@gmail.com“>メール送信</a>
赤字の部分に設定したいメールアドレスを入力してコードを入力します。

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

⬆ 目次に戻る

料金表を編集する

料金表を編集する

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

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

STEP
テーブルブロックを選択し、右側ブロック編集画面を表示する
テーブルブロックを選択し、右側ブロック編集画面を表示する

編集できる内容は、

  1. スタイル⇒セルのラインや色のデザインを変更
  2. 設定⇒セルの幅、ヘッダー・フッターの有無
  3. テーブル設定⇒テーブル内のフォント配置、最低幅、スマホでの並び設定、1列目の強調
テーブルブロックを選択し、右側ブロック編集画面を表示する2
  1. 横スクロール設定⇒表示サイズを大きくし、スクロールしながら全体を確認できるようにする
  2. テーブルヘッダー⇒一番上のセルの色を変更
  3. デバイス制限⇒選択したデバイスでの閲覧時のみ表示させる

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

お客様の声を編集する

お客様の声を編集する

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

  • 見出し
  • カラム
  • ボーダー(外枠)
  • テキスト
  • ショートコード⇒評価スター

になっています。

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

STEP
段落からショートコード、評価スターを選択
段落からショートコード、評価スターを選択

ショートコードが挿入されます。

STEP
星の数を変える
星の数を変える

ショートコード内5/5の数字を変えれば星の数、色が付いた星の数を変更することができます。

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

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

STEPブロックを編集する

STEPブロックを編集する

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

STEP
ステップブロックを選択して配置
ステップブロックを選択して配置
STEP
右側メニューで各項目を編集
右側メニューで各項目を編集

編集メニューで変えられるものは4つ

  1. スタイル
  2. 文字
  3. 始まりの番号
  4. ステップ番号の形
STEP
タイトル、説明文を入力
タイトル、説明文を入力

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

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

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

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

STEP
ステップアイコンをクリックして、グループを選択
ステップアイコンをクリックして、グループを選択
STEP
右側メニューの色、背景を選択し、色を選ぶ
右側メニューの色、背景を選択し、色を選ぶ

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

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

よくある質問を編集する

よくある質問を編集する

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

STEP
アコーディオンブロックを選択し配置
アコーディオンブロックを選択し配置
STEP
テキストを入力…の欄に質問を入力
テキストを入力…の欄に質問を入力
STEP
STEP2の下部に質問に対する答えを入力
STEP2の下部に質問に対する答えを入力
STEP
新たにQ&Aを追加する場合、画像の+をクリック
新たにQ&Aを追加する場合、画像の+をクリック

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

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

⬆ 目次に戻る

まとめ

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

本記事では、

サイト型ってなに?
  • サイト型とブログ型の違い
  • サイト型とブログ型の切り替え方法
SWELLサイト型トップページの編集方法
  • サイトロゴをかえる
  • メニューを編集する
  • トップ画像を変える
  • フッターを編集する
SWELLサイト型固定ページの編集方法
  • おしらせ欄を編集する
  • カラムを編集する
  • カバーの背景画像を変更する
  • パララックス効果をつける
  • ボタンリンクを編集する
  • 料金表を編集する
  • お客様の声を編集する
  • STEPブロックを編集する
  • よくある質問を編集する

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

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

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

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

⬆ 目次に戻る

ホームページサポートサービス
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次