こんにちは "osaboo"です。"@osaboo_Bot"
AFFINGER 管理 の「 トップページ」タブのメニューでできる 詳細設定の内容を初心者さん向けにわかりやすくご紹介します。
それではご覧ください!
\初心者でも安心! コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
AFFINGER 管理:トップページタブ(トップページの設定)の概要
この章では、AFFINGER 管理:トップページタブ(トップページの設定)の概要をご紹介します。
- ピンク色の破線部の設定項目を解説します。
各設定項目で、できることを以下に整理しました。^^/
・トップページの設定
トップページの設定では、固定記事(固定ページ)を挿入することができます。
WordPressの表示設定をそのままに、『ブログ型』から『サイト型』へ変更できます。
- 詳細は後述します。
・挿入コンテンツ
挿入コンテンツでは、トップページのメインエリアの最上部にテキスト画像などのコンテンツを挿入できます。
但し、現状ではクラシックエディターでの設定となるため初心者さん(ブロックエディターでスタートした人)は戸惑うかもしれません。「大丈夫ですよ。^^"」
・トップページのレイアウト
トップページのレイアウトでは、ページの表示方法を設定できます。カラム数やLPの設定などを選択することができます。
「サイドバーを表示するとか、表示幅を広くするとかのイメージですね。^^"」
・記事一覧
記事一覧では、新着記事の表示非表示を設定できます。トップページだけでなく、他の固定ページやカテゴリなどの下層ページへの表示設定も可能です。
・タブ式 カテゴリー記事一覧
タブ式 カテゴリー記事一覧では、タブブロックを使って細かく作成しなくてはいけない記事一覧が、簡単にできるようになっています。(表示される位置は限定されます)
・NEWS(お知らせ)の表示
ニュース(お知らせ)の表示では、カテゴリや表示数を指定して、記事へのテキストリンクを表示できます。(表示される位置は限定されます)
・動画背景(YouTube背景)
動画背景(YouTube背景)では、YouTube動画IDや動画URLを入力することで、トップページ(PC)の背景やスマホに動画を流すことができます。
全体の表示イメージはこんな感じです。
全体の表示イメージ:補足
この記事のサンプルでは、全体カラー設定を以下の画像のように設定しています。
バックグランドの色やテキストの色に影響します。
カラー設定で困ったらこちらの記事を参考にしてみてください。
トップページの設定
トップページの設定では、WordPress管理の表示設定が『最新の投稿』のとき、AFFINGER管理側の設定で固定記事(固定ページ)を表示できます。
AFFINGER管理側で『ブログ型』から『サイト型』に変更する方法です。
設定項目の画面は 以下の通りです。
- 固定ページは事前に準備しておきます。
固定記事(固定ページ)のIDを入力すると、その固定記事(固定ページ)のコンテンツが挿入できます。
(編集をクリックするとID登録したページに遷移します)
以下の画像は、固定記事(固定ページ)を設定していない状態です。(デフォルト:投稿ページ)
固定ページを設定すると『NEWS(お知らせ)の表示』が最上部にを表示できるようになります。
以下の画像は、固定記事(固定ページ)を設定した状態です。(コンテンツなし)
固定記事(固定ページ)にコンテンツを作成すると、赤矢印の領域に挿入されます。
以下の画像の「赤枠・背景緑」が、固定記事(固定ページ)のコンテンツ領域です。
- キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)
トップページの設定:補足
AFFINGER 管理の設定で、簡単にブログ型のサイトをサイト型に変更できるようになっています。
トップページと投稿ページを分けて作る必要がなければ…この設定がおすすめです。
「当サイトでは、投稿ページを専用の固定ページで作成しているため、採用していませんが…」
以下の記事で、『WordPress管理>設定>表示設定』で行う、トップページの固定ページ設定方法を詳しくご紹介しています。
AFFINGER管理の設定を使わない『ブログ型』から『サイト型』に変更する方法です。参考
挿入コンテンツ
設定項目の画面は 以下の通りです。
設定項目は、以下のように記入します。(サンプル用記入例)
クラシックエディタを使ったコンテンツが設定できます。
- キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)
挿入コンテンツ:補足
あまり凝ったコンテンツは作らない方がいいと思います。「ブロックエディターに慣れている人は特に!」
理由(筆者私見)
- クラシックエディターはいずれなくなるということ。
- 固定記事(固定ページ)の下側に表示されるという挿入位置に制限があるため、複雑なコンテンツは、固定記事(固定ページ)にまとめて作成した方が後々の変更などで有利です。
トップページのレイアウト
設定項目の画面は 以下の通りです。
設定項目の設定を変更した場合の表示イメージは、それぞれ 以下のようになります。参考
レイアウトをリセットする
1カラムにする
LP化する
LP化する + LP時にヘッダー(headerエリア)を表示する
トップページのレイアウト:補足
大抵の場合『レイアウトをリセットする(2カラム)のデフォルト』か、『1カラムにする』のどちらかで良いと思います。LP化を検討するのは、慣れてからがおすすめです。
記事一覧
初心者さんにはちょとわかりにくいかも…
設定場所がWordPress管理とAFFINGER管理にまたがっているので…
以下、3セクションに分けてご紹介します。
設定項目の画面は 以下の通りです。
それでは順番に見ていきましょう。
ブログ型:記事一覧の設定と表示イメージ
トップページの設定の項目では、以下のように固定記事を設定しません。(未記入)
設定項目は、以下のように記入します。(サンプル用記入例)
- 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
- サイトバーの新着記事の表示数が「3つ」になります。
- メインエリアの記事一覧がページャー付きで表示されます。
- メインエリアの新着記事の表示数「3つ」はWordPressの表示設定で行います。(補足参照)
- キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)
サイト型(AFFINGER管理):記事一覧の設定と表示イメージ
トップページの設定の項目では、以下のように固定記事のIDを入力します。(サンプル用記入例)
設定項目は、以下のように記入します。
- メインエリア上部に固定ページのコンテンツが 表示され、その下に記事一覧がページャー付きで表示されます。
- 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
- サイトバーの新着記事の表示数が「3つ」になります。
- メインエリアの新着記事の表示数「3つ」はWordPressの表示設定で行います。(補足参照)
サイト型(WordPress管理):記事一覧の設定と表示イメージ
トップページの設定の項目では、以下のように固定記事を設定しません。(未記入)
『WordPress管理>設定>表示設定』で『固定ページ』にチェックを入れ、ホームページ(top page)を選択します。
ホームページ用の固定ページ(top page)は、あらかじめ作成して 選択できるように準備します。
設定項目は、以下のように記入します。(サンプル用記入例)
- メインエリアの新着記事の表示数は、AFFINGER管理の設定が優先されます。(赤枠部)
- メインエリア上部に固定ページのコンテンツが 表示され、その下に記事一覧がページャーなしで表示されます。
- 「新着記事一覧」のタイトルがメインエリアとサイドバーに表示されます。
- サイトバーの新着記事の表示数が「3つ」になります。
- メインエリアの新着記事の表示数「3つ」は、AFFINGER管理:記事一覧の『新着一覧を表示する件数』で行います。(設定項目画面赤枠部)
- キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)
記事一覧:補足
- サイドバーに表示される 記事一覧の場所は、「サイドバー(上部)と サイドバー(中部)」ウィジェットの間です。
- メインエリアに表示する記事一覧の件数は、『WordPress管理>設定>表示設定』の『1ページに表示する最大投稿数』で設定します。(赤枠部)
タブ式 カテゴリー記事一覧
設定項目の画面は 以下の通りです。
設定項目は、以下のように記入します。(サンプル用記入例)
- タブ式カテゴリー4つを全て表示します。
- 各タブごとに色をつけとタブ文字色白色に設定します。
- 各タブごとの表示記事数を3つとします。
タブ式 カテゴリー記事一覧:補足
- カテゴリー(ID)に『999999』を記入した場合、『最新記事一覧タブ名』で、タブのタイトルが自由に決められます。
- タブは、4つ埋める必要はありません。タブ数によって均等に表示されるので、カテゴリが少ない場合は、2つ・3つでもOKです。「増えた時に追加しましょう」
NEWS(お知らせ)の表示
設定項目の画面は 以下の通りです。
設定項目は、以下のように記入します。(サンプル用記入例)
- 任意のタイトルが、タイトルバーに表示されます。
- お知らせに表示する件数が「5つ」になります。
- キーカラー設定が反映されます。(タイトルの文字色とバックグランドカラー)
動画背景(YouTube背景)
設定項目の画面は 以下の通りです。
設定項目は、以下のように記入します。(サンプル用記入例)
動画背景(YouTube背景):補足
『YouTube動画ID:』の入力について…
背景に表示したいYouTube動画を選択し、『共有』をクリックします。
以下のようなポップアップ画面が表示されます。
https://youtu.be/ 以下をコピーします。(赤マーキング部分)
コピーした「https://youtu.be/ 以下」を『背景に流すYouTube動画ID:』の枠欄にペーストして完了です。
\初心者でも安心! コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
まとめ!AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6
AFFINGER6の管理画面で行う『トップページ』の各設定項目について初心者さん向けにご紹介しました。
WordPressテーマ AFFINGER6専用の拡張機能を有効に使うために、お役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/