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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

１、サイトタイトル

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

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

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

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

３、メインビジュアル

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

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

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

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

５～8、固定ページ

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

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

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

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

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

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

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

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

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

⑥を作ります。

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

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

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

９、フッターの設置

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

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

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

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

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

ブログのトップページの作り方でよくある Q＆A

ブログのトップページの作り方の「まとめ」

このブログを訪れていただき、感謝の気持ちでいっぱいです。😊

いかがでしたでしょうか？トップページは、ブログの第一印象を決める非常に重要なパーツです。 ですが、一度作って終わりではなく、記事数の増加やブログの成長に合わせて少しずつ育てていくものです。 そのプロセスを楽しみながら取り組むことが、読者にとってもあなた自身にとっても、価値のあるブログ運営につながります。

「XWRITE」を使えば、公式デモサイトのように洗練されたデザインを実現できるだけでなく、直感的な操作で簡単にカスタマイズが可能です。 初心者の方でも、今回ご紹介した手順を参考にすることで、トップページの作成に自信を持って取り組むことができるはずです。

トップページは「ユーザビリティ」や「回遊性」、さらには「見た目」も問われる重要なエリア。 今回お伝えしたポイントを押さえながら、あなたのブログに最適なデザインを追求してください。 トライ＆エラーを繰り返しながら、訪問者にとってわかりやすく魅力的なトップページを育てていく過程は、ブログ運営の楽しさのひとつでもあります。

ぜひ、この情報を活用して、より魅力的で機能的なトップページを目指してみてくださいね！ あなたのブログがさらに素敵なものになることを心から応援しています。