当ページのリンクには広告が含まれています。 Basic setting AFFINGER

AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6

AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER 管理 の「 トップページ」タブのメニューでできる 詳細設定の内容を初心者さん向けにわかりやすくご紹介します。

AFFINGER 管理の「トップページ」では、「挿入コンテンツ・トップページのレイアウト・記事一覧・タブ式 カテゴリー記事一覧・NEWS(お知らせ)の表示・動画背景(YouTube背景)」を設定できます。

初心者さん向けに、設定内容がどの箇所に反映されるかをわかりやすく解説します。

この記事では、トップページのレイアウト設計をスムーズに行うための手助けをします。

こんな方におすすめ!

  • AFFINGER6の初心者さん
  • トップページをおしゃれにしたい

この記事でわかること!

  • AFFINGER 管理:トップページタブ(トップページの設定)の概要
  • 挿入コンテンツ
  • トップページのレイアウト
  • 記事一覧
  • タブ式 カテゴリー記事一覧
  • NEWS(お知らせ)の表示
  • 動画背景(YouTube背景)
  • まとめ

それではご覧ください!

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

AFFINGER 管理:トップページタブ(トップページの設定)の概要

この章では、AFFINGER 管理:トップページタブ(トップページの設定)の概要をご紹介します。

『AFFINGER 管理>トップページ』をクリックします。

AFFINGER 管理:トップページタブ
  • ピンク色の破線部の設定項目を解説します。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

各設定項目で、できることを以下に整理しました。^^/

・トップページの設定

トップページの設定では、固定記事(固定ページ)を挿入することができます。

WordPressの表示設定をそのままに、『ブログ型』から『サイト型』へ変更できます。

  • 詳細は後述します。

挿入コンテンツ

挿入コンテンツでは、トップページのメインエリアの最上部にテキスト画像などのコンテンツを挿入できます。

但し、現状ではクラシックエディターでの設定となるため初心者さん(ブロックエディターでスタートした人)は戸惑うかもしれません。「大丈夫ですよ。^^"」

・トップページのレイアウト

トップページのレイアウトでは、ページの表示方法を設定できます。カラム数やLPの設定などを選択することができます。

「サイドバーを表示するとか、表示幅を広くするとかのイメージですね。^^"」

記事一覧

記事一覧では、新着記事の表示非表示を設定できます。トップページだけでなく、他の固定ページやカテゴリなどの下層ページへの表示設定も可能です。

・タブ式 カテゴリー記事一覧

タブ式 カテゴリー記事一覧では、タブブロックを使って細かく作成しなくてはいけない記事一覧が、簡単にできるようになっています。(表示される位置は限定されます)

・NEWS(お知らせ)の表示

ニュース(お知らせ)の表示では、カテゴリや表示数を指定して、記事へのテキストリンクを表示できます。(表示される位置は限定されます)

・動画背景(YouTube背景)

動画背景(YouTube背景)では、YouTube動画IDや動画URLを入力することで、トップページ(PC)の背景やスマホに動画を流すことができます。

公式ページのサンプル「架空の美容院」を見てみる。


AFFINGER 管理:トップページタブ|設定イメージ1
AFFINGER 管理:トップページタブ|設定イメージ2

全体の表示イメージ:補足

トップページの設定

トップページの設定では、WordPress管理の表示設定が『最新の投稿』のとき、AFFINGER管理側の設定で固定記事(固定ページ)を表示できます。

AFFINGER管理側で『ブログ型』から『サイト型』に変更する方法です。

  • 投稿ページが、トップページ(ホームページ)のサイトを『ブログ型』と言います。
  • 固定ページが、トップページ(ホームページ)のサイトを『サイト型』と言います。

デフォルトは、『ブログ型』です。
WordPress管理の表示設定で以下を確認してください。

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定
  • 固定ページは事前に準備しておきます。

固定記事(固定ページ)のIDを入力すると、その固定記事(固定ページ)のコンテンツが挿入できます。
編集をクリックするとID登録したページに遷移します)

以下の画像は、固定記事(固定ページ)を設定していない状態です。(デフォルト:投稿ページ)

AFFINGER 管理:トップページタブ|投稿ページ(固定ページなし)

固定ページを設定すると『NEWS(お知らせ)の表示』が最上部にを表示できるようになります。

以下の画像は、固定記事(固定ページ)を設定した状態です。(コンテンツなし)

固定記事(固定ページ)にコンテンツを作成すると、赤矢印の領域に挿入されます。

AFFINGER 管理:トップページタブ|固定ページのコンテンツなし
yajirusi-sita-80x40

以下の画像の「赤枠・背景緑」が、固定記事(固定ページ)のコンテンツ領域です。

AFFINGER 管理:トップページタブ|固定ページ有り
  • キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)

トップページの設定:補足

AFFINGER 管理の設定で、簡単にブログ型のサイトをサイト型に変更できるようになっています。

トップページと投稿ページを分けて作る必要がなければ…この設定がおすすめです。

「当サイトでは、投稿ページを専用の固定ページで作成しているため、採用していませんが…」

以下の記事で、『WordPress管理>設定>表示設定』で行う、トップページの固定ページ設定方法を詳しくご紹介しています。
AFFINGER管理の設定を使わない『ブログ型』から『サイト型』に変更する方法です。参考

あわせて読みたい

挿入コンテンツ

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|挿入コンテンツ

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|挿入コンテンツ|サンプル用記入例
yajirusi-sita-80x40

クラシックエディタを使ったコンテンツが設定できます。

AFFINGER 管理:トップページタブ|挿入コンテンツ
  • キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)

挿入コンテンツ:補足

あまり凝ったコンテンツは作らない方がいいと思います。「ブロックエディターに慣れている人は特に!」

理由(筆者私見)

  • クラシックエディターはいずれなくなるということ。
  • 固定記事(固定ページ)の下側に表示されるという挿入位置に制限があるため、複雑なコンテンツは、固定記事(固定ページ)にまとめて作成した方が後々の変更などで有利です。

トップページのレイアウト

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|トップページのレイアウト

設定項目の設定を変更した場合の表示イメージは、それぞれ 以下のようになります。参考

AFFINGER 管理:トップページタブ|トップページの設定|トップページのレイアウト|レイアウトをリセットする
yajirusi-sita-80x40
AFFINGER 管理:トップページタブ|トップページのレイアウト|レイアウトをリセットする
AFFINGER 管理:トップページタブ|トップページの設定|トップページのレイアウト|1カラムにする
yajirusi-sita-80x40
AFFINGER 管理:トップページタブ|トップページのレイアウト|1カラムにする
AFFINGER 管理:トップページタブ|トップページの設定|トップページのレイアウト|LP化する
yajirusi-sita-80x40
AFFINGER 管理:トップページタブ|トップページのレイアウト|LP化する
AFFINGER 管理:トップページタブ|トップページの設定|トップページのレイアウト|LP化する + LP時にヘッダー(headerエリア)を表示する
yajirusi-sita-80x40
AFFINGER 管理:トップページタブ|トップページのレイアウト|LP化する + LP時にヘッダー(headerエリア)を表示する

トップページのレイアウト:補足

大抵の場合『レイアウトをリセットする(2カラム)のデフォルト』か、『1カラムにする』のどちらかで良いと思います。LP化を検討するのは、慣れてからがおすすめです。

記事一覧

osaboo
osaboo

初心者さんにはちょとわかりにくいかも…
設定場所がWordPress管理とAFFINGER管理にまたがっているので…

以下、3セクションに分けてご紹介します。

記事一覧の設定方法3つ

  • ブログ型:記事一覧の設定と表示イメージ
  • サイト型(AFFINGER管理):記事一覧の設定と表示イメージ
  • サイト型( WordPress管理):記事一覧の設定と表示イメージ

  • AFFINGER管理画面で出てくる「表示設定」は、『WordPress管理>設定>表示設定』のこと!
  • 固定記事(固定ページ)の設定が、AFFINGER管理とWordPress管理で2種類の設定ができます。
    (固定記事(固定ページ)の設定:サイト型)
    • AFFINGER管理:トップページの設定で固定記事(固定ページ)をID番号で設定する
    • WordPress管理:表示設定で固定ページを選択し、ホームページに固定ページを割り付ける

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|記事一覧

それでは順番に見ていきましょう。

ブログ型:記事一覧の設定と表示イメージ

トップページの設定の項目では、以下のように固定記事を設定しません。(未記入)

AFFINGER 管理:トップページタブ|トップページの設定:投稿ページ

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|記事一覧|投稿ページでの設定
yajirusi-sita-80x40
  • 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
  • サイトバーの新着記事の表示数が「3つ」になります。
  • メインエリアの記事一覧がページャー付きで表示されます。
AFFINGER 管理:トップページタブ|記事一覧|投稿ページAFFINGER
  • メインエリアの新着記事の表示数「3つ」はWordPressの表示設定で行います。(補足参照)
  • キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)

サイト型(AFFINGER管理):記事一覧の設定と表示イメージ

トップページの設定の項目では、以下のように固定記事のIDを入力します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定:固定ページ

設定項目は、以下のように記入します。

AFFINGER 管理:トップページタブ|トップページの設定|記事一覧|投稿ページでの設定
yajirusi-sita-80x40
  • メインエリア上部に固定ページのコンテンツが 表示され、その下に記事一覧がページャー付きで表示されます。
  • 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
  • サイトバーの新着記事の表示数が「3つ」になります。
AFFINGER 管理:トップページタブ|記事一覧|固定ページWordPress
  • メインエリアの新着記事の表示数「3つ」はWordPressの表示設定で行います。(補足参照)

サイト型(WordPress管理):記事一覧の設定と表示イメージ

トップページの設定の項目では、以下のように固定記事を設定しません。(未記入)

AFFINGER 管理:トップページタブ|トップページの設定:投稿ページ

『WordPress管理>設定>表示設定』で『固定ページ』にチェックを入れ、ホームページ(top page)を選択します。

ホームページ用の固定ページ(top page)は、あらかじめ作成して 選択できるように準備します。

WordPress管理:設定|表示設定||固定ページホームページの表示

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|記事一覧|固定ページでの設定
  • メインエリアの新着記事の表示数は、AFFINGER管理の設定が優先されます。(赤枠部)
yajirusi-sita-80x40
  • メインエリア上部に固定ページのコンテンツが 表示され、その下に記事一覧がページャーなしで表示されます。
  • 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
  • サイトバーの新着記事の表示数が「3つ」になります。
AFFINGER 管理:トップページタブ|記事一覧|固定ページAFFINGER
  • メインエリアの新着記事の表示数「3つ」は、AFFINGER管理:記事一覧の『新着一覧を表示する件数』で行います。(設定項目画面赤枠部)
  • キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)

記事一覧:補足

  • サイドバーに表示される 記事一覧の場所は、「サイドバー(上部)と サイドバー(中部)」ウィジェットの間です。
  • メインエリアに表示する記事一覧の件数は、『WordPress管理>設定>表示設定』の『1ページに表示する最大投稿数』で設定します。(赤枠部)
WordPress管理:設定|表示設定|1ページに表示する最大投稿数
あわせて読みたい

タブ式 カテゴリー記事一覧

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|タブ式 カテゴリー記事一覧

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|タブ式 カテゴリー記事一覧|サンプル用記入済み
yajirusi-sita-80x40
  • タブ式カテゴリー4つを全て表示します。
  • 各タブごとに色をつけとタブ文字色白色に設定します。
  • 各タブごとの表示記事数を3つとします。
AFFINGER 管理:トップページタブ|トップページの設定|タブ式 カテゴリー記事一覧|サンプル用記入済み|表示イメージ

タブ式 カテゴリー記事一覧:補足

  • カテゴリー(ID)に『999999』を記入した場合、『最新記事一覧タブ名』で、タブのタイトルが自由に決められます。
  • タブは、4つ埋める必要はありません。タブ数によって均等に表示されるので、カテゴリが少ない場合は、2つ・3つでもOKです。「増えた時に追加しましょう」
あわせて読みたい

NEWS(お知らせ)の表示

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|NEWS(お知らせ)の表示

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|NEWS(お知らせ)の表示|サンプル用記入例
yajirusi-sita-80x40
  • 任意のタイトルが、タイトルバーに表示されます。
  • お知らせに表示する件数が「5つ」になります。
AFFINGER 管理:トップページタブ|トップページの設定|NEWS(お知らせ)の表示|サンプル用記入済み|表示イメージ
  • キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)

動画背景(YouTube背景)

設定項目の画面は 以下の通りです。

AFFINGER 管理:トップページタブ|トップページの設定|動画背景

設定項目は、以下のように記入します。(サンプル用記入例)

AFFINGER 管理:トップページタブ|トップページの設定|動画背景|サンプル記入例
yajirusi-sita-80x40

動画背景(YouTube背景):補足

『YouTube動画ID:』の入力について…

背景に表示したいYouTube動画を選択し、『共有』をクリックします。

AFFINGER 管理:トップページタブ|トップページの設定|動画背景(YouTube背景)|設定-1
yajirusi-sita-80x40

以下のようなポップアップ画面が表示されます。

 https://youtu.be/ 以下をコピーします。(赤マーキング部分)

AFFINGER 管理:トップページタブ|トップページの設定|動画背景(YouTube背景)|設定-2
yajirusi-sita-80x40

コピーした「https://youtu.be/ 以下」を『背景に流すYouTube動画ID:』の枠欄にペーストして完了です。

AFFINGER 管理:トップページタブ|トップページの設定|動画背景(YouTube背景)|設定-3
あわせて読みたい

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

まとめ!AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6

AFFINGER6の管理画面で行う『トップページ』の各設定項目について初心者さん向けにご紹介しました。
WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

AFFINGER6_おすすめ記事!

【2023年版 Wordpressテーマ】AFFINGER6とSWELL徹底比較!両方使ってみた 1

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

【特典付き】AFFINGER6(ACTION)を使って2年目のレビュー!メリット・デメリットを完全解説 2

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを目線を合わせてご紹介。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意!しました。

AFFINGER6 初心者がオススメする購入方法【特典付きを購入しよう!】 3

WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

AFFINGER6▶︎AFFINGERタグ管理マネージャー4 ver.4.1.1 の使い方! 4

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。

-Basic setting AFFINGER
-