SWELLサイト型!おしゃれなトップページの作り方【画像39枚でカスタマイズ手順を解説】

お悩み

SWELLでサイト型のおしゃれなトップページが作りたい!

おしゃれなWordPressテーマSWELLを購入したら、サイト型のトップページ作りたくなりますよね。

おしゃれなトップページは作っていてもワクワクしますし、読者も関心を持ってブログを閲覧してくれます。

この記事ではSWELLのサイト型トップページのカスタマイズの方法をご紹介します。

今回はサンプルで以下の「旅行ブログ」を作ってみましょう。

サンプルのデモサイトはこちら

DEMO4
この記事でわかること
  • SWELLのサイト型トップページの作り方
  • 実際にサイト型トップページを作る手順(サンプルはおしゃれな旅行ブログ!)

筆者はこんな人

  • 本業は企業のマーケティング担当(ブログは月100万PV超)
  • 副業ブログ6ヶ月目
  • 4ヶ月目で5桁達成
  • 5ヶ月目で月3万円達成
  • 最高収益5.6万円(5.5~6.5ヶ月の期間)
こやん

よろしくお願いします!

目次

【下準備】固定ページで「ホームページ」と「投稿ページ」を用意する

まずはサイト型トップページを作るための下準備をしましょう。

以下の手順で順番に進めていけばOKです。

STEP
SWELLをインストールして設定

SWELLのご購入&インストール手順は以下の記事でご紹介しています。

ちなみにインストール後の初期デザインがこちら。

swellインストール後のデザイン
なるほど!

このままでも十分おしゃれ!

STEP
固定ページで「ホームページ」と「投稿ページ」を作る

WordPressの初期設定は新着記事一覧が表示される「ブログ型」になっています。

サイト型にするためには固定ページで「ホームページ(ブログの一番最初のページ)」と「投稿ページ」を個別で用意します。

WordPressの管理画面から、「固定ページ」→「新規追加」をクリック

swellでサイト型ブログを作る手順
STEP
「ホームページ」の作成
swellでサイト型ブログを作る手順
  1. ページタイトル:ひとまず「homepage」と入力
  2. 「公開」をクリック

これでホームページが完成しました!

同じ手順で「投稿ページ」も作ります。

STEP
「投稿ページ」の作成
swellでサイト型ブログを作る手順

同じ手順で「固定ページ」→「新規追加」をクリック。

swellでサイト型ブログを作る手順
  1. ページタイトル:「newposts」や「新着記事一覧」と入力
  2. 「公開」をクリック

これで投稿ページも完成です。

STEP
「ホームページ」「投稿ページ」の設定
swellでサイト型ブログを作る手順
  1. WordPress管理メニュー「設定」をクリック
  2. 「表示設定」をクリック
  3. ホームページの表示:「固定ページ」にチェックを入れる→ホームページに「homepage」→投稿ページに「new posts」を選択
  4. 「変更を保存」をクリック

これで下準備は完了です。

今回ホームページのタイトルは「homepage」にしましたが、ここは本来ブログの中で一番SEOに効く部分です。SEOキーワードを取り入れた渾身のページタイトルを入れましょう。

次はサイト型ブログの基本部分を作っていきましょう。

【基本】サイト型ブログにカスタマイズしよう

swellでサイト型ブログを作る手順

現在のデザインはこんな感じです。

いくつかのエリアに分かれていますが、コンテンツエリアのサイドバーが「ブログ型」を強調しているので、これを消しましょう

STEP
「カスタマイズ」をクリックしてカスタマイザーを開く
swellでサイト型ブログを作る手順
swellでサイト型ブログを作る手順
カスタマイザーを開くとこんな感じ
STEP
サイドバーを消す
swellでサイト型ブログを作る手順
  1. 「サイドバー」をクリック
  2. 「トップページにサイドバーを表示する」のチェックを外す
  3. 「公開」をクリック
swellでサイト型ブログを作る手順

トップページのサイドバーが消えました。

これで断然「サイト型」っぽくなりました。

基本の設定はここまでで、あとは自由に設定をしていきます。

各部分の設定場所は以下。

  • ヘッダーエリア:カスタマイザーの「ヘッダー」で編集できる
  • ビルボードエリア:カスタマイザーの「トップページ」で編集できる(大きい写真部分は「メインビジュアル」、流れている投稿部分は「記事スライダー」で設定できる)
  • コンテンツエリア:固定ページ「homepage」で編集できる

本当にいろんなことができるので、たくさん遊んでみましょう!

とはいえ、作り方のサンプルが欲しいな〜という方へ、サイト型のデモサイト制作手順を以下公開します

あくまでもサンプルなので、ご自身の好きなようにアレンジしながら作り込んでみてください。

今回は旅行系のブログをサイト型で作成していきます。

こやん

ちょっと長くなりますが、簡単に作ってみましょう!

わかりやすいようにカスタマイザーで都度「公開」の手順を入れていきますが、すべての設定ができてから、まとめて「公開」でもOKです(本来はそちらの方がおすすめです)。

【応用1】カスタマイザーを使ってヘッダーとメインビジュアルを設定しよう

まずはカスタマイザーを使ってトップページのヘッダーやビルボードエリアを作っていきましょう。

STEP
メインビジュアルを設定する
swellでサイト型ブログを作る手順
  1. 「トップページ」をクリック
  2. 「メインビジュアル」をクリック
  3. 各スライドの設定:スライド画像[1]の「画像を選択」から挿入したい画像を選ぶ
swellでサイト型ブログを作る手順

こんな感じで画像が入ります。

メインビジュアルに画像を複数入れたい場合は、「スライド画像[1]」をスクロールすると下に追加画像を入れる箇所が出てきます。

メインビジュアルを入れたのに表示されないという方は、ブログのセキュリティが関係しているかもしれません。

以下の記事をご参照ください。

STEP
メインビジュアルを調整する
swellでサイト型ブログを作る手順

メインビジュアルでインパクトを出したいので、全画面表示の設定をします。

  1. 「Scrollボタンを表示する」にチェック
  2. メインビジュアルの高さ設定:「ウィンドウサイズにフィットさせる」
swellでサイト型ブログを作る手順
  1. ナビゲーションの表示設定:「ページネーションを表示する」にチェック
  2. テキストの固定表示設定:「スライド1枚目のテキストを常に表示する」にチェック

ちなみにスライドのテキストは画像設定の下に入力欄があります。

swellでサイト型ブログを作る手順
STEP
メインビジュアルの設定が完了したら「公開」する
swellでサイト型ブログを作る手順

ひとまず今回はメインビジュアルの設定はこれでOKなので、

  1. 「公開」をクリック
  2. 「<」をクリックして戻る
STEP
記事スライダーを消す
swellでサイト型ブログを作る手順

今回のサンプルでもでは記事スライダーを外したいので以下の手順で消します。

  1. 「記事スライダー」をクリック
  2. 記事スライダーを設置するかどうか:「設置しない」にチェック
  3. 「公開」をクリック
  4. 「<」で戻る
swellでサイト型ブログを作る手順

記事スライダーが消えました。

STEP
ヘッダーの設定

続いてヘッダーを設定していきます。

swellでサイト型ブログを作る手順
  1. 「ヘッダー」をクリック
  2. ヘッダーロゴの設定:ロゴ画像を入れたい場合は「画像を変更」から選択(今回はサイズ32で設定)
  3. トップページでの特別設定:ヘッダーの背景を透明にするかどうかで「する(文字色:白)」を選択、白文字のロゴを追加
swellでサイト型ブログを作る手順

こんな感じで、ヘッダーバーの部分までメインビジュアルが伸ばせました。よりダイナミックです。

完了したら、

  1. 「公開」をクリック
  2. 「<」で戻る
STEP
キャッチフレーズの設定
swellでサイト型ブログを作る手順
  1. 「WordPress設定」をクリック
  2. 「サイト基本情報」をクリック
swellでサイト型ブログを作る手順
  1. 「キャッチフレーズ」にテキストを入れる
  2. 「公開」をクリック
  3. 「<」で戻る
STEP
サイトのカラー設定
swellでサイト型ブログを作る手順
  1. 「サイト全体設定」をクリック
  2. 「基本カラー」をクリック
swellでサイト型ブログを作る手順
  1. 好きな色を選ぶ
  2. 「公開」をクリック
  3. カスタマイザーを使用したすべての設定が完了したので「×」を押してカスタマイザーを閉じる
STEP
ダイナミックなトップページが完成!
swellでサイト型ブログを作る手順
なるほど!

なかなかいい感じです!サイト型っぽくなってきました

ここからは固定ページでコンテンツの編集をしていきます。

固定ページは記事作成とほぼ同じ手順なので、カスタマイザーよりもわかりやすいです。

【応用2】トップページを作り込もう

ここからはコンテンツエリアを作り込んでいきます。

【下準備】で作った固定ページ「homepage」に手を加えていきます。

STEP
「固定ページを編集」をクリック
swellでサイト型ブログを作る手順

WordPressの管理画面→固定ページ一覧→homepage

でもOKです。

STEP
フルワイドブロックでコンテンツもダイナミックにしよう

サイト型のトップページでおすすめなブロックが「フルワイドブロック」です。

画面幅いっぱいにレイアウトすることで、ダイナミックなサイト型ブログが作れます。

サンプル手順は以下。

swellでサイト型ブログを作る手順

記事作成画面の左上にある「+」をクリック

swellでサイト型ブログを作る手順
  1. 検索バーに「フルワイド」と入力
  2. 「フルワイド」をクリック

画面幅いっぱいのフルワイドブロックができました。

STEP
フルワイドブロックの設定
swellでサイト型ブログを作る手順

今回私はこんな感じで設定します。

プレビューはこんな感じ。

swellでサイト型ブログを作る手順

上下の境界線の形状を「波」にしたので、SWELLっぽい波ができました。

こやん

コンテンツの境界線に使えるのでとても便利です

STEP
フルワイドブロックを使いながら仕上げていく

私はサイト型のトップページを作るとき、フルワイドブロックを並べながら作り込んでいきます。

その他にも「カラムブロック」「投稿リストブロック」をよく使用します。

2021/09:新しく「リッチカラムブロック」機能がリリースされたので、カラム間の余白も指定できるようになりました!

「投稿リストブロック」で記事を呼び出す時は、WordPress管理画面の「投稿」→「新規追加」から記事を作成しておく必要があります。

STEP
仕上がりイメージ

フルワイドブロック、リッチカラム、投稿リスト、ギャラリーを使って作った各セクションです。

swellでサイト型ブログを作ったイメージ
swellでサイト型ブログを作ったイメージ
swellでサイト型ブログを作ったイメージ
swellでサイト型ブログを作ったイメージ
STEP
完成したら「更新」しよう
swellでサイト型ブログを作る手順

ホームページが完成したら、忘れずに「更新」しておきましょう。

これでホームページは完成です!

かなり仕上がってまいりました。

最後にフッターを作って仕上げです!

【応用3】フッターエリアをカスタマイズ

フッターエリアは再びカスタマイザーで編集します。

なるほど!

欲しい人だけ作ればOK!

フッターエリアには自己紹介・運営者情報・プライバシーポリシー・月別アーカイブなどを入れている人が多いです。

STEP
フッターエリアを選ぶ
swellでサイト型ブログを作る手順
  1. 「ウィジェット」をクリック
  2. 「フッター(PC)1〜3」のどれかを選ぶ

それぞれにウィジェットを入れることでフッターが3列まで作れます。

STEP
ウィジェットを追加する
swellでサイト型ブログを作る手順

「ウィジェットを追加」をクリックすると、ウィジェットが選べます。

好きなところに好きなものを入れて「公開」しましょう。

STEP
フッター完成イメージ

私は以下のような感じにしてみました。

swellでサイト型ブログを作る手順
  1. 1列目:検索バー、SWELLプロモーション
  2. 2列目:アーカイブ、カテゴリー
  3. 3列目:プロフィール

【まとめ】SWELLを使ったおしゃれなサイト型ブログの完成!

完成した旅行ブログデモサイトがこちら!

swellサイト型の完成イメージ
DEMO4
なるほど!

本当にノーコードで作れました!

今回ご紹介したやり方以外にもいろんなデザインが作れます。

SWELLをどんどん使って楽しくカスタマイズしてみましょう。

今回ご紹介したトップページの他にも、SWELLを使ったトップページの作り方をご紹介しています。

SWELLのデモサイトは以下の記事で随時更新しています。ご参考にしていただければ幸いです。

SWELLの公式サイトでもデモサイトを公開しています。

公式のデモテンプレートは無料でインストールできますよ!

今回ご紹介したサイト型ブログはシンプルでおしゃれなWordPressテーマ「SWELL」を使用しています。

swell公式サイト
商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

2020年以降、社会人やOLに副業ブームが到来しています。始めるなら今がチャンスです。

この記事を読んで実際に行動する人は100人中3人程度だそうです。

その中でさらに継続できる人は3人だそうです。

知識を得るだけでは何も変わりません。副業でブログを始めるなら、早速今から動き出しましょう!

5〜10分程度で簡単にWordPressブログを作るならコレ!

それでは、最後までお読みいただきありがとうございました。

ランキング参加しました!応援よろしくお願いします

ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる