AFFINGER

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

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

サイト型トップページを作る

ブログのトップページのデザインには主に「ブログ型」と「サイト型」がありますね。

ブログ型は新着記事が見やすい一方、注目記事への導線が作りにくく、「サイト型」はトップページから読者に「これだ!」と思ってもらえる記事をアピールすることができます

ポイント

本記事では、

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

AFFINGER を使って、素敵なサイトを作りましょう!

\ AFFINGER でオシャレなサイトを作る方法は こちら

【サンプルあり】アフィンガーでおしゃれなサイト・トップページを作る方法!デモサイトも紹介

ブロガー必見!WordPressテーマ「AFFINGER(アフィンガー)」で簡単に作るオシャレなサイト。AFFINGERならあなたもオリジナリティ溢れるサイトを手軽に作れます。ここではAFFINGERの魅力満載のサンプル(デモサイト)をご紹介し、さらにオシャレサイトの作り方も詳しく解説します。ワクワクするAFFINGERの世界へ一緒に飛び込みましょう!

続きを見る

初期設定、全体のデザイン
記事の書き方、使い方
サイドバーをデザインする
トップページをデザインする
ヘッダー、フッター、設定する
ファビコンを設定する
PR

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

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

ブログ型のサイト

(ブログ型)

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

サイト型のサイト

(サイト型)

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

トップページの作り方

■ ヘッダーカードを作る

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

ヘッダーカードの例

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

ヘッダーカード設定画面

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

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

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

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

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

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

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

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

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

固定ページの新規作成

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

固定ページ編集画面

固定ページのタイトルは「ブログ名」などブログタイトル(例:「Boon Boon Style」)にします。「公開」ボタンを押下し、ページを公開します。

ポイント

固定ページのタイトルが、サイトをブックマークしたときなどの初期設定文字列になります。

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

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

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

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

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

カード型リンクの具体例

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

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

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

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

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

ポイント

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

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

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

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

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

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

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

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

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

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

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

ポイント

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

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

サイト型のトップページ

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

AFFINGER もっと!お役立ちテクニック

AFFINGER のお役立ちテクニックはこちら

まとめ:サイト型トップページを作る

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

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

ポイント

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

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

ヘッダーとフッター
ファビコン
おしゃれサイト

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

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

アフィリエイトを戦うなら「AFFINGER」

「Affingerタグ管理マネージャー4とPVモニター2のセット」では、

コードの管理、クリック数の計測など、アフィリエイトに役立つ解析機能が付いています。

「Affingerタグ管理マネージャー4とPVモニター2のセット」のご利用も是非ご検討ください。

PR
AFFINGER TAG MANAGER
PR
AFFINGER TAG MANAGER
  • サイト全体と記事ごとのアクセス推移
  • ユーザーの導線の確認
  • 人気記事の把握
  • アクセス元の把握
  • リンクや広告の効果測定(表示回数 / クリック数)
  • クリックされた記事の把握
PR

\気になったら、とりあえず見てみよう/

詳しく見る

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

PR
―― 今日のおみくじ ――

第 79 番

吉


今日のメッセージ

逃げてもいい、間違ってもいい。無事なら次にもう一度、戦える。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

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

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

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

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

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