ブログ

【2023年最新】ワードプレステーマAFFINGER6を使ったおしゃれなトップページの作り方

※アフィリエイト広告を利用しています

 

 

もっさん
ワードプレスの人気テーマAFFINGER6を導入したけど、トップページをおしゃれにデザインする方法が分からない。

 

今回は、こんな悩みを解決していきます。

 

"もっさん"のワードプレスの始め方【第6巻】 

 

今回は、

ワードプレスブログのトップページをおしゃれにデザインしよう!

こちらの内容です。

 

今回は、ブログに訪れた読者が1番最初に見るトップページの作り方を解説していきます。

 

前提として、ワードプレスでブログを開設している方、AFFINGER6を既に導入済みの方に向けての記事になります。

 

まだの方は、"もっさん"のワードプレスの始め方【第1巻】から順番に読んでくださいね。

 

✅おしゃれなトップページを作成する手順は下記の通りです。

 

もっさん
AFFINGER6では、簡単におしゃれなトップページを作ることができます。

 

初心者でも簡単です。安心してくださいね。

 

Contents
  1. 固定ページを作成
  2. ヘッダーカードの設定
  3. スライドショーの設定
  4. バナー風ボックスの設定
  5. サイドバーに人気記事の設定
  6. まとめ

固定ページを作成

 

まずは、

固定ページを作成

こちらからやっていきましょう。

 

もっさん
固定ページとは普段の投稿記事とは違い、トップページ用の記事のことをいいます。

 

ワードプレス管理画面から、

「固定ページ」→「新規追加」

をクリックします。

⬆︎上図の順番でクリックしてください。

 

こちらの画面から、トップページ専用の記事を作成していきます。

 

 

タイトルはなんでも大丈夫です。

もっさん
僕は「トップページ」とタイトルをつけて分かりやすくしています。

 

タイトルをつけたら、一時保存しておきましょう。

 

ヘッダーカードの設定

 

次は、

ヘッダーカードの設定

こちらをやっていきましょう。

 

ヘッダーカードとは当ブログで言うと、

赤枠の部分のことを言います。

 

ヘッダーカードの作り方は、ワードプレス管理画面から、

「AFFINGER管理」→「ヘッダー下/おすすめ」

この順番でクリックします。

 

 

次に、

「画像のURL」、「テキスト(上の段)」「テキスト(下の段)」、「リンク先のURL」

 

を入力します。

画像をアップロードして、テキスト(上の段)、テキスト(下の段)を入力すると下図のようになります。

 

ここに、記事毎に決めてあるパーマリンクを追加することでページを移動することができます。

 

スライドショーの設定

 

次は、

スライドショーの設定

こちらをやっていきましょう。

当ブログでいう、赤枠部分の設定です。

 

もっさん
スライドショーの設定は一見難しそうだけど、一瞬で終わるので安心してください。

 

次は、

スライドショーの設定

こちらをやっていきましょう。

 

今回はトップページ(固定ページ)への設定方法を紹介します。

 

固定ページの編集画面を開いて、

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

をクリックします。

 

⬆︎上図の順番でクリックしましょう。

クリックすると、下記のようなコードが出力されます。

 

[--st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""--]

 

✅""の真ん中に下記の項目を入力していきます。

st-catgroup cat="0":表示させたい記事のIDを入力する

page="5":スライドショーに表示させたいページ数を入力する

order="desc" :古い順に並べたい場合、ascと入力する

child="on":小カテゴリーを出力したい場合はon、出力しない場合はoffを入力します。

slide_date="":日付を出力したい場合はon、出力しない場合はoffを入力します。

 

もっさん
ここはお好みでカスタマイズしてみてくださいね。

 

最後に忘れずに保存しましょう。

 

バナー風ボックスの設定

次は、

バナー風ボックスの設定

こちらをやっていきましょう。

 

当ブログのここの部分です。

 

 

固定ページの編集画面を開いて、

「タグ」→「レイアウト」→「全サイズ」→「左右50%」

をクリックします。

 

⬆︎上図のようにクリックします。

 

 

これで、左右均等のブログカードが表示されました。

 

次に、このボックスの中身を編集していきます。

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

をクリックします。

 

""の間に下記の項目を入力していきます。

  • title:バナーボックスに表示させたいタイトル
  • st-flexbox url:バナーボックスから移動先のURL
  • background image:背景のイメージ画像

 

次に下の参考記事を表示させていきます。

「タグ」→「記事一覧/カード」→「ブログカード」→「参考」

をクリックします。

 

今回は、3つの参考記事を表示させていきます。

 

次に、表示されているコード

st-card myclass="" id=""

に表示させたい記事のIDを載せれば完成です。

 

サイドバーに人気記事の設定

 

次は、

サイドバーに人気記事の設定

こちらをやっていきましょう。

 

 

当ブログのトップページだとここの部分です。

 

もっさん
こちらの設定は簡単なので、3分もあれば終わります。

 

ワードプレス管理画面から、

「AFFINGE管理」→「ヘッダー下/おすすめ」→「1番下に画面をスクロール」

この順番で操作してください。

 

⬆︎上図で囲った部分に入力します。

 

変更する内容は下記の3つです。

おすすめ記事一覧に表示する文字

表示させる記事のID

サイドのスクロールに表示するにチェックを入れる

 

変更が完了したら、「Save」を忘れずに押しましょう。

 

まとめ

 

以上が、ワードプレス人気テーマAFFINGER6でおしゃれなトップページを作る方法となります。

 

もっさん
お疲れ様でした。

 

続きはこちらから↓

 

最近では、ChatGPTを使ったブログの執筆方法も出てきています。

"もっさん"のインスタでは、フォロワーの方と密なコミュニケーションを取れるような企画や発信を心がけています。

 

【2023年最新】AIを使って稼ぐ方法3選【画像付きで徹底解説】

続きを見る

 

 

 

もっさん

AI系発信者、ブロガー(27)、横浜市在住|SNS総フォロワー1万5000人。AIツール、ChatGPTを使いこなす人。 AI・資産形成・副業の情報をお届けしているブログです。 □記事の中で分からないところがあれば、ツイッターかインスタで気軽に聞いてくださいね。

-ブログ