AFFINGER

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

2020年3月27日

AFFINGERトップページの作り方

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

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

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

 

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

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

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

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

固定ページ

 

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

作成の手順

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

 

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

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

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

 

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

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

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

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

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

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

作成の手順

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

 

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

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

固定ページで作成

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

メモ

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

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

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

 

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

記事IDをメモ

クリックで拡大できます

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

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

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

 

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

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

トップページの設定

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

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

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

 

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

 

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

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

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

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

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

 

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

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

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

 

  • スライドショーを使用

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

画像編集

作業効率化

2020/10/20

画像の背景を自動で切り抜き別画像に合成する方法【ブログに最適】

画像から余分な背景だけを自動で切り抜き、別の画像に合成する方法の紹介です。 難しい操作は一切必要なし。 だれでも簡単にプロ顔負けの合成画像が作れます。   こんな人のお役に立てる記事です。 小豆ブログ用に、2枚の画像を合成してオリジナル画像を作りたい。 難しいことは苦手だし時間もかけたくないから、簡単にできると嬉しいんだけど。 目次 画像の背景を自動で切り抜いて別の画像に合成【簡単】 操作手順【画像背景の切り抜き~保存】 切り抜いた画像を別の画像に合成する方法 色んなパターンの画像で「切り抜き& ...

ReadMore

撮影用照明画像

通販

2020/10/19

ブログ写真撮影用の照明を2,000円台で購入【物撮りレビュー】

ブログに載せる写真の撮影用に、通販で2,000円台の照明を購入。 照明あり・なしの写真の差や、購入して気づいたポイントなどをまとめました。   こんな人のお役に立てる記事です。 小豆ブログに載せる写真が、どうも上手く撮れない。 撮影時に照明を使うといいらしいのは調べてわかったんだけど・・。 どれくらい差が出るのかを知りたい。 目次 ブログ用写真撮影のために購入した照明【2,000円台】 物撮りレビューとお気に入りポイント 購入前に知っておきたい【ちょっと残念ポイント】 まとめ:物撮りをするなら照 ...

ReadMore

TP-Link Tapo C200レビュー

通販

2020/10/16

【TP-Link Tapo C200レビュー】良いトコ・悪いトコ

見守り用ネットワークカメラ【TP-Link Tapo C200】をレビューしていきます。 画質や音質、操作性はもちろん、使って感じた「ここがちょっと残念」なポイントも紹介します。   こんな人のお役に立てる記事です。 小豆TP-Linkの「Tapo C200」ってカメラの購入を検討している。 通販での人気や評価はすごく良いみたいだけど、実際のところはどうなの? 価格が安いから、ちょっと色々と気になる。 目次 【TP-Link Tapo C200レビュー】5,000円以下で買える見守りカメラ ここ ...

ReadMore

PhotoScape

How To

2020/10/13

【PhotoScape】挿入後の矢印や枠の位置・サイズを編集する方法

画像編集ソフト【Photoscape(フォトスケープ)】で、挿入後のオブジェクトを編集する方法の紹介です。 矢印や枠のサイズの変更はもちろん、線の太さやカラーの変更、オブジェクトのコピー方法なども解説していきます。   こんな人のお役に立てる記事です。 小豆ブログに載せる画像の編集に、Photoscapeを使っている。 機能がシンプルで使いやすい点は気に入っているんだけど・・。 挿入後の矢印や枠などのサイズを後から変更できたら、もっと便利なのに。 目次 Photoscapeで挿入後の矢印や枠のサ ...

ReadMore

WordPress赤い波線削除

How To

2020/10/12

WordPress記事投稿画面に出てくる【赤い波線の消し方】と正体

WordPress記事投稿画面に出てくる「赤い波線」の消し方の紹介です。 この赤い波線、ある機能が働いて表示されているわけなんですが、表示を消してしまっても全然問題なし。 表示を消すことで画面がスッキリして、逆に記事を書く作業に集中できるほどです。   こんな人のお役に立てる記事です。 小豆WordPressの記事投稿画面にたまに出てくる「あの赤い波線」ってなに? 公開したブログには影響しないからいいんだけど、なんだか気になる。 目次 WordPress記事投稿画面に出てくる赤い波線の正体はスペ ...

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の評判を使用歴1年の僕が解説【見本サイトも紹介】

続きを見る

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

 

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

 

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

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

TOPページデザイン

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

 

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

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

使い方

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

 

  • レイアウト

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

使い方

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

 

  • バナー(リンク付き)

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

使い方

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

 

  • ブログカード

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

メモ

カードボタン

 

  • ボックスメニュー

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

使い方

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

 

  • プロフィール

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

使い方

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

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

 

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

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

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

 

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

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

 

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

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

 

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

レビュー
AFFINGERレビューTOP
【AFFINGER5レビュー】6つのココが気に入った!と2つの残念

続きを見る

 

\ AFFINGER5の使い方に関する記事 /

AFFINGER5の使い方
【AFFINGER5使い方】記事装飾を使いこなしてブログを書こう

続きを見る

見やすい表の作り方
AFFINGER5見やすい表の作り方【手順を全て解説】

続きを見る

画像サイト
ブロガーにおすすめの無料画像サイト3選【これだけでOK】

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人
大福

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2020 大福日記