ブログ(アフィリエイト)

WordPress でアフィリエイト!おしゃれなサイト型のトップページを作ろう

広告:ページ内にてアフィリエイト広告を利用しています。

かっこいいトップページを作る

サイトの顔であるトップページを作りましょう!

ポイント

本記事では、

WordPress でサイトを作る場合のトップページの作り方を解説します。

かっこいいトップページを作りましょう!

「アフィリエイトの始め方とブログの作り方を完全解説!」はこちら

PR

トップページとは

トップページとは

サイトの基本的なURL( "https://ドメイン" )でアクセスした場合に表示するページです。

サイトのイメージを決める最も大事なページであり、サイトの顔でもあります。

トップページのサンプル

トップページは大事なページですが、ある程度「記事」を書いてカテゴリとメニューが固まってから作ったほうが「よりよいトップページ」を作ることができます。

最初にいきなり作らず、WordPress のご利用に慣れてきたころに作ることをおすすめします。

■ 「ブログ型」と「サイト型」

ブログ型とサイト型

ブログのトップページは主に「ブログ型」と「サイト型」に分類されます。WordPress でブログを始めたばかりのときは「ブログ型」です。ブログ型は最新の記事順に並んで表示するので記事更新を読者にアピールできます。

一方「サイト型」はカテゴリーや文章などでおすすめ記事を前面に表示し、サイトの「推し記事」を読者にクリックしてもらうなどの工夫をしています。トップページから入ってきた読者に読んでほしい記事への導線が作りやすいのが特徴です。

ブログ型

(ブログ型)

最近の記事一覧が新しい順番に並ぶ。日記風。

サイト型

(サイト型)

お勧め記事やカテゴリーなどを配置する。

Ameba(アメブロ)などの主な無料ブログサービスでは「ブログ型」のトップページとなり、変えられません。WordPress で作った個人ブログの場合、「サイト型」のほうがアフィリエイトには有利と言われています。

■ トップページを素敵にする工夫

素敵にする工夫

トップページはいろいろな表現で読者にサイトのデザインの良さをアピールするチャンスです。

よくあるテクニックや部品を紹介します。

ピックアップバナー・ヘッダーカード

サイト上部にカード型のリンクを並べたものです。SWELLでは「ピックアップバナー」、AFFINGERでは「ヘッダーカード」と呼びます。

ピックアップバナー・ヘッダーカードのサンプル

主にカテゴリーページや、特筆記事などへの直リンクを用意します。ユーザー(読者)がワンクリックで目的のカテゴリーやページに飛べるようになりますので、サイトの操作性も向上する表現です。

実際に利用しているサイト(SWELL で作成)を見たい場合は、こちら をクリック!

記事スライダー・スライドショー

新着記事一覧をスライダー形式で演出したものです。SWELLでは「記事スライダー」、AFFINGERでは「スライドショー」と呼びます。

記事スライダー・スライドショーのサンプル

サイト型のトップページではどうしても新着記事のアピールが難しくなります。スライドしながら新着を表示することで動きも出ることからサイト型にも適しておりトップページの演出としても映えます。

実際に利用しているサイト(AFFINGER で作成)を見たい場合は、こちら をクリック!

メインビジュアル(SWELL)

サイトのトップページに、画面・ブラウザいっぱいに画像や動画を表示するとインパクトがあって映えますね。SWELLでは「メインビジュアル」という機能でトップページに画像や動画を設定しつつ、テキストやボタンなどを重ね合わせた演出をすることができます。

メインビジュアル(SWELL)のサンプル

SWELL のメインビジュアルを利用すると、画像の上に自由にコンテンツを配置できるため、動きを持たせたりボタンなどの操作性のある部品を配置するなど工夫できるところが優れています。ユーザー(読者)にとってもインパクトある演出になりますね。

実際に利用しているサイト(SWELL で作成)を見たい場合は、こちら をクリック!

トップページの作り方

トップページの作り方

■ AFFINGER を利用したトップページ例

アフィンガーの場合

トップページは自由に表現して独自性のあるページにして構いません。

一例として、記事スライダー&ブログカードを2列にするトップページの作成イメージです。

カクテルを題材にした大人でシックな演出のデモサイトです。

(マウスオーバーでスクロールして全体をみることができます)

\ 他のサンプルも載せています。こちらをご覧ください /

アフィンガーでオシャレサイトを作る方法!サンプルあり

https://boonboonblog.com/entries/entry-33680.html

トップページの作り方例(例)

1.固定ページを作成する

「固定ページ」 を作成します。

( WordPress の管理画面から 「固定ページ」 → 「新規作成」 で固定ページを作ります )

step
1
記事スライドショーをつける

カテゴリ一覧(スライドショー)の設定
  • クラシックから 「タグ」 → 「記事一覧 / カード」 → 「カテゴリ一覧(スライドショー)」 を選択する
スライドショーのプロパティを設定

必要に応じてプロパティをセットします。

プロパティ内容
cat表示する 「カテゴリ」 の ID をカンマ区切りで入力します。(制限しない場合は "0" )
page表示する記事数(スクロールして表示する記事の最大数)を指定します。

ポイント

「記事スライドショー」(サンプルでは、What's New の下の左右に自動スクロールする部分が作れます。

step
2
記事カードを2列で作成する

カラムブロックを配置する
  • 「カラム」ブロックを 50 / 50 で配置する
  • 左右にタイトル・記事カードを配置する
記事カードを設置する
  • 「クラシック」ブロックを配置する
  • 「カード」を選択する
  • 必要に応じてプロパティをセットする
項目内容
id表示する記事の ID を入力します。
readmore「off」 を指定します。「続きを読む」 を非表示にします。

ポイント

左右に2列に分けて表示します。サイト(記事一覧)が見やすくなります。

2.カード型の設定をする

記事をカード型に設定します。

記事をカード型に設定する

WordPress の管理画面から「AFFINGER管理」→「全体設定」→「サムネイル画像設定」を選択します。

記事一覧

  • 「PC(960px以上)のサムネイル画像を大きくする」をチェックする
  • 「スマホ(599px以下)でもサムネイル画像を大きくする」をチェックする
  • 「サムネイル画像をさらに大きく」をチェックする

ブログカード・埋め込みURL

  • 「内部リンクのサムネイル画像をそのまま表示する」をチェックする
  • 「PC(960px以上)のサムネイル画像を大きくする」をチェックする
  • 「スマホ(599px以下)でもサムネイル画像を大きくする」をチェックする
  • 「サムネイル画像をさらに大きく」をチェックする

3.記事カードの 「抜粋」 を非表示にする

記事カードには「記事の抜粋」を表示しています。抜粋が長い場合、表示錠文字数が多くなりバランスが悪くなる場合がありますので、必要に応じて抜粋を非表示にしてください。

抜粋を非表示にする。

WordPress の管理画面から、「AFFINGER 管理」 → 「全体設定」 →「抜粋設定」を選択します

  • 「PC 閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」 をチェックする

4.固定ページをトップページに設定する

固定ページをトップページに設定します。

ホームページ(トップページ)を固定ページに設定する

WordPress の管理画面から 「外観」 → 「カスタマイズ」 → 「ホームページ設定」 を選択します。

  • 「ホームページの表示」 で 「固定ページ」 を設定する
  • 「ホームページ」 で作成した固定ページを指定する

ポイント

トップページを固定ページに差し替えることで、初期状態のブログ記事一覧ではなくなります。

5.完成

完成です。

そのほか、AFFINGER でオシャレなサイトを作る方法は、こちら をご覧ください

アフィンガーでオシャレなサイトを作る方法

https://boonboonblog.com/entries/entry-33680.html

まとめ

トップページのまとめ

サイトの顔であるトップページを作りましょう!

トップページは大事なページです。ある程度「記事」を書いてカテゴリとメニューが固まっている状態で作ったほうが「よりよいトップページ」を作ることができます。

最初にいきなり作らず、記事数をためてから作ることをおすすめします。

おすすめ始め方
アフィリエイトスクール
ノートパソコン

ブログの作り方などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

もっとアフィリエイトを詳しく知りたいときは

アフィリエイトをもっと詳しく!

クリックアイコン
PR
―― 今日のおみくじ ――

第 31 番

”末吉"


今日のメッセージ

クールヘッド、ホットハート!熱き心で進みましょう!
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記