AFFINGER

AFFINGER5(アフィンガー5)カスタマイズ設定【トップページ】

2020-06-15

トップページ

 

悩む人
トップページの設定方法が分からない
AFFINGER5でのトップページのカスタマイズ方法分からない
あきブログのトップページ真似したい

こんな悩みを解決します。

 

本記事の内容

  • AFFINGER5のトップページカスタマイズ方法
  • あきブログのトップページ作り方

 

サイトの中で一番開かれるページである「トップページ」

 

トップページが見辛かったり、しょぼいとサイトからユーザーが離脱してしまう可能性が。

そうならないためにも見やすくオシャレなトップページを作るように心がけましょう。

 

AFFINGER5ならトップページを簡単にオシャレに作成することができます。

 

本記事ではAFFINGER5でのトップページカスタマイズ方法を解説した後、「あきブログ」のトップページの作り方を画像を使って分かりやすく紹介。

この記事を読めば「あきブログ」と同じトップページを作ることができます。

 

この記事で紹介するカスタマイズ設定を丸パクリしてもらって構いません。

またこのブログ記事を読んで、同じトップページ構成にしたという方がいれば、Twitterから一言いただけると嬉しいです。

一言いただけたらブログ見にいって宣伝させてもらいます!

 

【AFFINGER5】トップページカスタマイズ方法

AFFINGERトップページ

AFFINGERでのブログカードのカスタマイズ方法は2種類の設定画面があります。

  • AFFINGER5管理
  • カスタマイズ設定

「AFFINGER5管理」は固定ページ設定や挿入コンテンツ設定、「カスタマイズ設定」は色や背景画像を変更できます。

設定方法について詳しく説明します。

 

AFFINGER管理

トップページAFFINGER管理

AFFINGER5管理では固定ページ設定や挿入コンテンツ設定ができます。

WordPress管理画面より「AFFINGER5管理」→「トップページ」です。

ここでの設定項目は3箇所。

  • 記事一覧:表示する記事の種類や数
  • NEWS(お知らせ)の表示:お知らせバーの設定
  • YouTube背景:YouTubeの背景表示設定

 

またトップページの表示を

固定ページのものを使うなら→③-a

固定ページによらず、コンテンツを挿入する場合は→③-b

に書きます。

 

ID調べ方

固定ページをトップページとするならIDを調べて記入します。

ワードプレス管理画面の「固定ページ」をクリックすると右側にIDが表示されるので、ブログカードにしたいページのIDを覚えて、画像のように入力しましょう。

 

ちなみに私と同じ設定にしたい場合は以下(画像も参照)のように設定してください。

あきブログの設定

記事一覧

  • トップページのコンテンツ内の新着記事一覧を非表示にする
  • トップページのサイドバーの新着記事一覧を非表示にする
  • 下層ページのサイドバーの新着記事一覧を非表示にする

NEWS(お知らせ)の表示・YouTube背景

  • 設定なし

 

では設定項目について簡単に説明します。

 

記事一覧

記事一覧

表示する新着記事の種類や数を設定できます。

具体的には以下の新着記事に対する設定が可能。

  • カテゴリー
  • 見出し
  • 非表示設定
  • 新着記事表示件数

 

後ほど解説しますが、スライドショーを使った新着記事を表示させています。

理由としてはデザインが気に入らないから。

あきしゅん
自分の好きなデザインを作るために新着記事はスライドショーを用いてるよ!

 

NEWS(お知らせ)の表示

お知らせ設定

お知らせバーの設定ができます。

具体的には以下のお知らせに対する設定が可能。

  • お知らせの表示
  • タイトル
  • 表示カテゴリ
  • 表示件数

お知らせ

実際に設定してみると画像のように表示されます。

 

YouTube背景

YouTube設定

YouTubeの背景表示を設定できます。

ただじ、私は1000人以上のブロガーさんのトップページを見てきましたが、誰も背景にYouTubeを流すブロガーさんはいませんでした。

YouTubeを流す必要がないことや、ページが重くなってしまうからでしょう。

 

推奨しませんが、どうしても流したい場合は設定してください。

 

カスタマイズ設定

トップページカスタマイズ

カスタマイズではトップページの色や背景画像を変更できます。

WordPress管理画面より「外観」→「カスタマイズ」です。

上のような画面が表示されたら、「基本エリア設定」→「mainエリア(記事)」に進んでください。

 

ここでは以下の設定ができます。

  • 背景色
  • 周りのボーダー
  • 背景画像

 

背景を単色ではなく、画像を挿入することが可能。

画像の位置の調整もできます。

 

トップページカスタマイズ1

上の画像を参考にトップページのカスタマイズを決めてください。

画像の設定は「あきブログ」のものです。

 

【AFFINGER5】あきブログのトップページ作り方

あきブログトップページ

画像はあきブログで左がPC表示、右がスマホ表示です。

あきブログのトップページは2つの構成でできています。

あきブログ構成

  • 新着記事(スライドショー)
  • カテゴリー別人気(ブログカード)

 

また、トップページは固定ページより作成しています。

まずはワードプレス管理画面の「固定ページ」→「新規追加」をクリックしてください。

 

トップページ作成

画像のようにタイトルや見出しを設定しましょう。

見出し作成手順

  1. タイトルをお好みで入力
  2. 「新着記事」と「カテゴリー別人気」を入力
  3. 各項目を「見出し2」に設定

 

では各構成要素の作り方について解説していきます。

 

新着記事(スライドショー)

あきブログ新着記事

新着記事はスライドショーで表示することにより目立たせてます。

また、表示幅に合わせてPCは3記事、スマホは2記事を表示。

[st-catgroup cat="0" page="6" order="desc" orderby="id" child="off" slide="on" slides_to_show="3,3,2" slide_date="off" fullsize_type="text" slide_more=""]

表示の都合上[ ]に余白が入ったコードになっています。このままコピペしても使えません。

 

また、「タグ」→「記事一覧」→「カテゴリー一覧(スライドショー)」から上記のコードを使うことができます。

 

設定はカテゴリーによらずに最新6記事を、アイキャッチ画像とタイトルのみ表示させてます。

スライドショー見本

 

スライドショーの詳細な設定方法に関してはこちらの記事で解説してるので参考にしてください。

自分なりのカスタマイズをすることができます。

slide-show-setting
AFFINGER5(アフィンガー5)カスタマイズ設定【スライドショー】

続きを見る

 

カテゴリー別人気(ブログカード)

あきブログカテゴリー別人気

続いてカテゴリー別人気記事を作成していきます。

ちなみに完成は図のような感じになります。

 

コード

すごい難しそう...
安心してください、順番に解説していきます!
あきしゅん

 

 

左右50%

「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」からコードを挿入します。

黄色が左側、水色が右側に表示されます。

ただし、スマホで見た場合は1列で表示(見出しの画像参考)

 

続いて次のようなバナー風ボックスを設定します。

(クリックするとリンク先に移動します)

 

バナー風ボックス

「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することができます。

[ st-flexbox url="リンク先" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="タイトルの背景画像" blur="on" left="" margin_bottom="0"][/st-flexbox ]

表示の都合上[ ]に余白が入ったコードになっています。このままコピペしても使えません。

黄色マーカーを自分好みにカスタマイズしてください。

 

続いてブログカードを挿入します。

 

ブログカード

「カード」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することができます。

[ st-card myclass="" id=記事ID label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="デフォルトはonだがoffに" ]

表示の都合上[ ]に余白が入ったコードになっています。このままコピペしても使えません。

黄色マーカーを自分好みにカスタマイズしてください。

 

ブログカードの詳細な設定方法に関してはこちらの記事で解説してるので参考にしてください。

ブログカード
AFFINGER5(アフィンガー5)カスタマイズ設定【ブログカード】

続きを見る

 

最後にボタンを配置します。

 

ボタン

「タグ」→「カスタムボタン」→「ミニ」→「基本」からコードを挿入します。

下のコードの一部をコピーして書き換えても使用することができます。

[ st-mybutton-mini url="リンク先" title="タイトル" rel="" fontawesome="" target="" color="文字色" bgcolor="背景色" bgcolor_top="" bordercolor="" borderwidth="" borderradius="3" fontsize="" fontweight="" fontawesome_after="" shadow="#BDBDBD" ref="" ]

表示の都合上[ ]に余白が入ったコードになっています。このままコピペしても使えません。

黄色マーカーを自分好みにカスタマイズしてください。

ボタンを中央揃いにしたらいい感じに設置されます。

 

トップページ完成

ここまで終えると上記のように表示されているはずです。

これで1カテゴリー完成しました!

 

お好みでブログカードの数を増やしても構いません。

同じ要領で各カテゴリーを作成してください。

 

あきしゅん
お疲れさまでした!

 

トップページカスタマイズ注意事項

注意

おしゃれで見やすいトップページにするために注意事項が2つあります。

  • アイキャッチ画像のサイズを揃える
  • 記事を載せすぎない

 

アイキャッチ画像のサイズを揃える

アイキャッチ画像のサイズを統一しておきましょう。

統一しないと、紹介した「カテゴリー別人気」でブログカードの大きさがバラバラになってしまいます。

 

推奨アイキャッチ画像のサイズは横幅1200px以上です。

この理由はGoogleが1200px以上を推奨しているから。

高画質でサイズの大きい画像(幅が 1,200 ピクセル以上)を使用します。

引用:Google Discover

 

また、画像の横幅と縦幅の比は16:9が見やすくてオススメです。

あきしゅん
あきブログの画像は基本1,200px × 675pxにしてるよ!

 

記事を載せすぎない

たくさんの記事をトップページに載せてしまうと、どの記事がオススメなのか伝わりません。

なので目安ですが、トップページで表示させる記事の数は多くても20記事にしましょう。

 

情報の詰めすぎは、読者を混乱させてしまいます。

 

例えばこんな2記事があったとしましょう。

  • 春に旅行に行きたい100選
  • 春に旅行に行きたい5選

この2記事から旅行先の選びやすさは5選の方です。

100選は情報を知るのにはオススメですが、選択肢が多すぎて選びにくくなります。

 

記事でも同じことが言えます。

記事の載せすぎは読者の混乱を招くので気をつけましょう。

 

トップページデザインについてはこちらの記事も参考にしてください。

top-page-design
目を引くトップページデザイン【あきブログのこだわりの秘密を大公開】

続きを見る

 

【AFFINGER5】トップページカスタマイズ設定まとめ

AFFINGER5でのトップページの詳しい設定方法を解説しました。

また、私の「あきブログ」のトップページの作り方をご紹介しました。

 

デザイン性が高いAFFINGERで、自分好みのトップページをカスタマイズしてみてください。

また、私のトップページカスタマイズ設定も参考にしてみてください。

 

読者目線で見やすいサイトを意識しつつ、自分好みのトップページを作ってブログを楽しみましょう。

 

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧

 

 

この記事を読んでるという方はAFFINGERを既に使っている方だと思います。

以下の文章は WordPressテーマ「AFFINGER」を購入しようと思っている方向けです

AFFINGERならトップページをプログラミングの知識いらずで簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このトップページのデザインは変わっていません。

しかも、私はプログラミングの知識はほとんど0なのにです。

 

初心者でもAFFINGERなら、あなたが作りたいトップページを簡単に作ることが可能。

こちらの記事を読めばAFFINGERがいかにデザインカスタマイズ性が高いか評判を確認することができます。

 

こんな方にオススメ

  • 今のテーマでデザインに納得してない方
  • ブログ初心者でテーマ選びに迷ってる方
  • CSSの知識がないけどブログデザインに力入れたい方

 

これらに当てはまる方は是非早いうちに、AFFINGER導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

 

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか?

AFFINGER5の購入はこちら

 

-AFFINGER

©️ 2020 あきブログ