ブログ ブログ初心者 収入の柱 新着記事

AFFINGER6「トップページのカスタマイズ」を初心者向けに解説。【WordPressテーマ】

本気でブログで収益を上げたい。

AFFINGERをWordpressのテーマに選ばれた方なら、きっと同じ思いをお持ちだと思います。

WordPressテーマ 「ACTION(AFFINGER6)」

WordPressテーマ「AFFINGER」の特徴は
SEOやアフィリエイトに関する細かな設定、豊富な記事作成パーツなどたくさんありますが


機能がたくさんあって初心者の方にはすこし難しいところもあります。

初めてAFFINGERを使い始めたかたに、簡単にできるアフィンガーのデザイン方法をお伝えします。

AFFINGERのカスタマイズ方法1:トップページ

今回目指す完成形は、下記の通り。

赤枠のところを作っていきます。
ちなみに緑の枠部分は、こちらで解説していますので、よろしければご覧ください。

こちらもどうぞAFFINGER6「ヘッダーエリア全体に背景画像を”全面表示”させるやり方」を初心者向けに解説【WordPressテーマ】

それでは、やっていきましょうー!

その1 固定ページの作成

WordPressの管理画面の、メニュー一覧から

固定ページ → 新規追加

次に

「タイトルを追加」します。これは固定ページの名前になります。自分のブログ名でOKです。

 

これで、赤枠のエリアが出来上がりました。

その2 カテゴリ一覧スライドショー(新着記事)

次は

カテゴリー一覧スライドショーを作りましょう。私は、新着記事を表示させています。赤枠の部分です。

注意点として、このあとの作業を続けていくために、ワードプレスのエディターがGutenbergになっているかたは、Classic Editorというプラグインを有効化しておきましょう。(固定ページの編集が終わったら、有効化を解除すればGutenbergに戻ります。)

新着記事」の見出しを、「見出し3」に設定します。

(このあと「おすすめ記事」も作るので、一緒に設定しておいてもOK)

① コードを書く枠内に、「新着記事」と「おすすめ記事」と入力します。

入力後、「新着記事」の文字列内にカーソルを置き、

② 「段落」となっている下向き三角から「見出し3」を選択します。

これで、「新着記事」に見出し3が設定されました。「おすすめ記事」のほうも同じようにしておきます。

こんな感じで設定できます。

次に、カテゴリ一覧のスライドショーを作成します。

「新着記事」の「事」の後ろでエンターキーを一回押して、改行しておきます。

タグ」→「記事一覧/カード」→「カテゴリ一覧(スライドショー)」という流れで、
ショートコードを作ります。
カーソルのある位置にすぐ挿入されます。

こんな感じでコードが入ります。

ポイント

  1. st-catgroup cat="0" カテゴリID指定
  2. page="5" スライドショーの表示数
  3. orderby="ID"
  4. child="on" 子カテゴリの読み込みをするか、しないか
  5. slide="on" スライドショーのオン、オフ
  6. slides to show="3,3,1" 列数の指定
  7. slide date="" 投稿日の表示、非表示
  8. slide more="続きを読む" は、テキストを変更することができます。「ReadMore」とか「もっと詳しく」などもいいですね。
  9. slide center="on" オンかオフ スマホで両端が見切れるか
  10. fullsize type="" アイキャッチのみ、アイキャッチ+タイトル表示

どこを変えたらどう変化するかは、「プレビュー」で確認しつつ望むカタチになるようにやってみましょう。

注意

上記の①にある、「カテゴリID」とは、「記事ID」ではありません。
「投稿」→「カテゴリ」の「ID」で確認できます。

⑥の「slides to show="3,3,1"」は、大画面で3列表示、中画面で3列表示、小画面で1列表示になる、ということです。

ねろり
大画面は、閲覧サイズが960px以上のこと。
ねろり
中画面は、閲覧サイズが600px~959px以上のこと。
ねろり
小画面は、閲覧サイズが599px以下のこと。

⑩のスライドをアイキャッチのみにしたい場合は、「"card"」を使用します。(fullsize_type="card")
スライドをアイキャッチと記事タイトルのみにしたい場合は、「"text"」を使用します。(fullsize_type="text")

⑩の「fullsize type=""」は、デフォルトのままでは、記事本文が抜粋されて表示されます。

これらを踏まえてコードを入力すると、こんな感じのカテゴリ一覧スライドショー(新着記事)が完成します。

2022/9/6

エクセル基礎講座 第1回

2022/7/31

日本の伝統色を毎日纏う。組み合わせパターンは900!究...

2022/5/6

ホワイトセージの危機

2022/4/30

【超初心者向け】暗号資産(仮想通貨)を安全に保管する方...

2022/4/24

Twitterとブログを連携させよう AFFINGER...

こんな動きがある設定も、カッコよくできるのが、
WordPressテーマ 「ACTION(AFFINGER6)」をおすすめできる理由の一つです。

その3 おすすめ記事の作成

次に、「おすすめ記事」を作っていきましょう。

下記の部分です。


「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」という流れで、ショートコードを作ります。
カーソルのある位置にすぐ挿入されます。

黄色部分に入れたコードで、左側のエリアを作成します。青色部分に入れたコードで、右側のエリアを作成します。

続いて、バナー風ボックスを作りましょう。

黄色のパーツ内にカーソルを入れてから、
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順番で、
バナー風ボックスのコードを挿入します。

このようなコードが入ります。

コードを一部書き換えます。下記以外はそのままでもOKです。

ポイント

  1. st-flexbox url="ここにリンク先のURLを入れます"
  2. title="カテゴリーのタイトルを入れます" 私の場合だと ブログ初心者 と入れています。
  3. color="#fff" テキスト(タイトル)の文字色です。
  4. background image="カテゴリーのタイトルの背景にしたい画像のURL"
  5. blur="" ぼかし効果ありの場合は、on と入力します。

①のurlの調べ方は、「投稿」→「カテゴリー」→「対象のカテゴリー」の「表示」をクリックします。

「表示」で出てきたURLです。これをコピーし、st-flexbox url="" に貼り付けます。

④の背景画像を探すときは、

Unsplash がおすすめです。
https://unsplash.com/

⑤は、マウスを離しているときに背景画像がぼやけて、
マウスを乗せると背景画像がはっきりする効果にしたいときにonと入力します。
これでバナー風ボックスが出来上がりました。

その4 ブログカードの作成

では、続いてブログカードを作っていきましょう。下記の部分のことです。

黄色のパーツ内にカーソルを入れてから、

「カード」ボタンをクリックすると、

コードが入ります。

コードを一部書き換えます。下記以外はそのままでもOKです。

ポイント

  • id="" 表示させたい記事のIDを入れます
  • readmore="on" で「続きを見る」を表示、offで非表示になります。

私の設定は、赤字の部分だけです。

①の記事のIDの調べ方は、「投稿」→「投稿一覧」→右端の数字です。

私の場合は、ブログカードを3つずつ配置しています。

なので、下にこのコードをあと2つ貼り付けて、idの数字を変えればOKです。

ねろり

記事が増えてきたら、記事IDを入れ替えたりして、メンテナンスをしていくといいですね!

最後に、「管理画面」→「AFFINGER6 管理」→「全体設定」→「抜粋設定」で、
PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする
にチェックを入れると、ブログカードがタイトルだけの表示になります。

うれしい!
これで完成ですー。お疲れさまでした。

ワードプレスのテーマをお探しなら、こちらもオススメです。

ACTION PACK3はWordPressテーマ「ACTION(AFFINGER6EX)」及び最大限に活用する
「専用プラグイン」とPDFマニュアルをまとめたお得なパックです。
ねろり
お役に立てれば幸いです。

-ブログ, ブログ初心者, 収入の柱, 新着記事
-,