広告 WORDPRESS

【2023年】AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章/No.15】

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章/No.15】
 

専業ブロガー6年目のあずき猫です

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「HOME(TOPページ)」の作り方&カスタマイズ設定方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まずWordPressブログにおける「HOME」とは、個別の記事ページではなく…

「ブログ全体のTOP」にあたるページ

のことで、例えば当ブログの場合だと…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-01-a
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-01-b
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-01-c
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-01-d
 

↑ このような感じになっています

赤い枠のところが、今回作っていく箇所だよ!
 

補足

赤枠の箇所以外の、例えば「ヘッダー(最上部)エリア」や「サイドバーエリア」などの作り方・カスタマイズ方法については、第6章「デザイン」編のTOPページからご参照ください

AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章TOP】
AFFINGER6のおすすめなカスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章TOP】

続きを見る

 

で、ACTION AFFINGER6における「HOME」というのは、WordPress管理画面の左側一覧から…

AFFINGER管理

を開き、さらにそのなかの左側一覧から…

トップページ

というタブを開いたなかの…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-02

↑ こちらのフォーム内にて、「通常の個別記事」と同じように作成していく形です

 

つまり!

 

この「HOME」の解説は、当ブログガイドの第6章「デザイン」編のなかに(形式上は)含めてはいますが、実際にはそのあとの…

第7章「記事投稿」編にてご紹介している各種機能

を使って、作成やカスタマイズしていきますのでご了承ください

 

なのでこの記事では、当ブログの「HOME」で実際に使用している各種デザインが…

第7章「記事投稿」編のなかの、それぞれ「どの機能」を使って作成・カスタマイズしているのか?

について、まるっと整理してご紹介していきますね🐥

ということで、さっそく見ていこー!
 



 

【2023年】AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ【ワードプレスブログ完全初心者ガイド/第6章/No.15】

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

まずは冒頭でもお伝えした通り、WordPress管理画面の左側一覧から…

AFFINGER管理

を開き、さらにそのなかの左側一覧から…

トップページ

というタブを開いたなかの…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ top-02

↑ こちらのフォームを開いた状態にしておきましょう🐣

ここから1つずつ、順に解説していくよ!
 

ステップ1:網掛けボックスの作り方&カスタマイズ設定方法【AFFINGER6「マイボックス」機能を使用】

 

まず1つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-1-01
 

↑ こちらの(画像では少々わかりづらいですが)、薄いグレー色(もちろん色は指定可能)で囲われた「網掛けボックス」について

 

こうしたボックスデザインは、AFFINGER6の「マイボックス」という機能を使って作成しており…

  • ボックスの網掛け色
  • ボックスの枠線色
  • ボックスの枠線の太さ
  • ボックスの枠線の丸み
  • ボックス外側の、上下の余白

なども、自由にカスタマイズできます🐥

AFFINGERのなかでも、「必須レベル」で重宝してる機能だよ!

ステップ2:画像の貼り方【愛用中のおすすめ画像素材サイトもご紹介】

 

つづいて2つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-2-01
 

↑ こちらの「画像」部分について

 

まず画像素材についてはご自身でもちろん用意していただく形になりますが、参考までにこのブログでは、有料の高品質な画像素材サイトとして定番な「Shutterstock」というサービスを愛用しています(以前までは、「Unsplash」という無料で人気の画像素材サービスを主に使っていました)

 

画像を用意できたら、【ステップ1】でご紹介した機能「マイボックス」のショートコード内に、画像ファイルをそのまま貼りつければOKです🐥

補足

ブログに貼った画像に「リンク(指定ページに遷移する機能)」を設定する方法は、こちらをどうぞ ↓

AFFINGER6「テキストリンク・画像リンク」の貼り方&リンク文字色のカスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.16】
AFFINGER6「テキストリンク・画像リンク」の貼り方&リンク文字色のカスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

続きを見る

 

ステップ3:見出しタイトルの作り方&カスタマイズ設定方法【AFFINGER6「見出し風」機能を使用】

 

つづいて3つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-3-01
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-3-02
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-3-03
 

↑ こちらの「見出しタイトル」部分について

 

まず、当ブログの「HOME」で表示されている「見出しタイトル」は、実は…

  • h2(見出し2)
  • h3(見出し3)
  • h4(見出し4)
  • h5(見出し5)

といった通常の「見出し」機能ではなく、AFFINGER6を導入すると追加される…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-3-04

↑ こちらの…

  • h2風
  • h3風
  • h4風
  • h5風

といった ”見出し” の機能をあえて使用しており、つまり見た目は「通常の見出しと同じデザイン」ですが、その中身は検索エンジンからは「見出しとして認識されない」ただのテキストとなっています

 

補足

「そもそも『見出し』とか『h2 / h3 / h4…』ってなに…?」という場合は、こちらをどうぞ ↓ ※重要です

WordPressの見出しとは?作り方&「H1・H2・H3…」使い分けのポイントまとめ
WordPressの見出しとは?作り方&「H1・H2・H3…」使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】

続きを見る

 

そんなややこしい機能をなぜ「HOME」にあえて使用しているかと言うと、通常の記事のように「正式な見出し」を使ってパートを区切るには…

この「HOME」にあたるページは、コンテンツ量が単純に足りていない

からですね

普通の記事みたいに「なにか文章が書かれてる」わけじゃなく、このあと紹介する「ブログカード」とか「スライドショー」を貼ってあるだけだからね
 

もちろんSEO(検索エンジン最適化のこと)の観点から見て、このやり方が正解かどうかはわかりません

 

ただ少なくとも…

 

通常の「見出し」機能を使ってパートを区切るには、各パートの文字数がそれなりの量(せめて数百文字くらいは)ないと、シンプルに ”自然な使い方” とは言えないんじゃないかなと

特に「h2」や「h3」みたいな、「上層」にあたる見出しを入れる場合はね
 

なお、この「h2風 / h3風 / h4風…」機能の使い方そのものは、上の画像でご紹介した…

スタイル > 見出し

上記の手順で挿入するという点以外は、通常の「見出し」機能とまったく同じです

 

またデザイン面についても、通常の「見出し」機能のカスタマイズ設定内容がそのまま適用されます🐥

ステップ4:ブログカードの作り方&カスタマイズ設定方法【AFFINGER6「カード」機能を使用】

 

つづいて4つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-4-01
AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-4-02
 

↑ こちらの「ブログカード」、つまり「カード型デザイン」の記事リンクについて

 

この「ブログカード」部分には、AFFINGER6の「カード」機能を使っています🐥

ステップ5:章リストの作り方&カスタマイズ設定方法【AFFINGER6「カスタムボタン」機能を使用】

 

つづいて5つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-5-01
 

↑ こちらの「章リスト」について

 

この「章リスト」部分には、AFFINGER6の「カスタムボタン」機能を使用しています🐥

各タイトル(の縦列)が綺麗に揃わないという場合は、タイトル名の前後に「スペース」を入れて調整すればOK!

ステップ6:スライドショーの作り方&カスタマイズ設定方法【AFFINGER6「カテゴリ一覧(スライドショー)機能」を使用】

 

最後の6つ目のステップは…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-6-01
 

↑ こちらの「スライドショー」部分について

 

この「スライドショー」には…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-6-02

↑ こちらの「カテゴリ一覧(スライドショー)」という、AFFINGER6の機能を使用しています

 

まず右上のタブが「テキスト」ではなく「ビジュアル」になっていることを確認したら、上画像のように…

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

という手順で、ショートコードを挿入しましょう

 

補足

「ビジュアルとかテキストってなに…?」という場合は、こちらをどうぞ ↓ ※重要です

WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ
WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】

続きを見る

 

ショートコードを挿入できたら…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-6-03-a

↑ こちらの前半部分については、左から…

  • catgroup cat="●●"
    → ●●の部分に、表示させたい記事カテゴリーの「カテゴリーID」を入れる(例:20)
  • page="●"
    → ●の部分に、表示させたい記事のトータル件数を入れる(例:5)
  • slides_to_show="●,●,●"
    → ●,●,●の左から順に【大画面(PC)・中画面(タブレット)・小画面(スマホ)】それぞれで、一度に表示させたい記事の件数を入れる(例:3,3,1)

上記を参考に、スライドショーの表示形式を指定していけばOKです

 

つづいて…

AFFINGER6「HOME(TOPページ)」の作り方&カスタマイズ設定方法まとめ 1-6-03-b

↑ こちらの後半部分については、左から…

  • slide_date="●●"
    → 記事リンクに投稿・更新日時を表示させたい場合は「on」、表示させたくない場合は「off」もしくは空欄のまま
  • slide_more="●●"
    → 記事リンクに「続きを見る」ボタンを表示させたい場合は「on」、表示させたくない場合は「off」もしくは空欄のまま

上記の通り

それ以外のところは、基本デフォルトのままでOK!
 

ということで、一通り完成したら右上の「Save」ボタンを忘れずにクリックして、「HOME」の作成&カスタマイズは完了です🐥

 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

ワードプレスブログ「完全初心者」ガイド

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS