広告 AFFINGER

AFFINGER5トップページの作り方【画像でわかりやすく解説】

2020年3月27日

AFFINGERトップページの作り方

AFFINGER5のトップページは、デフォルトの状態では投稿した記事が新しい順に並ぶだけの設定になっています。

ブログの顔とも言えるオリジナルのトップページを作るためには、別途設定が必要です。

この記事では、「トップページの作り方」と「作る際に参考にしたいお洒落なサイト」を紹介しています。

 

こんな人のお役に立てる記事です。

小豆
小豆
AFFINGERで作られたブログを見ると、どれもみんなTOPページがオシャレでカッコいい。
同じAFFINGERを使っているのに、自分のブログとは大違い・・。
トップページってどうやって作ったらいいの？

AFFINGERでトップページを作るには固定ページを利用する

トップページを作るためには、固定ページを使用します。

固定ページ

 

トップページ作成の全体の流れはこんな感じ。

作成の手順

  1. 固定ページを利用してトップページを作成する
  2. 記事を公開し、記事のIDをメモする
  3. AFFINGER管理から、作成した固定記事をトップぺージに設定する
大福
大福
全然難しくないから大丈夫！
でも、トップぺージって一体何のために作るんだ？？
小豆
小豆

 

トップページの重要な３つの役割

ブログの顔ともいえるトップページには、重要な３つの役割があります。

  • ブログ全体のイメージを伝える役割
  • 記事を訪れたユーザーが迷わず目的のページにたどり着けるようにする役割
  • ブログの更新情報や新着記事などをユーザーに伝える役割

 

一言で簡単に言えば、トップページはブログの案内板のような役割を果たしているということですね。

訪れてくれたユーザーにストレスなくブログを見てもらうために、トップページはとても重要です。

作り方を実際の手順でわかりやすく解説

それでは、早速AFFINGERでトップページを作る方法を解説していきます。

手順はたった3ステップ。

迷うことが無いように、画像付きで詳しく説明していきます。

作成の手順

  1. 固定ページを利用してトップページを作成する
  2. 記事を公開し、記事のIDをメモする
  3. AFFINGER管理から、作成した固定記事をトップぺージに設定する

 

step
1固定ページを利用してトップページを作成する

トップページを作成するには、固定ページを利用します。

固定ページで作成

WordPressメニュー　→　固定ページ　→　新規追加

メモ

「固定ページ」という名前がついていますが、画面は普段記事を書くときに使用している画面と同じです。

ここにブログのトップページに表示したい内容を作成していきます。

トップページをどんな感じで作っていいかわからない人は、記事後半の【トップページ作りの参考にしたいAFFINGERで作られたお洒落なブログ】を参考にしてください。

 

step
2記事を公開し、記事のIDをメモする

記事IDをメモ

クリックで拡大できます

トップページの作成が済んだら、公開ボタンをクリック。

固定ページ一覧から、記事IDを確認しメモしておきます。

WordPressメニュー　→　固定ページ　→　固定ページ一覧

 

step
3AFFINGER管理から、作成した固定記事をトップぺージに設定する

作成した固定記事を、ブログのトップページに表示されるよう設定してきます。

トップページの設定

WordPressメニュー　→　AFFINGER5管理　→　トップページ

トップページの設定内、「トップページに固定記事を挿入」に先ほどメモした記事IDを入力

最後に画面一番下のsaveボタンをクリック

 

以上で、作成した固定ページをトップページに表示する設定は終わりです。

 

トップページに新着記事を表示する２つの方法

デフォルトの状態ではトップページに新着記事が並んでいましたが、オリジナルのトップページを作成すると新着記事は表示されません。

小豆
小豆
あれ？新着記事って重要な役割持っていなかった？？

冒頭でも書きましたが、トップページには重要な３つの役割があります。

  • ブログ全体のイメージを伝える役割
  • 記事を訪れたユーザーが迷わず目的のページにたどり着けるようにする役割
  • ブログの更新情報や新着記事などをユーザーに伝える役割

 

毎日あなたのブログをチェックしてくれているユーザーさんにとって、新着記事が表示されないというのは不便極まりないですよね。

というわけで、トップページにも新着記事を表示させる方法を２つ紹介します。

  1. スライドショーを使用
  2. NEWS機能を使用

 

  • スライドショーを使用

スライドショー機能を使用すると、新着記事をスライドで表示することができます。

Fire TV Stick

プライムビデオ

2025/3/30

プライムビデオ【2025年4月の配信予定作品】を画像で確認

Amazonプライムビデオで、2025年4月に配信予定の作品を画像付きでまとめました。    こんな人のお役に立てる記事です。 プライムビデオ【2025年4月の配信予定作品】一覧 2025年4月は、新作アニメ作品が豊富ですね。 また、Amazonプライムだけでしか見れない独占配信作品が２２作品も！ プライム会員なら、要チェックです。   こんな人には、プライムビデオ30日間無料トライアルがおすすめです。 初めての人限定で30日間プライムビデオを見放題で楽しめます。 期間中の解約であれば ...

ReadMore

Windowsエクスプローラー

生活お役立ち

2025/3/16

エクスプローラーで任意の拡張子だけに絞って表示【複数フォルダからも】Windows11

Windows11エクスプローラーにて、任意の拡張子のファイルを絞り込み表示する方法の紹介です。 また、複数のフォルダやサブフォルダ内も含め一括検索する方法も解説していきます。 目的のファイルを探すときやデータの整理時に役立ちます。   こんな人のお役に立てる記事です。 エクスプローラーで任意の拡張子だけに絞って表示 今回僕が行いたいのは、異なるファイルでごちゃ混ぜのフォルダを整理すること。 こちら、iPhoneのアルバムをパソコンに保存したものなのですが・・。 フォルダ内には4000個を超える ...

ReadMore

Fire TV Stick

プライムビデオ

2025/2/28

プライムビデオ【2025年3月の配信予定作品】を画像で確認

Amazonプライムビデオで、2025年3月に配信予定の作品を画像付きでまとめました。    こんな人のお役に立てる記事です。 プライムビデオ【2025年3月の配信予定作品】一覧 2025年3月のプライムビデオは、過去の名作洋画が豊富です。 また音楽では、「Official 髭男 dism Arena Tour 2024 - Rejoice」を独占配信。 さらにスポーツでは、「MLB レギュラーシーズン」の生配信もスタートします。   こんな人には、プライムビデオ30日間無料トライアル ...

ReadMore

使い方

タグ　→　記事一覧　→　カテゴリ一覧スライドショー

ショートコードをいじることでカスタマイズも可能です。

 shortcode
[st-catgroup cat="カテゴリID指定" page="読み込み数" order="desc" orderby="id" child="子カテゴリーの読み込み" slide="スライドショーのオンオフ" slides_to_show="列数の指定" slide_more="続きを読む" 　slide_center="off"]

 

  • NEWS機能を使用

画像を表示せず、記事タイトルだけをシンプルに表示したい場合は【NEWS機能】を使用します。

新着記事一覧

 

使い方

WordPressメニュー　→　AFFINGER5管理　→　トップページ　→　NEWS（お知らせ）の表示

「お知らせをTOPページの一番上に表示する」にチェックを入れる

 

大福
大福
カラーも自分好みに変えられるよ！

NEWSのカラーを変更

WordPressメニュー　→　外観　→　カスタマイズ　→　オプション

トップページ作りの参考にしたいAFFINGERで作られたお洒落なブログ

小豆
小豆
TOPページの作り方はわかったけど、一体どんなデザインにしたらいいんだ？

こんな時には、AFFINGERで作成されたお洒落なブログを参考にするのが一番です。

 

僕がAFFINGER5を購入するきっかけにもなった、お洒落でカッコいいブログはこちらの記事内で紹介しています。

AFFINGERの評判
AFFINGERの評判を使用歴3年の僕が解説【見本サイトも紹介】

続きを見る

記事目次より「AFFINGERで作られたお手本にしたいブログサイト」に移動してください。

 

大福
大福
どのブログも真似したくなるほど、魅力的なデザインだよ！

 

このブログのトップページの作り方をちょっと解説

このブログ（大福日記）のトップページの設定を簡単に解説します。

TOPページデザイン

実際のトップページをチェックしたい人はこちら

 

  • 新着記事スライドショー

新着記事をスライドショーで表示します。

使い方

タグ　→　記事一覧　→　カテゴリ一覧（スライドショー）

 

  • レイアウト

コンテンツエリアを左右50％ずつに分けて表示しています。

使い方

タグ　→　レイアウト　→　PCとTab　→　左右50％

 

  • バナー（リンク付き）

画像バナーです。カテゴリ記事一覧へのリンクを設定してあります。

使い方

タグ　→　ボックスデザイン　→　バナー風ボックス　→　基本

 

  • ブログカード

カードデザイン風の記事リンクです。

メモ

カードボタン

 

  • ボックスメニュー

アイコン付きのリンクボックスです。

使い方

タグ　→　カスタムボタン　→　ボックスメニュー

 

  • プロフィール

背景画像付きのプロフィールです。

使い方

こちらの記事で詳しく紹介しています。

✔AFFINGERでサイドバーに魅力的なプロフィールカードを設置しよう

 

まとめ：オリジナルトップページでブログを見やすくしよう

このブログ（大福日記）は、開設してしばらくはトップページを作っていませんでした。

設定は、デフォルトの「ただ新着記事一覧が表示されるだけ」の状態。

 

運営8カ月目くらいでトップページを作ったわけですが、すぐにこんな効果が現れました。

  • 読んで欲しい記事をピンポイントで読んでもらえるようになった
  • それまでは埋もれていた過去に書いた記事も読まれるようになった

 

ホント、もっと早くトップページを作っておくべきでしたね・・。

まだの人は、この記事を参考にぜひトップページを作ってみて下さい。

 

\ AFFINGER6の購入を検討している人におすすめの記事 /

 

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ＆役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選：2,980円　→　2,480円
・カスタマイズ＆役立つテクニック 14選　4,980円　→　3,980円

 

特典詳細ページへ移動する

Sponsored Links

この記事タイトルとURLをコピー
  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

S