ブログのトップページの作り方｜XWRITE固定ページのデザイン

XWRITE

2024年9月25日2024年11月5日

本記事の要点・結論

本記事を読めば、「ブログのトップページの作り方｜XWRITE固定ページのデザイン」がわかるようになります。

当ブログは初心者の方の利用が多いので、まず最初にお伝えしておきますが、WordPressブログのトップページは、ブログ記事が仮に10記事しかないなら、10記事用のトップページしかできないですし、100記事あれば、100記事用のトップページを作る必要があります。ですので、10記事しかないのに100記事のトップページみたいなものはできないのです。

結局どういうことかと言いますと、トップページは決して最初の１回で決まるものではないということ。トップページは育てていくものであり、最初から完璧なトップページを目指す必要はないと思います。

それでも、一方でブログのトップページは、いろんなものを背負っていて、「ユーザビリティ」や「回遊性」・「見た目」も問われる、とても大事な部分。その時、その時で一番いいトップページでありたいものです。

そこで、重要になるのがブログのトップページの作り方になるわけですが、そこにもやっぱりコツが存在します。まずはトップページの基本を押えたほうがよいと思いますので、今回は、XWRITE公式のデモサイトと同じような、トップページを作れるように解説していきます。お役に立てば幸いです！

トップページを作るのって難しいのよね〜！

デザインに凝りだすと、いつまでたっても進まないのだ・・・

トップページは重要だからね！でも記事数によって、変わるから、まずは基本を押えておこう！

この記事が参考になる方

ブログのトップページの作り方を知りたい方
XWRITEのデモブログのようなトップページにしたい方
トップページは、「固定ページ」それとも「投稿ページ」？
トップページの構成を知りたい方
トップページを魅力的にしたい方

目次 [ close ]

まず、ブログのトップページの作り方をイメージしよう！

XWRITE公式のデモブログを参考にしよう！

XWRITE公式サイトの「デザイン例」から、「美容ブログデモ」を見ていきましょう。

このXWRITE公式のデモブログは、表面的にトップページを作ってあるだけで中身があるわけではありません。でも、トップページを作る上でとても参考になるので、今回はこれを使って説明していきます。

現在このXWRITE公式のデモサイトは、６種類掲載されていますが、表示の仕方はそれぞれ違いますが、いろいろと共通する部分があります。

このトップページを表示してみましょう。
これによって、トップページの構成がわかります。

各セクションの配置項目

サイトタイトル
グローバルナビゲーション
メインビジュアル
カテゴリーもしくわ重要記事
カテゴリー（特集）
カテゴリー（特集）もしくわ、新着記事
カテゴリー（特集）もしくわ、人気記事
タグ表示
フッター

XWRITEブログ｜トップページの分析

このように、トップページをセクション分けしてみると、ブログの構造も少しわかってきますし、各セクションがブロックのように積み重なっていることもわかります。

そして、この「XWRITEのデモブログ」のようなトップページにしたいのであれば、重要になってくるのは「カテゴリー」です。極端なことを言えば、このトップページはカテゴリーに支配されていると言っても過言ではありません。全てのサイトが「カテゴリー」を活用しているわけではありませんが、ブログではよく見かけます。

では、中身がどうなっているのか見ていきましょう！

②のグローバルナビゲーションは、大見出しの「カテゴリー表示」
④は、重要な位置、「特に読んほしい記事の特定」か、「カテゴリー表示」
⑤～⑦は、新着情報か、「カテゴリー表示」

このように改めてトップページを見てみると、「カテゴリー表示」を活用していると言えます。

逆に言うと、どのように「カテゴリー表示」をするか？というのが、ポイントになってきます。

XWRITEブログのトップページの構成を理解

XWRITEのトップページデモサイトと同じようなトップページをつくるのに、トップページがどのように作られているか把握しておく必要があります。

上記のXWRITEのトップページデモサイト「美容ブログデモ」での各セクションの作成・変更は、このようになっています。

サイトのセクションの構成

WordPressの設定
グローバルナビゲーション
カスタマイズ
ウィジェット（トップページメインビジュアル下部）
固定ページ
固定ページ
固定ページ
固定ページ
ウィジェット＋カスタマイズ

各セクションが、一律で作れるわけではありません。これらの全体が集まって一つのトップページが出来上がります。

トップページのコンテンツ部分は、「固定ページ」で作る必要があります。

まず、XWRITEブログのトップページを固定ページにする

そもそも、WordPressを導入後、トップページのデフォルトの状態では、「最新の投稿」になっていると思います。

「ダッシュボード」「設定」「表示設定」

この「最新の投稿」では、記事を書くたびに最新の投稿を表示してくれるものですが、逆から言えば、それしか表示してくれません。15記事〜20記事まではそのままでもよいと思いますが、合わないとなれば、今回のように手をいれていく必要があります。

今回は、固定ページでトップページを作っていきます。

画像の下の欄にホームページを固定ページから選ぶ欄がありますが、まずはトップページ用の固定ページを作り、もう一度ここで、選び直す手順になります。

「ダッシュボード」「固定ページ」「新規固定ページを追加」
新しい固定ページを立ち上げます。

タイトルに「home」を入力します。
そのまま「公開」します。

「ダッシュボード」「設定」「表示設定」にもどります。
ホームページの固定ページから、今作成した「home」を選択する。
忘れずに「変更を保存」します。

これで、トップページが、「固定ページ」に切り替わりました。

ここから具体的に作り方を見ていきましょう！

具体的なブログのトップページの作り方｜XWRITE

具体的にトップページの作り方を見ていきます。

１、サイトタイトル

サイトタイトルは、もともと設定されています。変更の場合は、

「ダッシュボード」「設定」「一般」

２、グローバルナビゲーション

グローバルナビゲーションは、通常「カテゴリー」を表示します。ここでは、大きな見出しとして「カテゴリー」設置します。グローバルナビゲーションの設定方法は、また別で案内したいと思います。

３、メインビジュアル

XWRITEでは、単一画像の他、スライダー画像も設定できます。余白を付けたり、フィルター、オーバーレイなどもできます。

「カスタマイズ」「トップページ」「メインビジュアル」

４、トップページメインビジュアル下部

この「トップページメインビジュアル下部」は、ブログにとって重要な位置です。設置するのであれば、もっともユーザーに見てもらいたいコンテンツを配置します。単一のアクションを促すページや、重要なカテゴリーを配置します。ここは、固定ページ内ではなくウィジェットで作ります。

STEP1

ウィジェットを開きます

「外観」「ダッシュボード」「ウィジェット」
「トップページメインビジュアル下部」を選択

STEP2

ブロック挿入ツールを表示させます

「＋」マークから、「全て表示」を選択

STEP3

セクションを選択

セクションは、全幅で構成が可能です。

STEP4

右欄の設定で背景や色形が変更できます。

ここは、色々と試してみると良いです。

５～8、固定ページ

サイドバーを非表示にする

⑤〜⑧までは、固定ページでつくります。

「美容ブログデモ」は、XWRITEさんの公式で作られていますから、合っているかどうかわかりませんが、こんな感じで作られているのだと思います。

まず、大きいところからですが、よく見ると・・・・

トップページにサイドバーがないですよね！サイト全体が1カラムになっています。

パッと見、おしゃれに見えますし、投稿ページとは、また違った雰囲気にできますよね！

「カスタマイズ」からサイドバーの表示の「トップページ」チェックをはずします。
これで、トップページが１カラムになりました。

⑤の部分を作ってみましょう！

前提として、背景を「白」にしておきます。
「カスタマイズ」「サイト基本設定」「基本カラー」

固定ページに配置します。

ブロック挿入ツールから、記事一覧をクリック

下記のようにセットすると、美容ブログデモと同じ表示になります。
カテゴリーは、任意のカテゴリーにチェックをいれます。
上下に「見出し」と「ボタン」を設置。

⑥を作ります。

ここは、全幅（フルワイド）になっています。（背景：灰色）

「ブロック挿入ツール」「セクション」を選択
「オーバーレイ」で背景色を決めます。
先程と同じように記事一覧を設置、好みのカテゴリーや新着記事など選択
見出しとボタンの設置

⑦は、⑤と同じように設定。カテゴリーを変えたり、新着記事など柔軟に対応します。
⑧は、⑥と同じように「セクション」設定します。タグを設定します。

９、フッターの設置

フッターはWebサイトのページ最下部にある要素です。一般的にはサイトマップやWebサイトの運営者情報（会社名・住所・電話番号などの連絡先）、コピーライトなどが記載され、基本的にはWebサイト全体で共通の要素・デザインを使用します。

設定方法はコチラをご覧ください！

XWRITEのフッターの使い方｜ナビゲーションメニューとアイコン

本記事の要点・結論本記事を読めば、「XWRITEのフッターの使い方｜メニューとアイコン」がわかるようになります。ブログを始…

2024年9月9日 2024年11月5日

ブログのトップページが大事な理由

今回は、XWRITEでのトップページの作り方を説明しましたが、ブログのトップページは、とても大事だと言われています。この理由を知ることで、よりよいトップページができると思いますので、参考までに載せておきます。

理由	詳細
第一印象を決定する	トップページは訪問者が最初に目にする場所で、ブログに興味を持つかどうかが決まる
ブログ全体のナビゲーションを提供	カテゴリ、人気記事、検索機能などで、ユーザーが目的のコンテンツにスムーズにアクセスできるようサポート
SEO効果を高める	検索エンジンの評価に影響し、適切なキーワードやメタデータで流入を増加させることができる
ブランドやメッセージを伝える	ブログのテーマや個性を反映し、訪問者がブログの目的やスタイルを理解できる
リピーターを増やす	使いやすく魅力的なデザインが、再訪問したいという印象を与え、リピーターを増やす効果がある。