「ブログのトップページってどうやって作るんだろう」
こんなふうに悩んでいませんか?
ブログを始めてみるも、決めることや調べることがたくさんあるので、トップページのデザインまでなかなか手が回らないですよね‥‥。
そこで今回は、最低限のカスタマイズでおしゃれなトップページを作る方法について解説します。
この記事でわかること
\ 見たい内容をTap・Click!! /
トップページのデザインには、こだわりたい気持ちもあると思います。
しかし、ここで最低限必要なトップページの作り方をマスターして、記事を書くことに専念すれば、最短ルートでブログを育てることができます!
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
デザインはブログ運営に慣れたらとことん楽しみましょう
今回は、当ブログでも利用しているWordPressテーマ「SWELL」を例にあげて、トップページの作り方を紹介しています。
この記事を書いた人
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/10/9858b53be6e018d29dd072cb370161e5.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/10/9858b53be6e018d29dd072cb370161e5.png)
- 2年目夫婦ブロガー / Webライター(フリーランス)
- 2022年8月から夫婦ブログを本格始動
- ブログ収益:月5桁達成
- にほんブログ村 ブログ村建国18周年記念イベント 入賞
【全体像】SWELLトップページの作り方
SWELLのトップページを「ひとまず形にする」には、以下4つのエリアを作成します。
![最低限必要なカスタマイズ](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/31-1024x538.png)
![最低限必要なカスタマイズ](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/31-1024x538.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
まずは、上記のイラストで全体像を把握しましょう!
今後ブログ運営に慣れてきたら、トップページを自由にカスタマイズできます。
![トップページのカスタマイス事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/32.png)
![トップページのカスタマイス事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/32.png)
SWELLでは、さまざまなブロックを組み合わせることで、おしゃれな「サイト型」のトップページを作成できます。
SWELLの「ヘッダーエリア」の作り方
![ヘッダーエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-6-1024x538.png)
![ヘッダーエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-6-1024x538.png)
ヘッダーエリアを作成するには、4つの作業が必要です。
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
それぞれの手順をかんたんに解説します!
ブログ名(サイトタイトル)を入れる
WordPressの初期設定で「ブログ名」を設定していない場合は、以下の手順に沿ってブログ名を入力しましょう。
![サイトタイトルの入力手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/52f9784537460452304e2623956f90f8-1.jpg)
![サイトタイトルの入力手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/52f9784537460452304e2623956f90f8-1.jpg)
![サイトタイトルの入力](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5305a768a809572d33cbd029576a98c7-1.jpg)
![サイトタイトルの入力](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5305a768a809572d33cbd029576a98c7-1.jpg)
![サイトタイトルの表示例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ac62f739d7cda8811d57b9e94cc286c1-1.jpg)
![サイトタイトルの表示例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ac62f739d7cda8811d57b9e94cc286c1-1.jpg)
グローバルナビを設定する
ヘッダーエリアに「グローバルナビ」を設定します。
グローバルナビとは、サイト内の各ページに設置される案内メニューのことを指します。
![グローバルナビの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/246ffa74f706b766d60658297254f8e5.jpg)
![グローバルナビの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/246ffa74f706b766d60658297254f8e5.jpg)
グローバルナビを設定するには、カテゴリー設定を済ませておく必要があります。
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/02/bbdb5415d03a6201d9b1085165742493-300x158.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/02/bbdb5415d03a6201d9b1085165742493-300x158.png)
あらかじめ設定したカテゴリーをもとに、グローバルナビを設定していきます。
設定手順は、次のとおりです。
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f00edfc3c6fe53003b9089bb486039e7-1024x487.png)
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f00edfc3c6fe53003b9089bb486039e7-1024x487.png)
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a7478c030b168d93634c66b98989d161.jpg)
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a7478c030b168d93634c66b98989d161.jpg)
- メニュー名
-
わかりやすい名前を入力(例:グローバルナビ)
- メニュー設定
-
「グローバルナビ」にチェック
すでに他のメニューを作成している場合は「新しいメニューを作成しましょう」を選択してから「メニュー構造」を設定しましょう。
![新しいメニューの作成方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f311914e628e80e05ddad66f8820ae10.jpg)
![新しいメニューの作成方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f311914e628e80e05ddad66f8820ae10.jpg)
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5ed6d817539973ea593855f604d2888e.jpg)
![グローバルナビの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5ed6d817539973ea593855f604d2888e.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f97e011589362921cb4e24325b6fb981.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f97e011589362921cb4e24325b6fb981.jpg)
![メニュー項目の選択](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5bdae1e948b6f39bfe54e0d78d390baa.jpg)
![メニュー項目の選択](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5bdae1e948b6f39bfe54e0d78d390baa.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/85f3e93c9830e62365bc806bb2083bc5.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/85f3e93c9830e62365bc806bb2083bc5.jpg)
「子カテゴリー」をグローバルナビに設定したい場合、子カテゴリーの項目を少し右にずらしてみましょう。
![子カテゴリーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ff28e9b07ffaf0df8ec6f791100d54ea.jpg)
![子カテゴリーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ff28e9b07ffaf0df8ec6f791100d54ea.jpg)
![グローバルナビの表示の確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/b4dc1b58bf84105d411814c31302b768.jpg)
![グローバルナビの表示の確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/b4dc1b58bf84105d411814c31302b768.jpg)
子カテゴリーは、親カテゴリーにカーソルを合わせると下にふわっと表示されます。
グローバルナビには、カテゴリーだけでなくお問い合わせフォームなどの「固定ページ」も設定できます。
グローバルナビに固定ページを設定する方法は、以下のとおりです。
![固定ページのメニュー設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/68d7b8432654dd1b13162aefd7a08546.png)
![固定ページのメニュー設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/68d7b8432654dd1b13162aefd7a08546.png)
![固定ページのメニュー追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/e3661ced35be8afa714f45481767a26a.jpg)
![固定ページのメニュー追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/e3661ced35be8afa714f45481767a26a.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/fc7dea89543831618ea9346b8e9a7a99.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/fc7dea89543831618ea9346b8e9a7a99.jpg)
![グローバルナビの表示確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a2d72f912b710f271dd1f142e26ff146.jpg)
![グローバルナビの表示確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a2d72f912b710f271dd1f142e26ff146.jpg)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/10/2fe047d1f9c2b7c8a057195fd34618f3-300x158.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/10/2fe047d1f9c2b7c8a057195fd34618f3-300x158.png)
メインビジュアルを設定・変更する
メインビジュアルとは、トップページにある大きな画像・動画のことです。
![メインビジュアル](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/11541afacd8795985b3018dec2619fc1.jpg)
![メインビジュアル](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/11541afacd8795985b3018dec2619fc1.jpg)
SWELLのデフォルト設定の場合、メインビジュアルがランダムで表示されます。
「表示をなくしたい」もしくは「画像・動画を指定したい」という場合は、以下の手順で設定しましょう。
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-1024x338.png)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-1024x338.png)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a77547c765d7d645bbff766cde4c04de.jpg)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a77547c765d7d645bbff766cde4c04de.jpg)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/2782fa1b24b0ce6285df92bea082a7df.jpg)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/2782fa1b24b0ce6285df92bea082a7df.jpg)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/49ef72b19c9b2addea8db508ca9b00b7-1.png)
![メインビジュアルの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/49ef72b19c9b2addea8db508ca9b00b7-1.png)
自分で画像・動画を指定する場合は、「表示設定」「各スライドの設定」にて設定しましょう。
記事スライダーを設定・変更する
記事スライダーとは、記事をランダムで表示する機能のことです。
![記事スライダー](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/81b33bc952783b9ada7db0b7d6eaac58.png)
![記事スライダー](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/81b33bc952783b9ada7db0b7d6eaac58.png)
デフォルトの状態では、記事スライダーがランダムで表示される設定となっています。
「表示をオフにしたい」もしくは「表示される記事を指定したい」という場合は、以下の手順で設定しましょう。
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-1-1024x338.png)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-1-1024x338.png)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/9abe8c1ced1a6002febdf4712ded9da8-1.jpg)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/9abe8c1ced1a6002febdf4712ded9da8-1.jpg)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/fd114dd4009e10fd7f53e691ef3ccf79.png)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/fd114dd4009e10fd7f53e691ef3ccf79.png)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/3cf70033b2da609715535218f1cca0c8.png)
![記事スライダーの設定](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/3cf70033b2da609715535218f1cca0c8.png)
自分で記事を指定する場合は、「記事のピックアップ方法」「記事の表示設定」などを設定しましょう。
SWELLの「メインエリア」の作り方
![メインエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-7-1024x538.png)
![メインエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-7-1024x538.png)
メインエリアの作成には、特に必要な設定はありません。
基本的には、デフォルトの状態でOKです。
デフォルト設定の場合、記事一覧が新着順に表示されます。
![メインエリアの表示](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f6ac1a747311ea89038009ae6e611dae.jpg)
![メインエリアの表示](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f6ac1a747311ea89038009ae6e611dae.jpg)
記事一覧のレイアウト変更や、抜粋文(メタディスクリプション)の非表示設定もできます。
カード型
![新着記事の表示(カード型)](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5b9ff0dbdf5af977b5d08aa4bd8903cb.png)
![新着記事の表示(カード型)](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5b9ff0dbdf5af977b5d08aa4bd8903cb.png)
リスト型
![新着記事の表示(リスト型)](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/96c7df84bdd39d35188f81f5a8d16202.png)
![新着記事の表示(リスト型)](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/96c7df84bdd39d35188f81f5a8d16202.png)
記事一覧のレイアウトを変更する手順と抜粋文表示の変更手順は、次のとおりです。
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-2-1024x338.png)
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/767c4a58d52a7ffe153880687b70c192-2-1024x338.png)
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/647343e89601897b1383c82ebe10bef7.jpg)
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/647343e89601897b1383c82ebe10bef7.jpg)
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/67bf6d4e65a2595afe8d08f44dc83f3a.jpg)
![記事一覧のレイアウト変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/67bf6d4e65a2595afe8d08f44dc83f3a.jpg)
- リストレイアウト設定
-
レイアウトを変更できる
- 投稿情報の表示設定
-
抜粋文表示を変更できる
SWELLの「サイドバー」の作り方
![サイドバーのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/957656288cce9f8352e1d8ef5abb6cf5-1024x538.png)
![サイドバーのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/957656288cce9f8352e1d8ef5abb6cf5-1024x538.png)
サイドバーは「ウィジェット」とよばれる機能を使って、さまざまなパーツを設置できます。
サイドバーの作成手順は、次のとおりです。
![サイドバーの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/1fda62f4a20081bdfa4a6f7c6a374cc0.png)
![サイドバーの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/1fda62f4a20081bdfa4a6f7c6a374cc0.png)
![ウィジェットの追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d30f42e03b657664d1e09fe9a24445ab.jpg)
![ウィジェットの追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d30f42e03b657664d1e09fe9a24445ab.jpg)
【おすすめのウィジェット】
- プロフィール
- 検索
- アーカイブ
- 人気記事
![ウィジェットの追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/326ff795d35266f0e22899870070e7e4.png)
![ウィジェットの追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/326ff795d35266f0e22899870070e7e4.png)
![共通サイドバーの表示](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/57917408fa9ff5b8af420668f92ea22e.png)
![共通サイドバーの表示](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/57917408fa9ff5b8af420668f92ea22e.png)
項目をドラッグして動かせば、表示される順番を入れ替えられます
![サイドバーの表示事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f3e908f69af95a8747eb8dab4ed7da9e.jpg)
![サイドバーの表示事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/f3e908f69af95a8747eb8dab4ed7da9e.jpg)
サイドバーに「プロフィール」を追加する場合は、少し細かな設定が必要です。
![プロフィールの編集](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/e1a388e5929ab4610e9f9cb558586575-499x1024.jpg)
![プロフィールの編集](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/e1a388e5929ab4610e9f9cb558586575-499x1024.jpg)
- 名前
- 肩書き
- プロフィール文
- アイコン画像
- プロフィール背景画像(必要な場合)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/9667f857a7a40e9a300281ce4b3efd05-300x158.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/9667f857a7a40e9a300281ce4b3efd05-300x158.png)
![プロフィールの編集](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d3a82d31badd5df0f43c70c932cb8f0d-1.png)
![プロフィールの編集](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d3a82d31badd5df0f43c70c932cb8f0d-1.png)
- ボタンリンク先:プロフィール(運営者情報ページ)のURLを入力
- ボタンテキスト:「運営者情報」と入力
- ボタンの色:好みの色を選択
- SNSアイコンリストを表示:任意でOK
- アイコンを丸枠で囲む:任意でOK
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/08/dd6ef16317d3b6d0262a0eaf3f64381c-300x158.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/08/dd6ef16317d3b6d0262a0eaf3f64381c-300x158.png)
![プロフィールの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/75f3057dfc3a641734d8d2b40e16795f.png)
![プロフィールの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/75f3057dfc3a641734d8d2b40e16795f.png)
SWELLの「フッターエリア」の作り方
![フッターエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-10-1024x538.png)
![フッターエリアのカスタマイズ方法](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/d45779092f2e115355fd5287e95d2ce2-10-1024x538.png)
フッターエリアの作成には、以下2つの作業が必要です。
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
2つの手順を簡単に見ていきましょう
フッターメニューを作成する
フッターメニューを作成していきます。
- フッターエリアに設置するメニューのこと
- 「プライバシーポリシー」「お問い合わせフォーム」などの固定ページを設置する
![フッターメニューの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/00eb090cdda05bd6560c22e58a9b657d.png)
![フッターメニューの例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/00eb090cdda05bd6560c22e58a9b657d.png)
フッターメニューに必要な固定ページを作成していない場合は、先に作っておきましょう。
フッターメニューの作成手順は、以下のとおりです。
![フッターメニューの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a60306fea5bd8f1dbb567c7477191819-1024x363.png)
![フッターメニューの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a60306fea5bd8f1dbb567c7477191819-1024x363.png)
![新しいメニューの作成](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/dc55a7981f8a7664f2d5dcad2f115ff3.jpg)
![新しいメニューの作成](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/dc55a7981f8a7664f2d5dcad2f115ff3.jpg)
![フッターメニューの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ccb7ecda71c21653f9e0d222aa0112cc.jpg)
![フッターメニューの作成手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/ccb7ecda71c21653f9e0d222aa0112cc.jpg)
- メニュー名
-
わかりやすい名前を入力(例:フッターメニュー)
- メニュー設定
-
「フッターメニュー」にチェック
![メニューの作成](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/4eea0b0dce1bb809c7ef5da17572df09.jpg)
![メニューの作成](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/4eea0b0dce1bb809c7ef5da17572df09.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/bdae46dd5d279f502eb44f38fbd0e12c.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/bdae46dd5d279f502eb44f38fbd0e12c.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a8c94608aa7d7383e300407bb7fe2d2c.jpg)
![メニュー項目の追加](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/a8c94608aa7d7383e300407bb7fe2d2c.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/93795d4ea188322696ea64a78de94778.jpg)
![メニューの保存](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/93795d4ea188322696ea64a78de94778.jpg)
![フッターメニューの確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/00eb090cdda05bd6560c22e58a9b657d-1.png)
![フッターメニューの確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/00eb090cdda05bd6560c22e58a9b657d-1.png)
コピーライトを変更する
最後に、フッターエリアのコピーライトを変更します。
- 著作権を保護するための表示
- Webサイトでは、フッターエリアに「©︎ ○○○」と表記されることが多い
![コピーライトの表示事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/8acc5a7c19764fa27901fbabc6c7d98b.png)
![コピーライトの表示事例](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/8acc5a7c19764fa27901fbabc6c7d98b.png)
コピーライトを変更する手順は、次のとおりです。
![コピーライトの変更手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/365eff3e9f844ed662e9dfd2b3d351e0-1024x354.png)
![コピーライトの変更手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/365eff3e9f844ed662e9dfd2b3d351e0-1024x354.png)
![コピーライトの変更手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5b47a2f6c595f5db2accaf32ce255530.jpg)
![コピーライトの変更手順](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2022/12/5b47a2f6c595f5db2accaf32ce255530.jpg)
![コピーライトの変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/5a32be9edde51c0bc13ea3d9ec4ee646.png)
![コピーライトの変更](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/5a32be9edde51c0bc13ea3d9ec4ee646.png)
「ブログを開設した年号」と「ブログ名」を入力しましょう。
![コピーライトの表示確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/8acc5a7c19764fa27901fbabc6c7d98b-1.png)
![コピーライトの表示確認](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/8acc5a7c19764fa27901fbabc6c7d98b-1.png)
SWELLトップページのサンプル
現在、私が運営していた個人ブログのサイトを「トップページのサンプル」として開放しています。
はじめてトップページを作る場合には、ぜひ参考にしてください。
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
現在は更新をストップしているので、トップページだけ見てくださいね(笑)
トップページのサンプルはこちら
【まとめ】最低限のトップページデザインで記事を書く準備をしよう
今回は、WordPressテーマ「SWELL」を例に、最低限のカスタマイズでトップページを作る方法を解説しました。
この記事のまとめ
\ もう一度見たい内容をTap・Click!! /
ブログを始めたばかりの段階では、「トップページのデザインにこだわる」よりも「記事を書く準備を万全にする」ほうが最優先です。
4つのエリアのデザインを最低限のカスタマイズで整え、記事を書くための準備を整えましょう!
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/07/535fe8006812c5a0467f9e0ebd52af14-150x150.png)
記事を書く前に、サイト運営の準備をしましょう
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/f53341635f74d88969fab6c8601eafc5-300x158.png)
![](https://www.nfekhmyrm2022-blog.site/wp-content/uploads/2023/01/f53341635f74d88969fab6c8601eafc5-300x158.png)