AFFINGER5

【Suzue Blogデザイン】アフィンガーのおすすめカスタマイズです!

2021年7月14日

こんにちは! アフィリで稼ぐ高齢ブロガー スズヒロです!
スズヒロ

もう、2年ぐらいになります。このブログテーマにして!

飽きがこないのがこのテーマの魅力です。

少しずつですがカスタマイズして、自分の好みに出来るからです!
 

早速、テーマのご紹介とカスタマイズの方法をご説明します!
 

本日の記事内容

人気ブログテーマアフィンガーのカスタマイズ

 

記事の信頼性

 

この記事を読んでいただくと:

カスタマイズの手順が分かります!

 

【Suzue Blogデザイン】今昔デザイン比較

 
最初に立ち上げた時の通常のデザインです!

こんな感じで、記事一覧トップページを飾ります

 
第一印象は:
 

・サムネール小いさ
・印象が薄い
・活字のみが目立つ
・わざわざ読みたくない
・せっかく来たけど帰ろ

 

昔のデザイン

 

 
 

上記の印象を変えるために、トップページをカスタマイズ。
 
固定ページを利用してデザインして作りました。難しいことはありません
 
ナビバーには一応カテゴリー網羅してます。
 
 
でもトップページで特に見てもらいたいカテゴリーをボックスにして表示してます。
 
その上にスライダーで、新着記事をセットしました。

 
ポイントは: 
 

・おすすめ記事を追加
・新着記事もスライダーで提示
・押しのカテゴリーを強調
・サムネイル大でインパクトを
・ついでに記事も読んでもらう

 
 

今のデザイン

 

 
 

\SEOに強いWordPressテーマ/

AFFINGER5はこちらから

 

【Suzue Blogデザイン】トップページ変更

 
カスタマイズした点は:
 

1.おすすめヘッダーカード
2.記事スライドショー
3.カテゴリーカード型挿入

 

おすすめヘッダーカード

 

読者に是非見てもらいたい記事を選択です!

 

Suzue Blogトップページの画像

 

まずはこの管理画面の「①AFFINGER5管理」から「②おすすめ記事一覧」の順にクリック

 

AFFINGER5の管理画面画像

 

ここが「ヘッダーカード」を作成する画面になります。赤枠で囲んだところに必要な情報を入力するだけです。4つありますので全部入力してください。数が少ないとバンランスが悪いです。
 

入力箇所は上から順番に:

・画像URL
・記事のタイトル
・記事のURL

 
AFFINGER5の管理画面のおすすめ記事一覧の画面
 

さらに、画面下の方に「デザイン」というところがあります。ここの「テキストのある背景画像をぼかす」「テキストのある背景画像を暗くする」「デフォルト」の3つのうちの1つを選択してください。

私は真ん中の「テキストのある背景画像を暗くする」を選びました。そして保存です。終了しました。簡単ですね。

 
AFFINGER5の管理画面のおすすめ記事一覧の保存画面
 

これがAFFINGER5のいい所です。

 

記事スライドショー

 

スライドショーの設定です。

流れは「AFFINGER5管理」「トップページ」「挿入コンテンツ」と行きます。そして「タグ」「記事一覧」「カテゴリー一覧(スライドショー)」を選択。

また「ビジュアル」から「テキスト」へ切り替えてコードをコピーします。
 
AFFINGER5の管理画面挿入コンテンツ画像

 

コードは:

[st-catgroup cat="723" page="8" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="続きを読む" slide_center="on" fullsize_type=""]
723:これはカテゴリー番号です。表示したいカテゴリー番号を入れましょ。
8:これはスライドの枚数です。表示されるのが8枚ということです。
続きを読む:これは英語で「ReadMore」としてもいいですね。

 

次に「外観」「ウィジェット」に入ります。

ウィジェットの中の「トップページ上部ウィジェット」をクリックして利用できるウィジェットの「カスタムHTML」を入れます。

そして先ほどのコードをコピペしましょう。名称を付ければ完了です。これで終了ですよ。
 

AFFINGER5の管理画面のウィジェットの画像

 

SEO対策の記事をスライドショーに選びました。

 

Suzue Blogトップページの画像

 

追加情報!

今回、カテゴリーを選択しましたが、新着記事一覧にする場合には、カテゴリーナンバーを削除すれば済みます!

 

2カテゴリーカード型挿入

 

流れは「AFFINGER5管理」「トップページ」「挿入コンテンツ」と行きます。

そして「タグ」「レイアウト」「PCとTab(959px以上)」「基本」とクリックします。すると、黄色と水色の枠が表示されます。

AFFINGER5の管理画面の挿入コンテンツ画像

 
次に黄色い枠内(このテキストは最後に消してください)をクリックしてカーソルを置きます。

そして「タグ」「ボックスデザイン」「バナー風ボックス」「左右50%」とクリックします。コードが挿入されます。

 

AFFINGER5の管理画面の挿入コンテンツ枠の画像
 
コードは:

[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"][/st-flexbox]
タイトル:ここには「カテゴリー」もしくは「ジャンル」を記載してください。

次に、表示されたコードの下にカーソルを置いて「カード」をクリックして下さい。コードが挿入されます。

 

AFFINGER5の管理画面の挿入コンテンツ枠と↓の画像

 

カードは3回押してください。さらに右側の方も同様に設定してください。出来上がりは:

 

AFFINGER5の管理画面の挿入コンテンツ枠完成の画像
 

カードのコードは:

[st-card myclass="" id=36342 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on"]

 

id=36342:ここにはあなたの記事のidを入力してください。

 

記事idの調べ方:記事編集画面で編集をクリック。URL表示バーの中に番号が表示されます。「post=0000」

 

 

\SEOに強いWordPressテーマ/

AFFINGER5はこちらから


 

【Suzue Blogデザイン】その他の注意点について

 
上記の手順の中のサムネイルサイズと現在のサムネイルサイズが違うじゃないか?

というご質問があると思います。
 
追加で解説いたします!

手順の中のサムネイルサイズの場合、特にアイキャッチ画像のサイズを気にしなくていいと思います。

もし、現在のサムネイルサイズを使いたい、と思われる方は、以下の点にご留意ください!
1.アイキャッチ画像をすべて同一サイズにすること

 
なぜなら、プラグインのRegenerate Thumbnailsを使用しても、アフィンガーのサムネイルサイズを均一化することができませんでした。

お願い:もしこの件について詳しくご存じの方がいらっしゃいましたら、ご連絡ください!

 

まとめ

 
男女二人がパズルのピースをセットしている画像
 

いかがでしたか?

是非あなたもアフィンガーでお気に入りのデザインを手に入れてください!

 

\SEOに強いWordPressテーマ/

AFFINGER5はこちらから

 


 
本日は以上になります。

 
 

この記事があなたの役に立ちましたなら、
下記リンクにてご意見をツイートしていただけると嬉しいです!

ありがとうございました。

ご意見をツイートいただいてスズエヒロを調子に乗せる!
 

  • この記事を書いた人
  • 最新記事

スズエヒロユキ

LifeDesigner|塾英語講師をやめましたもっと好きなことをしたいので|【経歴】米国SF州立大卒×元会社経営者|ブログ × SNS × Youtubeについて呟きます|新時代の「ワクワク」をどんどん制作したい:bit.ly/3g1dB8X

-AFFINGER5

Copyright© Suzue Blog , 2021 All Rights Reserved.