サイトの顔であるトップページを作りましょう！
ポイント
本記事では、
WordPress でサイトを作る場合のトップページの作り方を解説します。
かっこいいトップページを作りましょう！
「アフィリエイトの始め方とブログの作り方を完全解説！」はこちら
トップページとは
サイトの基本的なＵＲＬ（ "https://ドメイン" ）でアクセスした場合に表示するページです。
サイトのイメージを決める最も大事なページであり、サイトの顔でもあります。
トップページは大事なページですが、ある程度「記事」を書いてカテゴリとメニューが固まってから作ったほうが「よりよいトップページ」を作ることができます。
最初にいきなり作らず、WordPress のご利用に慣れてきたころに作ることをおすすめします。
■ 「ブログ型」と「サイト型」
ブログのトップページは主に「ブログ型」と「サイト型」に分類されます。WordPress でブログを始めたばかりのときは「ブログ型」です。ブログ型は最新の記事順に並んで表示するので記事更新を読者にアピールできます。
一方「サイト型」はカテゴリーや文章などでおすすめ記事を前面に表示し、サイトの「推し記事」を読者にクリックしてもらうなどの工夫をしています。トップページから入ってきた読者に読んでほしい記事への導線が作りやすいのが特徴です。
（ブログ型）
最近の記事一覧が新しい順番に並ぶ。日記風。
（サイト型）
お勧め記事やカテゴリーなどを配置する。
Ameba（アメブロ）などの主な無料ブログサービスでは「ブログ型」のトップページとなり、変えられません。WordPress で作った個人ブログの場合、「サイト型」のほうがアフィリエイトには有利と言われています。
■ トップページを素敵にする工夫
トップページはいろいろな表現で読者にサイトのデザインの良さをアピールするチャンスです。
よくあるテクニックや部品を紹介します。
ピックアップバナー・ヘッダーカード
サイト上部にカード型のリンクを並べたものです。SWELLでは「ピックアップバナー」、AFFINGERでは「ヘッダーカード」と呼びます。
主にカテゴリーページや、特筆記事などへの直リンクを用意します。ユーザー（読者）がワンクリックで目的のカテゴリーやページに飛べるようになりますので、サイトの操作性も向上する表現です。
実際に利用しているサイト（SWELL で作成）を見たい場合は、こちら をクリック！
記事スライダー・スライドショー
新着記事一覧をスライダー形式で演出したものです。SWELLでは「記事スライダー」、AFFINGERでは「スライドショー」と呼びます。
サイト型のトップページではどうしても新着記事のアピールが難しくなります。スライドしながら新着を表示することで動きも出ることからサイト型にも適しておりトップページの演出としても映えます。
実際に利用しているサイト（AFFINGER で作成）を見たい場合は、こちら をクリック！
メインビジュアル（SWELL）
サイトのトップページに、画面・ブラウザいっぱいに画像や動画を表示するとインパクトがあって映えますね。SWELLでは「メインビジュアル」という機能でトップページに画像や動画を設定しつつ、テキストやボタンなどを重ね合わせた演出をすることができます。
SWELL のメインビジュアルを利用すると、画像の上に自由にコンテンツを配置できるため、動きを持たせたりボタンなどの操作性のある部品を配置するなど工夫できるところが優れています。ユーザー（読者）にとってもインパクトある演出になりますね。
実際に利用しているサイト（SWELL で作成）を見たい場合は、こちら をクリック！
トップページの作り方
■ AFFINGER を利用したトップページ例
トップページは自由に表現して独自性のあるページにして構いません。
一例として、記事スライダー＆ブログカードを２列にするトップページの作成イメージです。
カクテルを題材にした大人でシックな演出のデモサイトです。
（マウスオーバーでスクロールして全体をみることができます）
＼ 他のサンプルも載せています。こちらをご覧ください ／
https://boonboonblog.com/entries/entry-33680.html
トップページの作り方例（例）
１．固定ページを作成する
「固定ページ」 を作成します。
（ WordPress の管理画面から 「固定ページ」 → 「新規作成」 で固定ページを作ります ）
step
1記事スライドショーをつける
- クラシックから 「タグ」 → 「記事一覧 / カード」 → 「カテゴリ一覧（スライドショー）」 を選択する
必要に応じてプロパティをセットします。
| プロパティ | 内容 |
|---|---|
| cat | 表示する 「カテゴリ」 の ID をカンマ区切りで入力します。（制限しない場合は "0" ） |
| page | 表示する記事数（スクロールして表示する記事の最大数）を指定します。 |
ポイント
「記事スライドショー」（サンプルでは、What's New の下の左右に自動スクロールする部分が作れます。
step
2記事カードを２列で作成する
- 「カラム」ブロックを 50 / 50 で配置する
- 左右にタイトル・記事カードを配置する
- 「クラシック」ブロックを配置する
- 「カード」を選択する
- 必要に応じてプロパティをセットする
| 項目 | 内容 |
|---|---|
| id | 表示する記事の ID を入力します。 |
| readmore | 「off」 を指定します。「続きを読む」 を非表示にします。 |
ポイント
左右に２列に分けて表示します。サイト（記事一覧）が見やすくなります。
２．カード型の設定をする
記事をカード型に設定します。
WordPress の管理画面から「AFFINGER管理」→「全体設定」→「サムネイル画像設定」を選択します。
記事一覧
- 「PC（960px以上）のサムネイル画像を大きくする」をチェックする
- 「スマホ（599px以下）でもサムネイル画像を大きくする」をチェックする
- 「サムネイル画像をさらに大きく」をチェックする
ブログカード・埋め込みURL
- 「内部リンクのサムネイル画像をそのまま表示する」をチェックする
- 「PC（960px以上）のサムネイル画像を大きくする」をチェックする
- 「スマホ（599px以下）でもサムネイル画像を大きくする」をチェックする
- 「サムネイル画像をさらに大きく」をチェックする
３．記事カードの 「抜粋」 を非表示にする
記事カードには「記事の抜粋」を表示しています。抜粋が長い場合、表示錠文字数が多くなりバランスが悪くなる場合がありますので、必要に応じて抜粋を非表示にしてください。
WordPress の管理画面から、「AFFINGER 管理」 → 「全体設定」 →「抜粋設定」を選択します
- 「PC 閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」 をチェックする
４．固定ページをトップページに設定する
固定ページをトップページに設定します。
WordPress の管理画面から 「外観」 → 「カスタマイズ」 → 「ホームページ設定」 を選択します。
- 「ホームページの表示」 で 「固定ページ」 を設定する
- 「ホームページ」 で作成した固定ページを指定する
ポイント
トップページを固定ページに差し替えることで、初期状態のブログ記事一覧ではなくなります。
５．完成
完成です。
そのほか、AFFINGER でオシャレなサイトを作る方法は、こちら をご覧ください
https://boonboonblog.com/entries/entry-33680.html
まとめ
サイトの顔であるトップページを作りましょう！
トップページは大事なページです。ある程度「記事」を書いてカテゴリとメニューが固まっている状態で作ったほうが「よりよいトップページ」を作ることができます。
最初にいきなり作らず、記事数をためてから作ることをおすすめします。
ブログの作り方などについてココナラにて「支援作業」を販売しております。
よかったらご利用くださいませ。
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。
