AFFINGER

第5回:アフィンガー入門「サイト型トップページを作る(初心者向け図解で完全案内)」


ボートパソコンを見てほほ笑む女性

AFFINGER の「サイト型トップページを作る方法」を簡単解説します。

購入、インストールが未済の方は、次の記事を参照してインストールしてください。

サイト型トップページとは

サイトには大きく「ブログ型」と「サイト型」の構成があります。サイト型のトップページのほうが、よりユーザー(読者)を狙った記事に誘導できるため、サイト型記事がおすすめされています。

ブログ型のサイト

(ブログ型)

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

サイト型のサイト

(サイト型)

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

トップページの作り方

■ ヘッダーカードを作る

ヘッダーカードとは、サイト上部に配置するカード型のメニューのことです。

ヘッダーカードの例

サイトの上部に常に表示されるカード型メニューのため、ユーザー(読者)の目にも止まりやすく、サイト内回遊率の向上につながります。

ヘッダーカード設定画面

WordPress の管理画面から「AFFINGER 管理」→「ヘッダー下 / おすすめ」を選択します。

画像(イメージ)、表示テキスト、クリック時の移動先(URL)を設定することでヘッダーカードを表示できます。最大4枚まで配置可能です。

■ トップページのブログ表示の削除

初期設定ではトップページには、「新着記事一覧」を表示しているので、非表示に設定します。

トップページの進捗記事一覧を非表示にする

WordPress の管理画面から「AFFINGER 管理」→「トップページ」を選択します。

「トップページのコンテンツ内の新着記事一覧を非表示にする」をチェックすることで、新着記事一覧が非表示になります。

■ 固定ページの作成と、トップページへの配置

サイトのトップページは、「固定ページ」で見た目を作り、トップページに割り当てます。

固定ページの新規作成

WordPress の管理画面から「固定ページ」→「新規作成」をクリックして固定ページを作ります。

固定ページ編集画面

固定ページのタイトルは任意の名前で構いません。ここでは仮に「Top Page」と入力しています。「公開」ボタンを押下し、ページを公開します。

固定ページをトップページに割り当てる

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

「ホームページの表示」を「固定ページ」に変更し、「ホームページ」でトップページに設定する固定ページを選択します。

■ カード型の記事リンクの配置

カード型記事を配置するための全体設定

カード型リンクの具体例

トップページにお勧め(読んでほしい)記事へのリンクをカード型で配置します。

初期設定では、記事の画像(サムネイル)の表示が小さいため、設定を変更してカード型に見えるように設定します。

サムネイル画像を大きくする設定

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

  • 「フルサイズにする」を指定します
  • 「記事一覧」の「PC(960px以上)のサムネイル画像を大きくする」をチェックします
  • 「記事一覧」の「スマホ(599px以下)でもサムネイル画像を大きくする」をチェックします
  • 「記事一覧」の「サムネイル画像をさらに大きく」をチェックします
  • 「ブログカード・埋め込みURL」の「PC(960px以上)のサムネイル画像を大きくする」をチェックします
  • 「ブログカード・埋め込みURL」の「スマホ(599px以下)でもサムネイル画像を大きくする」をチェックします
  • 「ブログカード・埋め込みURL」の「サムネイル画像をさらに大きく」をチェックします

ポイント

「PC(960px以上)のサムネイル画像を大きくする」をチェックして保存すると、「スマホ(599px以下)でもサムネイル画像を大きくする」、「サムネイル画像をさらに大きく」がチェックできるようになります。

固定ページでカード型の記事リンクを配置する方法

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

固定ページでカラムを2分割する方法

「カラム」ブロックを作成し「50 / 50」を設定します。

クラシックブロックの配置

50 / 50 で分けたカラムに対して、「クラシック」ブロックを配置します。

クラシックブロックでカードを配置

クラシックブロックで「カード」を選択し、id に記事番号を設定し、readmore を off に書き換えます。

固定ページに記事リンクを並べたイメージ

トップページに表示したい記事を並べて完成です。

ポイント

横1行ごとに、「カラム」ブロックを作ることで、縦に記事カードの段差ができずに配置することができます。

「プレビュー」ボタン押下でプレビュー画面の表示、もしくは、「公開」ボタンを押して保存し、トップページを表示して、狙った通りのデザインや配置になっているか確認してください。

サイト型のトップページ

サイト型のトップページになっていれば完成です。

まとめ

本気でブログ・サイト・アフィリエイトを取り組みたいなら、WordPress の優良テーマ「AFFINGER(アフィンガー)」がお勧めです。

AFFINGER(アフィンガー)でのサイト型のトップページの作り方を紹介させていただきました。

  • ヘッダーカードを配置する
  • ブログ型の新着記事一覧表示を非表示にする
  • 固定ページをトップページに設定する
  • カード型の記事リンクを配置する

AFFINGER(アフィンガー)は、初心者でもオシャレなサイトを作ることができ、上級者になっても満足して使える優良なテーマです。

ぜひ活用ください。よければ、本サイトを経由してのご購入をお願いします。

ご協力のお願い

本サイトから購入していただければ、私の AFFINGER のテクニックを皆様へお伝えする記事作成のモチベーションが爆上がりします。本当にうれしいです。

これからも良い記事をたくさん書かせていただきたいと思いますので、ぜひご協力をお願いします

AFFINGER ご購入ページはこちら

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










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




Presented By Irojiro Haraguro .Com