SWELLのトップページの作り方!最低限のカスタマイズでおしゃれにしよう

「ブログのトップページってどうやって作るんだろう」

こんなふうに悩んでいませんか?

ブログを始めてみるも、決めることや調べることがたくさんあるので、トップページのデザインまでなかなか手が回らないですよね‥‥。

そこで今回は、最低限のカスタマイズでおしゃれなトップページを作る方法について解説します。

この記事でわかること

\ 見たい内容をTap・Click!! /

トップページのデザインには、こだわりたい気持ちもあると思います。

しかし、ここで最低限必要なトップページの作り方をマスターして、記事を書くことに専念すれば、最短ルートでブログを育てることができます

ぼんちゃん

デザインはブログ運営に慣れたらとことん楽しみましょう

今回は、当ブログでも利用しているWordPressテーマ「SWELL」を例にあげて、トップページの作り方を紹介しています。

この記事を書いた人

やぬさんぼんちゃん

  • 2年目夫婦ブロガー / Webライター(フリーランス)
  • 2022年8月から夫婦ブログを本格始動
  • ブログ収益:月5桁達成
  • にほんブログ村 ブログ村建国18周年記念イベント 入賞
もくじ

【全体像】SWELLトップページの作り方

SWELLのトップページを「ひとまず形にする」には、以下4つのエリアを作成します。

最低限必要なカスタマイズ
ぼんちゃん

まずは、上記のイラストで全体像を把握しましょう!

今後ブログ運営に慣れてきたら、トップページを自由にカスタマイズできます。

トップページのカスタマイス事例

SWELLでは、さまざまなブロックを組み合わせることで、おしゃれな「サイト型」のトップページを作成できます。

SWELLの「ヘッダーエリア」の作り方

ヘッダーエリアのカスタマイズ方法

ヘッダーエリアを作成するには、4つの作業が必要です。

ぼんちゃん

それぞれの手順をかんたんに解説します!

ブログ名(サイトタイトル)を入れる

WordPressの初期設定で「ブログ名」を設定していない場合は、以下の手順に沿ってブログ名を入力しましょう。

STEP
WordPressの「設定」→「一般」をクリック
サイトタイトルの入力手順
STEP
サイトタイトルを入力
サイトタイトルの入力
STEP
サイトの左上にサイトタイトルが表示される
サイトタイトルの表示例

グローバルナビを設定する

ヘッダーエリアに「グローバルナビ」を設定します。

グローバルナビとは、サイト内の各ページに設置される案内メニューのことを指します。

グローバルナビの例

グローバルナビを設定するには、カテゴリー設定を済ませておく必要があります。

あらかじめ設定したカテゴリーをもとに、グローバルナビを設定していきます。

設定手順は、次のとおりです。

STEP
WordPressの「外観」→「メニュー」をクリック
グローバルナビの設定
STEP
「メニュー構造」を設定
グローバルナビの設定
メニュー名

わかりやすい名前を入力(例:グローバルナビ)

メニュー設定

「グローバルナビ」にチェック

すでに他のメニューを作成している場合は「新しいメニューを作成しましょう」を選択してから「メニュー構造」を設定しましょう。

新しいメニューの作成方法
STEP
「メニューを作成」をクリック
グローバルナビの設定
STEP
「メニュー項目を追加」の「カテゴリー」を選択
メニュー項目の追加
STEP
「すべてを表示」を選択
メニュー項目の選択
STEP
グローバルナビに設定したいカテゴリーにチェックを入れる
STEP
「メニューを保存」をクリック
メニューの保存

「子カテゴリー」をグローバルナビに設定したい場合、子カテゴリーの項目を少し右にずらしてみましょう。

子カテゴリーの設定
STEP
グローバルナビの表示を確認する
グローバルナビの表示の確認

子カテゴリーは、親カテゴリーにカーソルを合わせると下にふわっと表示されます。

グローバルナビには、カテゴリーだけでなくお問い合わせフォームなどの「固定ページ」も設定できます。

グローバルナビに固定ページを設定する方法は、以下のとおりです。

STEP
「メニュー項目を追加」の固定ページを選択
固定ページのメニュー設定
STEP
「すべて表示」をクリック
STEP
グローバルナビに設定したい固定ページにチェックを入れる
固定ページのメニュー追加
STEP
「メニューに追加」をクリック
STEP
「メニューを保存」をクリック
メニューの保存
STEP
グローバルナビの表示を確認する
グローバルナビの表示確認

メインビジュアルを設定・変更する

メインビジュアルとは、トップページにある大きな画像・動画のことです。

メインビジュアル

SWELLのデフォルト設定の場合、メインビジュアルがランダムで表示されます。

「表示をなくしたい」もしくは「画像・動画を指定したい」という場合は、以下の手順で設定しましょう。

STEP
WordPressの「外観」→「カスタマイズ」を選択
メインビジュアルの設定
STEP
「トップページ」をクリック
メインビジュアルの設定
STEP
「メインビジュアル」をクリック
メインビジュアルの設定
STEP
表示内容を設定
メインビジュアルの設定

自分で画像・動画を指定する場合は、「表示設定」「各スライドの設定」にて設定しましょう。

記事スライダーを設定・変更する

記事スライダーとは、記事をランダムで表示する機能のことです。

記事スライダー

デフォルトの状態では、記事スライダーがランダムで表示される設定となっています。

「表示をオフにしたい」もしくは「表示される記事を指定したい」という場合は、以下の手順で設定しましょう。

STEP
WordPressの「外観」→「カスタマイズ」を選択
記事スライダーの設定
STEP
「トップページ」をクリック
記事スライダーの設定
STEP
「記事スライダー」をクリック
記事スライダーの設定
STEP
「記事スライダーを設置するかどうか」を設定
記事スライダーの設定

自分で記事を指定する場合は、「記事のピックアップ方法」「記事の表示設定」などを設定しましょう。

SWELLの「メインエリア」の作り方

メインエリアのカスタマイズ方法

メインエリアの作成には、特に必要な設定はありません。

基本的には、デフォルトの状態でOKです。

デフォルト設定の場合、記事一覧が新着順に表示されます。

メインエリアの表示

記事一覧のレイアウト変更や、抜粋文(メタディスクリプション)の非表示設定もできます。

カード型

新着記事の表示(カード型)

リスト型

新着記事の表示(リスト型)

記事一覧のレイアウトを変更する手順と抜粋文表示の変更手順は、次のとおりです。

STEP
WordPressの「外観」→「カスタマイズ」を選択
記事一覧のレイアウト変更
STEP
「記事一覧リスト」をクリック
記事一覧のレイアウト変更
STEP
各設定を行う
記事一覧のレイアウト変更
リストレイアウト設定

レイアウトを変更できる

投稿情報の表示設定

抜粋文表示を変更できる

SWELLの「サイドバー」の作り方

サイドバーのカスタマイズ方法

サイドバーは「ウィジェット」とよばれる機能を使って、さまざまなパーツを設置できます。

サイドバーの作成手順は、次のとおりです。

STEP
WordPressの「外観」→「カスタマイズ」をクリック
サイドバーの作成手順
STEP
「利用できるウィジェット」からサイドバーに追加したいものを選ぶ
ウィジェットの追加

【おすすめのウィジェット】

  • プロフィール
  • 検索
  • アーカイブ
  • 人気記事
STEP
「共通サイドバー」を選択
ウィジェットの追加
STEP
「ウィジェットを追加」をクリック
STEP
追加したウィジェットが「共通サイドバー」に表示される
共通サイドバーの表示

項目をドラッグして動かせば、表示される順番を入れ替えられます

STEP
サイドバーの表示を確認する
サイドバーの表示事例

サイドバーに「プロフィール」を追加する場合は、少し細かな設定が必要です。

STEP
各項目を設定
プロフィールの編集
  • 名前
  • 肩書き
  • プロフィール文
  • アイコン画像
  • プロフィール背景画像(必要な場合)
STEP
各項目を設定
プロフィールの編集
  • ボタンリンク先:プロフィール(運営者情報ページ)のURLを入力
  • ボタンテキスト:「運営者情報」と入力
  • ボタンの色:好みの色を選択
  • SNSアイコンリストを表示:任意でOK
  • アイコンを丸枠で囲む:任意でOK
STEP
プロフィールの完成
プロフィールの例

SWELLの「フッターエリア」の作り方

フッターエリアのカスタマイズ方法

フッターエリアの作成には、以下2つの作業が必要です。

ぼんちゃん

2つの手順を簡単に見ていきましょう

フッターメニューを作成する

フッターメニューを作成していきます。

  • フッターエリアに設置するメニューのこと
  • 「プライバシーポリシー」「お問い合わせフォーム」などの固定ページを設置する
フッターメニューの例

フッターメニューの作成手順は、以下のとおりです。

STEP
WordPressの「外観」→「メニュー」を選択
フッターメニューの作成手順
STEP
「新しいメニューを作成しましょう」をクリック
新しいメニューの作成
STEP
「メニュー構造」を設定
フッターメニューの作成手順
メニュー名

わかりやすい名前を入力(例:フッターメニュー)

メニュー設定

「フッターメニュー」にチェック

STEP
「メニューを作成」をクリック
メニューの作成
STEP
「メニュー項目を追加」の「固定ページ」を選択
メニュー項目の追加
STEP
「すべて表示」をクリック
STEP
フッターメニューに設定したい固定ページにチェックを入れる
メニュー項目の追加
STEP
「メニューに追加」をクリック
STEP
「メニューを保存」をクリック
メニューの保存
STEP
フッターメニューの表示を確認する
フッターメニューの確認

コピーライトを変更する

最後に、フッターエリアのコピーライトを変更します。

  • 著作権を保護するための表示
  • Webサイトでは、フッターエリアに「©︎ ○○○」と表記されることが多い
コピーライトの表示事例

コピーライトを変更する手順は、次のとおりです。

STEP
WordPressの「外観」→「カスタマイズ」を選択
コピーライトの変更手順
STEP
「フッター」をクリック
コピーライトの変更手順
STEP
「コピーライトのテキスト」を変更
コピーライトの変更

「ブログを開設した年号」と「ブログ名」を入力しましょう。

STEP
フッターエリアを確認する
コピーライトの表示確認

SWELLトップページのサンプル

現在、私が運営していた個人ブログのサイトを「トップページのサンプル」として開放しています。

はじめてトップページを作る場合には、ぜひ参考にしてください。

ぼんちゃん

現在は更新をストップしているので、トップページだけ見てくださいね(笑)

トップページのサンプルはこちら

【まとめ】最低限のトップページデザインで記事を書く準備をしよう

今回は、WordPressテーマ「SWELL」を例に、最低限のカスタマイズでトップページを作る方法を解説しました。

この記事のまとめ

\ もう一度見たい内容をTap・Click!! /

ブログを始めたばかりの段階では、「トップページのデザインにこだわる」よりも「記事を書く準備を万全にする」ほうが最優先です。

4つのエリアのデザインを最低限のカスタマイズで整え、記事を書くための準備を整えましょう!

ぼんちゃん

記事を書く前に、サイト運営の準備をしましょう

R o a d M a p

ブ ロ グ の ゴ ー ル を 意 識 し な が ら 読 も う

収益化までのロードマップ

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

よかったらシェアしてね!
  • URLをコピーしました!
もくじ