ブログ初心者向け｜WordPressでトップページを作る方法を解説

私も好きなブロガーさんのサイトを見て、

「トップページが見やすいな」
「個性があっておしゃれだな」

と思っていました。

ただ、

• 「CSSやHTMLを使って作るのは難しそう…」
• 「コーディングはちょっと面倒だな…」

と感じていたんですよね。

実際に私のブログのトップページを例にしながら、初心者の方でもできるトップページの作成方法を解説します。

これからサーバー契約やWordPressの初期設定を行う方は、以下の記事も参考にしてみてください。

※この記事はSWELLを使用した環境をもとに解説しています。

この記事を読むことで、以下のようなトップページを作成できるようになります。

一度、固定ページを使ったトップページの作成方法を覚えてしまえば、応用して自分らしいデザインや個性を反映したトップページも作成できるようになります。

初心者の方でも簡単に設定できますので、ぜひ参考にしてみてください。

固定ページを作成しよう

まずは、WordPressの管理画面から固定ページを作成していきましょう。

左メニューの「固定ページ」をクリックし、「固定ページを追加」を選択します。

固定ページを作成したら、作成したページを開いてみましょう。

初めて開いた場合は何も入力されていない状態だと思いますので、まずはタイトルを入力してください。

タイトルは「HOME」や「トップページ」など、分かりやすい名前で問題ありません。

トップページとして設定しよう

固定ページを作成したら、次は作成した固定ページをトップページとして表示する設定です。

以下の手順で行ってみてください。

おすすめ記事一覧を作成しよう

トップページの設定が完了したら、先ほど作成した固定ページに戻ってください。

ここから実際にトップページを作成していきます。

まずは「おすすめ記事」を表示してみましょう。

おすすめ記事を設置することで、

・読んでほしい記事をアピールできる
・読者が次の記事を見つけやすくなる
・サイト内の回遊率向上につながる

といったメリットがあります。

• 【手順①】フルワイドブロックを追加する

まずは「＋」ボタンをクリックし、検索欄に「フルワイド」と入力してください。

表示された「フルワイドブロック」をクリックして追加しましょう。

フルワイドブロックを追加したら、右側の設定画面から以下のように設定してみてください。

・コンテンツの横幅をどこに揃えるか：記事
・上下のpadding量（PC）：60
・上下のpadding量（SP）：40

設定内容は下記画像を参考にしてください。

これにより、パソコンとスマートフォンのどちらでも見やすい余白を確保できます。

次に、見出しブロックを追加し、「おすすめ記事一覧」と入力してください。

入力後にEnterキーを押すと、1段下に新しいブロックを追加できるようになります。

• 【手順②】投稿リストを追加する

続いて「＋」ボタンをクリックし、検索欄に「投稿リスト」と入力してください。

表示された「投稿リスト」ブロックをクリックして追加しましょう。

投稿リストを追加したら、表示する記事を設定していきましょう。

おすすめ記事として表示したい記事が決まっている場合は、「投稿ID」を指定することで任意の記事を表示できます。

どの記事を表示するか迷う場合は、「投稿の表示順序」を「人気順」に設定するのがおすすめです。

人気順に設定すると、よく読まれている記事が自動的に上位へ表示されるため、読者にもおすすめ記事が伝わりやすくなります。

カテゴリ一覧を作成しよう

次は、読者が興味のある記事を探しやすくするために、カテゴリ一覧を作成していきます。

先ほどと同じように「フルワイドブロック」を追加してください。

フルワイドブロックを追加したら、見出しに「カテゴリ一覧」と入力し、Enterキーを押します。

• 【手順①】カラムを追加しよう

続いて「＋」ボタンをクリックし、検索欄に「カラム」と入力してください。

表示された「カラム」ブロックをクリックして追加しましょう。

カラム分割は33/33/33をせんたくしてみてください

• 【手順②】カラムを追加しよう

カラムを追加したら、各カラム内の「＋」ボタンをクリックし、「画像」ブロックを追加してください。

その後、カテゴリ用の画像をアップロードしましょう。

画像ブロックでは画像の上に文字を表示することもできますが、文字を重ねてしまうと画像自体にリンクを設定できなくなる場合があります。

そのため、カテゴリ名を画像に表示したい場合は、あらかじめCanvaなどの画像編集ソフトで文字を入れた画像を作成しておくのがおすすめです。

私も実際にCanvaでカテゴリ画像を作成して使用しています。

• 【手順③】画像にリンクを追加しよう

画像をアップロードしたら、手順②で追加した画像を選択し、「リンク」をクリックしてください。

そこに、作成したカテゴリのURLを入力します。

ここで、

と思った方もいるかもしれません。

• 【手順④】カテゴリーURLを設定しよう

カテゴリのURLは、WordPress管理画面の「投稿」→「カテゴリー」から確認できます。

以下画像を参考に設定してみてください。

例えば、「インフラ学習」というカテゴリーを作成する場合、私はスラッグに「infra-study」と入力しています。

スラッグを設定すると、カテゴリーURLは以下のようになります。

「自身のサイトURL/category/設定したスラッグ」

例：
https://〇〇.com/category/infra-study/

このURLを先ほどの画像リンクへ設定することで、画像をクリックした際にカテゴリー一覧ページへ移動できるようになります。

• 【手順⑤】実際に確認してみよう

これでカテゴリ画像の設定は完了です。

最後に、プレビュー機能を使用して実際に画像をクリックしてみましょう。

画像をクリックした際に、自身で作成したカテゴリごとの記事一覧ページへ移動できれば、正常に設定できています。

もし別ページへ移動してしまう場合は、設定したURLに誤りがないか確認してみてください。

すべての記事一覧を作成しよう

次は、サイト内のすべての記事を表示する記事一覧を作成していきましょう。

記事一覧を設置することで、

・新着記事
・おすすめ記事
・カテゴリ記事

以外の記事も読者に見つけてもらいやすくなります。

また、トップページからすべての記事へアクセスできるようになるため、サイト全体の回遊率向上にもつながります。

先ほどまでと同じように「フルワイドブロック」を追加してください。

その後、見出しに「全ての記事一覧」と入力し、Enterキーを押しましょう。

• 【手順①】タブを設定してみよう

見出しを追加したら、「＋」ボタンをクリックし、検索欄に「タブ」と入力してください。

表示された「タブ」ブロックを追加しましょう。

追加後は、右側の設定画面から以下のように設定してください。

・タブサイズ設定（PC）：端まで並べる（均等幅）
・タブサイズ設定（SP）：固定幅（50%）

設定内容は以下の画像を参考にしてみてください。

この設定にすることで、パソコンではタブが均等に表示され、スマートフォンでも見やすいレイアウトになります。

• 【手順②】投稿リストを設定してみよう

タブブロックを追加したら、まず「タブ1」「タブ2」と表示されている文字を編集していきましょう。

• タブ1 → 新着記事
• タブ2 → おすすめ記事

に変更してください。

さらに、タブの横にある「＋」ボタンをクリックすると、新しいタブを追加できます。

必要に応じて「その他の記事」や「人気記事」などのタブを追加してみましょう。

次に、「新着記事」タブの本文エリアをクリックし、「＋」ボタンを押してください。

検索欄に「投稿リスト」と入力し、表示された「投稿リスト」ブロックを追加しましょう。

これで「新着記事」タブ内に記事一覧を表示できるようになります。

あとは他のタブについても同じ手順で投稿リストを追加し、表示方法を変更していきましょう。

例えば、

新着記事 → 投稿日の新しい順
おすすめ記事 → 投稿IDを指定
人気記事 → 人気順

など、自身のサイトに合った表示方法を設定してみてください。

これでトップページの作成は完了です。

プロフィールを作成しよう

最後にプロフィールを表示させましょう。

プロフィールを設置することで、読者に「どんな人が記事を書いているのか」を知ってもらえます。

また、運営者情報が分かることで記事への安心感にもつながります。

• 【手順①】投稿リストを設定してみよう

WordPress管理画面から「外観」→「ウィジェット」を開いてください。

その後、「共通サイドバー」を選択し、「ウィジェットを追加」をクリックしましょう。

設定後、共通サイドバー内に「［SWELL］プロフィール」が追加されていることを確認してください。

「［SWELL］プロフィール」が表示されていれば、プロフィールを表示するための設定は完了です。

次に、共通サイドバー内に追加された「［SWELL］プロフィール」をクリックしてください。

プロフィール設定画面が表示されたら、以下の項目を設定しましょう。

• 名前：任意の名前
• プロフィール文：任意の自己紹介文
• ボタンリンク先：任意のURL
• ボタンテキスト：プロフィール

また、以下の項目にはチェックを付けてください。

• ☑ SNSアイコンリストを表示する
• ☑ アイコンを丸枠で囲む

設定が完了したら「保存」をクリックしましょう。

これでプロフィールエリアに、名前や自己紹介文、SNSアイコンが表示されるようになります。

• 【手順②】プロフィールが表示されない場合

ロフィールを設定したにもかかわらず表示されない場合は、トップページのサイドバー設定を確認してみましょう。

WordPress管理画面から、

「外観」→「カスタマイズ」→「サイドバー」

を選択してください。

その後、「トップページにサイドバーを表示する」にチェックを入れましょう。

設定を保存後、再度トップページを確認してみてください。

プロフィールが表示されるようになっていれば設定完了です。

まとめ

ここまでお読みいただき、ありがとうございました！

この記事では、SWELLを使ってトップページを作成する方法について解説しました。

今回ご紹介した内容は、あくまで一例となりますが、これで自分だけのトップページが作成できるようになったのではないでしょうか。

一度作成方法を覚えてしまえば、おすすめ記事やカテゴリ、デザインなどを自由にカスタマイズできるようになります。

ぜひ自分だけのオリジナルサイト作りに挑戦してみてくださいね。

また、私は普段、

・これからインフラエンジニアを目指す方
・インフラエンジニアとして働き始めたばかりの方

に向けた記事を発信しています。

興味がある方は、ぜひ他の記事も読んでいただけると嬉しいです。