広告 AFFINGER6

AFFINGER6(アフィンガー6)おしゃれなトップページにカスタマイズ|初心者でも簡単に設定できる方法

  • AFFIGER6(アフィンガー6)のトップページをおしゃれにカスタマイズしたい
  • 初心者でも簡単に設定ができる方法が知りたい
  • AFFIGER6(アフィンガー6)を導入前にカスタマイズ方法を知っておきたい

AFFINGER6(アフィンガー6)のトップページのこんな疑問にお答えしていきます。

この記事でわかること

  • トップページのカスタマイズ方法
  • おしゃれなトップページになる方法

AFFINGER6(アフィンガー6)はトップページのカスタマイズの自由度が高く細かな設定ができる強みがあります。
しかし、初心者には設定が少し難しいと思われがち・・・

このページでは初心者が簡単にカスタマイズできるように詳しく解説しています。
AFFINGER6(アフィンガー6)でおしゃれなトップページになるテクニックも解説していきますね。

\気になるWordPressテーマ/

AFFIGRE6を詳しく見る

※クリックすると公式サイトへ移動します

AFFINGER6(アフィンガー6)トップページ完成モデル

今回カスタマイズするトップページの完成モデルはこちら▼

現在このサイトのトップページになっています。

 

手順

  • 新着記事のスライドショーの作成
  • おすすめ記事の作成

まずトップページを設定する前におしゃれにするための準備をしていきましょう!

トップページの見せ方のテクニックを解説していきます。

AFFINGER6(アフィンガー6)おしゃれなトップページにデザインするテクニック!

トップページをおしゃれに見せるにはどうしたらいいの?

トップページをせっかくカスタマイズするならおしゃれに見せたいですよね。


そこで、カスタマイズ前におしゃれにするテクニックをお試し下さい!


ポイント

  • 色の配色を決めておく
  • ヘッダー画像やアイキャッチを統一しておく

私は適当にヘッダーやアイキャッチを作っていたので作り変えはさすがに大変でした。
はじめから統一しておくと楽ですよ。



色の配色を決めておしゃれなトップページにしましょう

トップページをおしゃれにするポイントとして、色の配色を決めておくと統一感がうまれます。
見た目のよい配色バランスはベースカラー・アクセントカラー・サブカラーに分けて面積の比率を決めておくとまとめやすくなります。

 

私のサイトではこのような配色のバランスで作りました。

トップページの配色を参考にした書籍があるので興味のある方は読んでみてくださいね。

 



ヘッダー画像やアイキャッチを統一しましょう

ヘッダー画像は決めた配色に合わせて画像を作る、もしくは写真に合わせて配色を決めるなどすると一体感がでます。
同じヘッダー画像でも写真の色合いや配色のバランスで印象が変わってきますね。

このサイトを例にあげると


現在のヘッダー画像

上の画像前に作ったのはこちら▼

ボツにしたヘッダー画像

このヘッダーは決めた配色にソファのピンクが濃く、色のバランスが良くなかったですね。
アクセントカラーの茶色もアクセントになっていなかったので止めました。


同じくアイキャッチも同じテイストにするとまとまり良くみえますよ。

変更前のアイキャッチ

アイキャッチはそれぞれ納得のいくものでしたが、トップページに載せるとバラツキがあるように見えますね。

現在のアイキャッチ

変更後は同じテイストで作ってみました。トップページは全体にまとまりのある感じになったと思います。



色の配色やヘッダー画像・アイキャッチの統一など参考にしてみてくださね。

次はトップページの作成をしていきます。



AFFINGER6(アフィンガー6)トップページを作成しまょう!

トップページの作成前に準備しておきましょう。

  • 見出しH3の設定の色やデザインを確認または再設定。
  • おすすめ記事の設定で使う写真や画像をメディアにアップロードしておく。



カスタマイズに必要になりますので確認しておいてくださね。

カスタマイズはステップ1~10になります。
少し長くなりますが頑張って設定していきましょう!



固定のページを作成します

step
1
固定のページの作成をしていきます。


『 固定ページ 』 → 『 新規作成 』





ページのタイトルはあなたの名前でOKです。


新着記事のスライドショーを作成しましょう

新着記事のスライドショーを作っていきます。
イメージはこちら▼

step
新着記事の見出しを作ります。


 


見出し H3  → 『 新着記事 』


と記入します。



step
記事のスライドショー作っていきます。





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


 html
[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=""]

このようなコードがでていると思います。
プレビューで確認してみると

スキンケア

2024/6/15

【クレンジング】オルビスオフクリームとバームどれがいい?40代50代口コミとレビューで検証

40代50代エイジングが気になる年代、クレンジングは何を使っていますか? ずっとオイルクレンジングだから、メイクが落ちれば何でも・・・そうなりがち。 同じクレンジングを使っていても20代30代のころとは肌の様子も変わっています。 乾燥が最近気になる メイクが落ちてないような気がする エイジングが気になる そんな人に向けてクレンジングの見直しをしてみては? オルビスのオフクリームはベストコスメに受賞した商品。 クレンジングバームは2024年発売された数量限定新商品です。 この2つのクレンジングの口コミや40 ...

ReadMore

オルビス定期便

スキンケア

2024/5/28

オルビス定期便のデメリットとは?1回でも解約できる定期購入のメリットを解説

オルビスの定期便使っていますか? 定期便といえば毎月送られてきて、支払いして解約しずらい・・・などのイメージ。 定期便のシステムを知らないとこんなはずじゃなかったなんてことがあるかもしれません。 ですが、オルビス定期便のデメリットを知っても1回でも解約できたり、通常より価格が安くなったりなどメリットのある定期便です。 メリット デメリット 通常価格より10%OFF 定期便の縛りがない お届け間隔の変更が可能 個数の変更が可能 支払い・お届け先・お届け日時の変更可能 3,300円未満は送料がかかる ポイント ...

ReadMore

オルビス ファンケル 美白美容液 どっち?

スキンケア

2024/6/5

【美容液】オルビスとファンケルの美白美容液を比較!40代50代に効果ないのはどっち?

オルビスのアドバンスドブライトニングセラムとファンケルのブライトニングエッセンス、美白美容液で高くもなく安くもない価格帯。 40代50代せっかく美白美容液を選ぶのに効果ないのでは意味ないですよね。 オルビスとファンケルの美白美容液どちらを選んだらいいのかしら? 40代50代に効果ある美白美容液はどっち? そんな疑問に実際に1ヶ月以上使った効果や感想でお答えしていきます。 まずはオルビスとファンケルのブランドの違いです。 オルビス アドバンスドブライトニングセラム ポーラ・オルビスグループの研究で作られた製 ...

ReadMore

ライフ

2024/4/4

母の日に予算2000円以内の高見えプレゼント!40代50代のお母さんの絶対喜ぶハンドクリーム

母の日には、予算2000円以内でありながらも高見えするプレゼントを贈りたいと考える方も多いことでしょう。 40代50代のお母さんに喜んでもらえるアイテムを見つけるのは大変ですよね。 本記事では、予算2000円以内で高見えするプレゼントを厳選しました。 日常使えるロクシタンのハンドクリームをセレクトしましたので、母の日にお母さんが喜んでくれること間違いありません。 予算を抑えつつも、愛情を込めたハンドクリームの贈り物を実現するアイデアをご紹介します。 母の日に予算2000円以内の高見えプレゼントの魅力 実用 ...

ReadMore

ライフ

2024/4/4

母の日消え物ギフト50代お母さんが喜ぶプレゼントは?おしゃれなスキンケアで決まり!

こんにちは、みなさん!母の日が近づいていますね。 50代お母さんが喜ぶ「形に残らないもの(消え物)」をプレゼントにしようと思っている方、何をプレゼントしようかお悩みではありませんか? 50代お母さんは、美容にも興味を持っていることが多いです。 普段自分ではなかなか買わないもようなおしゃれなスキンケア商品など喜んで使っていただけるでしょう。 どんなスキンケアを選んだら50代お母さんが喜ぶのか迷いますよね? そんな方々のために、今回は母の日形に残らないもの(消え物)50代お母さんが喜ぶおしゃれなスキンケアのプ ...

ReadMore

このようになっていればOKですね。



カスタマイズは表のコード『 ” 赤い文字 ” 』の箇所を変更してくださいね。

st-catgroup catカテゴリーID
page読み込み数
orderbyID
child子カテゴリーの読み込み
slideスライドショーのオン・オフ
slides_to_show列数の指定
slide_more「続きを読む」文字の変更
slide_more続きを読むのオン・オフ


おすすめ記事を作成しましょう

おすすめ記事を作っていきます。
イメージはこちら▼

step
4
おススメ記事の見出しを作ります。



ステップ2と同じくタイトルを付けます。

 

見出し H3  → 『 おススメ記事 』


と記入します。

step
バナーボックスを作ります

 

タグ → レイアウト → PCとTab → 左右50%





そうするとバナーボックスが2つできますね。

step
6
バナーボックスの中にカテゴリを作っていきます。

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

ボックスの中にコードが入りました。


このコードをカスタマイズしていきます。



カスタマイズは表のコード『 ” 赤い文字 ” 』の箇所を変更してくださいね

st-flexbox urlタイトルのURL
titleタイトル
backgroud_imageタイトル画像の背景のURL
radius角を丸くする(10ぐらいがおすすめ)

タイトル画像のURL

メディア → ライブラリー → 写真を選びます

写真のURLをコピーし、固定ページに戻ります。


backgroud_image””の所にURLを貼り付けます。



▼このような状態になった場合▼

そのまま 『 Ctrl + Z 』でURLに変換することができます。


タイトルの文字

タイトルにサブタイトルを付ける場合

タイトルとサブタイトルを入力。
プレビューすると

このように表示されます。



サブタイトルを入力しない場合はスペースは消しておきましょう。

スペースを消すとバランス良く表示されますよ。

step
7
おすすめ記事を設定します



カード →  記事のID



『 クラッシックエディタ 』から『 カード 』を選びます。


カードをクリックするとコードが表示されます

id記事のID
readmore『 続きを読む 』の表示 オン/オフ

記事のID

投稿 → 投稿一覧 → 記事のID

記事のIDは記事一覧で見ることができます。



『ステップ7』を3回繰り返します。


右側(水色の枠)も同じように作りましょう
注)ボックス枠の中に「このテキストは最後に消してください(50%)」の文字は忘れずに消しておいてくださいね。


両方できあがりましたら、もう一段『ステップ6』からつくっていきます。

あともう少しです!頑張りましょう!!!

step
8
記事の大きさを揃えましょう




さて、プレビューしみて下さい。


そうすると、記事の枠がずれていませんか?

 


タイトルの文字数で大きさに違いがでているようです。


できれば揃っている方が見た目もいいですよね。
揃え方はこちら▼


記事の枠の高さを変更します。
このページは「170」で設定していますが、合わない場合は調節してみて下さいね。


pc_heifht170に設定する
readmore続きを読むはオフまたは「””」にする

設定後、プレビューしてみましょう。

きれいに揃いました。

「続きをみる」は設定しない方がスッキリ見えるとおもいますよ。

 

step
9
トップページを公開しよう!

パーマリンクの入力

パーマリンク名は『 home 』と入力しましょう

 

最後に『 公開  』をクリックします。

 

 

固定ページは完成しました。
次は固定ページをトップページに設定しましょう!



トップページに設定から公開までしましょう

step
10
固定ページの設定

 

WordPress管理画面 外観  →  カスタマイズ



『 ホームページ設定 』をクリック。

 

  1. ホームページの表示を 『 固定ページ 』を選択
  2. 先ほど固定ページのタイトルを付けた「 home 」を選択
  3. 公開をクリック


お疲れさまでした!
これでトップページができあがりました。



【AFFINGER6】5ステップでサイドバーにプロフィールカードを設定方法!

合わせて読みたい
【AFFINGER6】5ステップでサイドバーにプロフィールカード設定方法!

続きを見る

まとめ|アフィンガー6おしゃれなトップページにカスタマイズ|初心者でも簡単に設定できる方法

アフィンガー6(AFFINGER6)おしゃれなトップページにカスタマイズで行った事

  • トップページの色の配色や画像を統一
  • 新着記事のスライドショーの設定
  • おすすめ記事の設定

あs今回はおしゃれなトップページにカスタマイズする方法を解説しました。

アフィンガー6(AFFINGER6)はカスタマイズの自由度が高く細かな設定ができます。

読み手がおしゃれなトップページだと思うとサイトを覚えてもらえたり、読者になってもらえたりしてもらえます。
サイトの顔でもあるトップページ作りのお手伝いができればと考えています。


\気になるWordPressテーマ/

AFFIGRE6を詳しく見る

※クリックすると公式サイトへ移動します



\ ぽちっとしていただけると励みになります /

   ▽ フォローまってます♪ ▽

mezo日記 - にほんブログ村

ブログランキング・にほんブログ村へにほんブログ村
  • この記事を書いた人
  • 最新記事

mezo

はじめまして。
40代に入りシミやシワに気付き今までさぼっていたスキンケアを大慌てで見直し中!
日本化粧品検定 1級
美容・化粧品成分アドバイザー
コスメマイスター・ライト
このサイトでは主婦歴21年の私がスキンケアや簡単なおやつ作り生活に役立つ情報を発信していきます。

-AFFINGER6