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

[st-kaiwa1 r]こんにちは！スズヒロです！[/st-kaiwa1]

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

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

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

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

本日の記事内容

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

記事の信頼性

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

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

1 【Suzue Blogデザイン】今昔デザイン比較
2 【Suzue Blogデザイン】トップページ変更
3 【Suzue Blogデザイン】その他の注意点について
4 まとめ

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

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

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

第一印象は：

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

昔のデザイン

上記の印象を変えるために、トップページをカスタマイズ。

固定ページを利用してデザインして作りました。難しいことはありません。

ナビバーには一応カテゴリー網羅してます。

でもトップページで特に見てもらいたいカテゴリーをボックスにして表示してます。

その上にスライダーで、新着記事をセットしました。

ポイントは：

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

今のデザイン

＼SEOに強いWordPressテーマ／

[st-mybutton url=”https://www.infotop.jp/click.php?aid=382720&iid=75194″ rel=”sponsored”” title=”AFFINGER5はこちらから” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#039BE5″ bgcolor_top=”#29B6F6″ bordercolor=”#4FC3F7″ borderwidth=”1″ borderradius=”5″ fontsize=”” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#039BE5″ ref=””]

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

カスタマイズした点は：

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

記事スライドショー

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

流れは「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」を入れます。

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

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

[st-mybox title=”追加情報！” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”0″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]今回、カテゴリーを選択しましたが、新着記事一覧にする場合には、カテゴリーナンバーを削除すれば済みます！[/st-mybox]

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

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

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

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

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

コードは：

[[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]]

タイトル：ここには「カテゴリー」もしくは「ジャンル」を記載してください。

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