広告 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/2/26

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

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

ReadMore

ライフ

2024/2/9

50代から資格取得で人生やり直し!事務職ならユーキャン介護事務講座勉強方法から資格取得まで

50代になりこのまま年齢を重ねるだけじゃダメだよね。何か始めたい!始めないと!と気だけは焦ってきますよね。 50代でも取れる資格って何?できれば簡単に取りたい! 事務職に就職したい スキルアップしたい 履歴に書ける資格を取りたい 自宅で資格を取りたい ユーキャンの介護事務講座は国家資格ではありませんが、資格取得は就職にはプラスになります。またスキルアップを目指すなら短期間で自宅にいながら取得しやすい資格であり、履歴書にも書ける資格です。 私は10年程前にこの講座を受講しましたが難しいと感じ資格を取れずに終 ...

ReadMore

スキンケア

2024/1/18

ドクターシーラボVC100とメラノCCと比較!40代50代に効果ないって本当?実際に使ってみた

年齢を重ねると共に気になり始めるのが肌の変化。40代、50代となると、一層のスキンケアが求められます。 その中でも特に注目されているのが美容家さんもご愛用の高い人気を誇る「ドクターシーラボのVC100エッセンスローション」と口コミやプチプラで人気の「メラノCC 美白化粧水」です。これらの商品には、肌のくすみやシミに対する明確な約束がされていますが、果たして実際の効果はどうなのでしょうか。 しかし、「40代50代には効果ない」という声もちらほら。果たして本当に効果がないのでしょうか? ドクターシーラボVC1 ...

ReadMore

スキンケア

2024/2/1

エイジングケアが自宅で簡単に!オルビスユーとオルビスユードットの違いや選ぶポイントを紹介

年齢とともに変わる肌の状態。その変化に対抗するために「エイジングケア※1」が欠かせません。 忙しい日常では専門クリニックへ通う時間もなく、自宅で気軽にケア出来たらと思いませんか? そんな方におすすめなのが、オルビス「オルビスユー」と「オルビスユー ドット」紹介です。 この商品は、自宅で手軽にエイジングケア※1ができ、しかも信頼あるブランド。 日々の肌トラブルはもちろん、年齢を重ねることによる肌の変化にも対応しています。 「オルビスユー」と「オルビスユードット」どちらがあなたのスキンケアに最適なのか、共通点 ...

ReadMore

スキンケア

2024/1/29

オルビスユードットどこに売ってるの?どこで買える?販売店やロフト・ドラックストアを調査!

オルビスシリーズの最高峰オルビスユードット。 オルビス独自の成分「G.D.F.アクティベーター」と有効成分「トラネキサム酸」配合で年齢とともにハリや弾力感がなくゆるんだ肌にアプローチするシリーズ。 洗顔・化粧水・クリームだけでエイジングケアできる商品ですが このような疑問ありませんか? そのような方にオルビスユードットがどこで売ってるのか、どこで買えるのか?また販売店やロフト・ドラックストアを調べてみました。 結論 オルビスユードットは直販店又は公式サイトや楽天・Amazon・Yahoo!ショッピングで販 ...

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